Skip to content

Fix mobile usability issues in Create with AI feature #1388

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
Copilot wants to merge 2 commits into
base: main
Choose a base branch
from
Draft

Fix mobile usability issues in Create with AI feature #1388

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
c1ec06b
Initial plan
Copilot Jul 20, 2025
99f00c3
Fix mobile usability issues in Create with AI feature
Copilot Jul 20, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
54 changes: 27 additions & 27 deletions app/src/pages/AILandingPage/PromptPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -106,30 +106,30 @@ function PromptPage({
);

return (
<div className="min-h-screen bg-gradient-to-br from-indigo-50 via-blue-50 to-purple-50 p-6">
<div className="min-h-screen bg-gradient-to-br from-indigo-50 via-blue-50 to-purple-50 p-3 sm:p-6">
<div className="max-w-5xl mx-auto">
<div className="flex items-center justify-center mb-12">
<div className="flex items-center justify-center mb-6 sm:mb-12">
<div className="relative">
<LineChart className="w-16 h-16 text-indigo-600" />
<Sparkles className="w-6 h-6 text-yellow-400 absolute -top-1 -right-1 animate-pulse" />
<LineChart className="w-12 h-12 sm:w-16 sm:h-16 text-indigo-600" />
<Sparkles className="w-4 h-4 sm:w-6 sm:h-6 text-yellow-400 absolute -top-1 -right-1 animate-pulse" />
</div>
<div className="ml-4">
<h1 className="text-5xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-indigo-600 to-purple-600">
<div className="ml-3 sm:ml-4">
<h1 className="text-3xl sm:text-5xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-indigo-600 to-purple-600">
VizHub
</h1>
<p className="text-gray-600 mt-1">
<p className="text-gray-600 mt-1 text-sm sm:text-base">
AI-Powered Data Visualization Platform
</p>
</div>
</div>

<form onSubmit={handleSubmit} className="space-y-8">
<div className="bg-white/80 backdrop-blur-lg rounded-2xl shadow-xl p-8 border border-white/20">
<div className="flex items-center mb-4">
<Sparkles className="w-5 h-5 text-indigo-600 mr-2" />
<form onSubmit={handleSubmit} className="space-y-4 sm:space-y-8">
<div className="bg-white/80 backdrop-blur-lg rounded-xl sm:rounded-2xl shadow-xl p-4 sm:p-8 border border-white/20">
<div className="flex items-center mb-3 sm:mb-4">
<Sparkles className="w-4 h-4 sm:w-5 sm:h-5 text-indigo-600 mr-2" />
<label
htmlFor="prompt"
className="text-xl font-semibold text-gray-800"
className="text-lg sm:text-xl font-semibold text-gray-800"
>
Describe Your Visualization
</label>
Expand All @@ -138,13 +138,13 @@ function PromptPage({
id="prompt"
value={prompt}
onChange={(e) => setPrompt(e.target.value)}
className="w-full h-48 p-6 border-2 border-indigo-100 rounded-xl focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition-all bg-white/50 backdrop-blur-sm text-lg"
className="w-full h-32 sm:h-48 p-3 sm:p-6 border-2 border-indigo-100 rounded-lg sm:rounded-xl focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition-all bg-white/50 backdrop-blur-sm text-base sm:text-lg"
placeholder="Example: Create a dynamic bar chart showing sales trends over time, with monthly comparisons and growth indicators..."
/>
</div>

<div
className={`bg-white/80 backdrop-blur-lg rounded-2xl shadow-xl p-8 border-2 transition-all duration-300 ${
className={`bg-white/80 backdrop-blur-lg rounded-xl sm:rounded-2xl shadow-xl p-4 sm:p-8 border-2 transition-all duration-300 ${
isDragging
? 'border-indigo-400 bg-indigo-50/50'
: 'border-dashed border-gray-300 hover:border-indigo-300'
Expand All @@ -153,45 +153,45 @@ function PromptPage({
onDragLeave={handleDragLeave}
onDrop={handleDrop}
>
<div className="flex flex-col items-center justify-center space-y-6">
<div className="flex flex-col items-center justify-center space-y-3 sm:space-y-6">
<div className="relative">
<FileSpreadsheet className="w-16 h-16 text-indigo-400" />
<Upload className="w-6 h-6 text-indigo-600 absolute -top-1 -right-1" />
<FileSpreadsheet className="w-12 h-12 sm:w-16 sm:h-16 text-indigo-400" />
<Upload className="w-5 h-5 sm:w-6 sm:h-6 text-indigo-600 absolute -top-1 -right-1" />
</div>
<div className="text-center space-y-2">
<p className="text-xl font-semibold text-gray-800">
<p className="text-lg sm:text-xl font-semibold text-gray-800">
Upload Your Dataset
</p>
<p className="text-gray-600">
<p className="text-gray-600 text-sm sm:text-base">
Drag and drop your CSV file here, or
</p>
<label className="inline-flex items-center px-6 py-3 border-2 border-indigo-600 text-base font-medium rounded-xl text-indigo-600 bg-transparent hover:bg-indigo-600 hover:text-white transition-colors duration-300 cursor-pointer group">
<label className="inline-flex items-center px-4 py-2 sm:px-6 sm:py-3 border-2 border-indigo-600 text-sm sm:text-base font-medium rounded-lg sm:rounded-xl text-indigo-600 bg-transparent hover:bg-indigo-600 hover:text-white transition-colors duration-300 cursor-pointer group min-h-[44px]">
<input
type="file"
className="hidden"
accept=".csv"
onChange={handleFileInput}
/>
<Upload className="w-5 h-5 mr-2 transition-transform group-hover:scale-110" />
<Upload className="w-4 h-4 sm:w-5 sm:h-5 mr-2 transition-transform group-hover:scale-110" />
Select File
</label>
</div>
{file && (
<div className="flex items-center space-x-2 text-indigo-600 bg-indigo-50 px-4 py-2 rounded-lg">
<FileSpreadsheet className="w-5 h-5" />
<p className="font-medium">{file.name}</p>
<div className="flex items-center space-x-2 text-indigo-600 bg-indigo-50 px-3 py-2 sm:px-4 sm:py-2 rounded-lg">
<FileSpreadsheet className="w-4 h-4 sm:w-5 sm:h-5" />
<p className="font-medium text-sm sm:text-base">{file.name}</p>
</div>
)}
</div>
</div>

<button
type="submit"
className="w-full flex items-center justify-center px-8 py-6 text-xl font-medium rounded-2xl text-white bg-gradient-to-r from-indigo-600 to-purple-600 hover:from-indigo-700 hover:to-purple-700 transform hover:scale-[1.02] transition-all duration-300 shadow-xl hover:shadow-2xl focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
className="w-full flex items-center justify-center px-4 py-3 sm:px-8 sm:py-6 text-lg sm:text-xl font-medium rounded-xl sm:rounded-2xl text-white bg-gradient-to-r from-indigo-600 to-purple-600 hover:from-indigo-700 hover:to-purple-700 transform hover:scale-[1.02] transition-all duration-300 shadow-xl hover:shadow-2xl focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 min-h-[44px]"
>
<Sparkles className="w-6 h-6 mr-3" />
<Sparkles className="w-5 h-5 sm:w-6 sm:h-6 mr-2 sm:mr-3" />
Generate Visualization
<SendHorizontal className="w-6 h-6 ml-3" />
<SendHorizontal className="w-5 h-5 sm:w-6 sm:h-6 ml-2 sm:ml-3" />
</button>
</form>
</div>
Expand Down