Skip to content

🚀 Implement comprehensive mobile responsiveness across all UI components #4

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

🚀 Implement comprehensive mobile responsiveness across all UI components #4

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
8c3c893
Initial plan
Copilot Sep 1, 2025
14b6276
Implement comprehensive mobile responsiveness improvements
Copilot Sep 1, 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
12 changes: 7 additions & 5 deletions app/(main)/workspace/[id]/page.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,17 +4,19 @@ import React from 'react';

const Workspace = () => {
return (
<div className="min-h-screen bg-gray-950 relative overflow-hidden">
<div className="min-h-screen bg-gray-950 relative overflow-hidden mobile-container">
{/* Animated background elements */}
<div className="absolute inset-0 bg-[linear-gradient(to_right,#4f4f4f2e_1px,transparent_1px),linear-gradient(to_bottom,#4f4f4f2e_1px,transparent_1px)] bg-[size:14px_24px]">
<div className="absolute left-1/2 top-0 h-[500px] w-[1000px] -translate-x-1/2 bg-[radial-gradient(circle_400px_at_50%_300px,#3b82f625,transparent)]" />
</div>

{/* Content */}
<div className='relative z-10 p-10'>
<div className='grid grid-cols-1 md:grid-cols-4 gap-10'>
<ChatView />
<div className='col-span-3'>
<div className='relative z-10 mobile-safe-padding py-4 sm:py-6 lg:py-10'>
<div className='grid grid-cols-1 lg:grid-cols-4 gap-4 sm:gap-6 lg:gap-10'>
<div className="lg:col-span-1 order-2 lg:order-1">
<ChatView />
</div>
<div className='lg:col-span-3 order-1 lg:order-2'>
<CodeView />
</div>
</div>
Expand Down
33 changes: 33 additions & 0 deletions app/globals.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,3 +70,36 @@ body {
@apply bg-background text-foreground;
}
}

@layer utilities {
/* Mobile-first responsive utilities */
.mobile-safe-padding {
@apply px-4 sm:px-6 lg:px-8;
}

.mobile-safe-text {
@apply text-sm sm:text-base lg:text-lg;
}

.mobile-touch-target {
@apply min-h-[44px] min-w-[44px] sm:min-h-[48px] sm:min-w-[48px];
}

.mobile-responsive-grid {
@apply grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3 sm:gap-4 lg:gap-6;
}

.mobile-scrollable {
@apply overflow-x-auto scrollbar-hide;
}

/* Prevent horizontal scrolling on mobile */
.mobile-container {
@apply max-w-full overflow-x-hidden;
}

/* Better mobile form inputs */
.mobile-input {
@apply text-base sm:text-sm; /* Prevents zoom on iOS */
}
}
5 changes: 3 additions & 2 deletions app/layout.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,9 @@ import ConvexClientProvider from "./ConvexClientProvider";


export const metadata = {
title: "Create Next App",
description: "Generated by create next app",
title: "AI Powered Website Builder",
description: "Transform your wildest ideas into production-ready code with AI-powered assistance",
viewport: "width=device-width, initial-scale=1, maximum-scale=1",
};

export default function RootLayout({ children }) {
Expand Down
42 changes: 22 additions & 20 deletions components/custom/ChatView.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,67 +67,69 @@ function ChatView() {
}

return (
<div className="relative h-[85vh] flex flex-col bg-gray-900">
<div className="relative h-[50vh] lg:h-[85vh] flex flex-col bg-gray-900 rounded-lg">
{/* Chat Messages */}
<div className="flex-1 overflow-y-auto scrollbar-hide p-4">
<div className="max-w-4xl mx-auto space-y-4">
<div className="flex-1 overflow-y-auto scrollbar-hide p-3 sm:p-4">
<div className="max-w-4xl mx-auto space-y-3 sm:space-y-4">
{Array.isArray(messages) && messages?.map((msg, index) => (
<div
key={index}
className={`p-4 rounded-lg ${
className={`p-3 sm:p-4 rounded-lg ${
msg.role === 'user'
? 'bg-gray-800/50 border border-gray-700'
: 'bg-gray-800/30 border border-gray-700'
}`}
>
<div className="flex items-start gap-3">
<div className={`p-2 rounded-lg ${
<div className="flex items-start gap-2 sm:gap-3">
<div className={`p-1.5 sm:p-2 rounded-lg flex-shrink-0 ${
msg.role === 'user'
? 'bg-blue-500/20 text-blue-400'
: 'bg-purple-500/20 text-purple-400'
}`}>
{msg.role === 'user' ? 'You' : 'AI'}
<span className="text-xs sm:text-sm font-medium">
{msg.role === 'user' ? 'You' : 'AI'}
</span>
</div>
<ReactMarkdown className="prose prose-invert flex-1 overflow-auto">
<ReactMarkdown className="prose prose-invert prose-sm sm:prose flex-1 overflow-auto text-sm sm:text-base">
{msg.content}
</ReactMarkdown>
</div>
</div>
))}

{loading && (
<div className="p-4 rounded-lg bg-gray-800/30 border border-gray-700">
<div className="flex items-center gap-3 text-gray-400">
<Loader2Icon className="animate-spin h-5 w-5" />
<p className="font-medium">Generating response...</p>
<div className="p-3 sm:p-4 rounded-lg bg-gray-800/30 border border-gray-700">
<div className="flex items-center gap-2 sm:gap-3 text-gray-400">
<Loader2Icon className="animate-spin h-4 w-4 sm:h-5 sm:w-5" />
<p className="font-medium text-sm sm:text-base">Generating response...</p>
</div>
</div>
)}
</div>
</div>

{/* Input Section */}
<div className="border-t border-gray-800 bg-gray-900/50 backdrop-blur-sm p-4">
<div className="border-t border-gray-800 bg-gray-900/50 backdrop-blur-sm p-3 sm:p-4">
<div className="max-w-4xl mx-auto">
<div className="bg-gray-800/50 border border-gray-700 rounded-xl p-4">
<div className="flex gap-3">
<div className="bg-gray-800/50 border border-gray-700 rounded-xl p-3 sm:p-4">
<div className="flex flex-col sm:flex-row gap-2 sm:gap-3">
<textarea
placeholder="Type your message here..."
value={userInput}
onChange={(event) => setUserInput(event.target.value)}
className="w-full bg-gray-900/50 border border-gray-700 rounded-xl p-4 text-white placeholder-gray-400 focus:ring-2 focus:ring-blue-500 focus:border-transparent outline-none transition-all duration-200 resize-none h-32"
className="w-full bg-gray-900/50 border border-gray-700 rounded-xl p-3 sm:p-4 text-white placeholder-gray-400 focus:ring-2 focus:ring-blue-500 focus:border-transparent outline-none transition-all duration-200 resize-none h-20 sm:h-24 lg:h-32 mobile-input"
/>
{userInput && (
<button
onClick={() => onGenerate(userInput)}
className="flex items-center justify-center bg-gradient-to-r from-blue-500 to-purple-500 hover:from-blue-600 hover:to-purple-600 rounded-xl px-4 transition-all duration-200"
className="flex items-center justify-center bg-gradient-to-r from-blue-500 to-purple-500 hover:from-blue-600 hover:to-purple-600 rounded-xl px-4 py-3 sm:px-4 sm:py-4 transition-all duration-200 self-end sm:self-auto mobile-touch-target"
>
<Send className="h-6 w-6 text-white" />
<Send className="h-5 w-5 sm:h-6 sm:w-6 text-white" />
</button>
)}
</div>
<div className="flex justify-end mt-3">
<Link className="h-5 w-5 text-gray-400 hover:text-gray-300 transition-colors duration-200" />
<div className="flex justify-end mt-2 sm:mt-3">
<Link className="h-4 w-4 sm:h-5 sm:w-5 text-gray-400 hover:text-gray-300 transition-colors duration-200" />
</div>
</div>
</div>
Expand Down
27 changes: 14 additions & 13 deletions components/custom/CodeView.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -151,28 +151,29 @@ function CodeView() {

return (
<div className='relative'>
<div className='bg-[#181818] w-full p-2 border'>
<div className='flex items-center justify-between'>
<div className='bg-[#181818] w-full p-2 sm:p-3 border rounded-t-lg'>
<div className='flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3 sm:gap-0'>
<div className='flex items-center flex-wrap shrink-0 bg-black p-1 justify-center
w-[140px] gap-3 rounded-full'>
w-full sm:w-[140px] gap-2 sm:gap-3 rounded-full'>
<h2 onClick={() => setActiveTab('code')}
className={`text-sm cursor-pointer
${activeTab == 'code' && 'text-blue-500 bg-blue-500 bg-opacity-25 p-1 px-2 rounded-full'}`}>
className={`text-xs sm:text-sm cursor-pointer px-2 py-1 rounded-full transition-all
${activeTab == 'code' ? 'text-blue-500 bg-blue-500 bg-opacity-25' : 'hover:bg-gray-700'}`}>
Code</h2>

<h2 onClick={() => setActiveTab('preview')}
className={`text-sm cursor-pointer
${activeTab == 'preview' && 'text-blue-500 bg-blue-500 bg-opacity-25 p-1 px-2 rounded-full'}`}>
className={`text-xs sm:text-sm cursor-pointer px-2 py-1 rounded-full transition-all
${activeTab == 'preview' ? 'text-blue-500 bg-blue-500 bg-opacity-25' : 'hover:bg-gray-700'}`}>
Preview</h2>
</div>

{/* Download Button */}
<button
onClick={downloadFiles}
className="flex items-center gap-2 bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-full transition-colors duration-200"
className="flex items-center gap-1 sm:gap-2 bg-blue-500 hover:bg-blue-600 text-white px-3 sm:px-4 py-2 rounded-full transition-colors duration-200 text-xs sm:text-sm mobile-touch-target"
>
<Download className="h-4 w-4" />
<span>Download Files</span>
<Download className="h-3 w-3 sm:h-4 sm:w-4" />
<span className="hidden sm:inline">Download Files</span>
<span className="sm:hidden">Download</span>
</button>
</div>
</div>
Expand All @@ -196,17 +197,17 @@ function CodeView() {
<div className="relative">
<SandpackLayout>
{activeTab=='code'?<>
<SandpackFileExplorer style={{ height: '80vh' }} />
<SandpackFileExplorer style={{ height: '50vh', minHeight: '400px' }} />
<SandpackCodeEditor
style={{ height: '80vh' }}
style={{ height: '50vh', minHeight: '400px' }}
showTabs
showLineNumbers
showInlineErrors
wrapContent />
</>:
<>
<SandpackPreview
style={{ height: '80vh' }}
style={{ height: '50vh', minHeight: '400px' }}
showNavigator={true}
showOpenInCodeSandbox={false}
showRefreshButton={true}
Expand Down
22 changes: 12 additions & 10 deletions components/custom/Header.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,23 +4,25 @@ import { Code, Sparkles } from 'lucide-react';
function Header() {
return (
<header className="border-b border-gray-800 bg-gray-900/50 backdrop-blur-sm sticky top-0 z-50">
<div className="container mx-auto px-4">
<div className="flex items-center justify-between h-16">
<div className="container mx-auto px-4 sm:px-6 lg:px-8">
<div className="flex items-center justify-between h-14 sm:h-16">
{/* Logo and Title */}
<div className="flex items-center space-x-3">
<div className="bg-gradient-to-r from-blue-500 to-purple-500 p-2 rounded-lg">
<Code className="h-5 w-5 text-white" />
<div className="flex items-center space-x-2 sm:space-x-3">
<div className="bg-gradient-to-r from-blue-500 to-purple-500 p-1.5 sm:p-2 rounded-lg">
<Code className="h-4 w-4 sm:h-5 sm:w-5 text-white" />
</div>
<h1 className="text-xl font-bold text-white">
AI Powered Website Builder
<h1 className="text-sm sm:text-lg lg:text-xl font-bold text-white leading-tight">
<span className="hidden sm:inline">AI Powered Website Builder</span>
<span className="sm:hidden">AI Builder</span>
</h1>
</div>

{/* Status Badge */}
<div className="flex items-center">
<div className="flex items-center space-x-2 bg-green-500/10 text-green-400 px-3 py-1.5 rounded-full text-sm font-medium">
<Sparkles className="h-4 w-4" />
<span>AI Ready</span>
<div className="flex items-center space-x-1 sm:space-x-2 bg-green-500/10 text-green-400 px-2 sm:px-3 py-1 sm:py-1.5 rounded-full text-xs sm:text-sm font-medium">
<Sparkles className="h-3 w-3 sm:h-4 sm:w-4" />
<span className="hidden sm:inline">AI Ready</span>
<span className="sm:hidden">Ready</span>
</div>
</div>
</div>
Expand Down
Loading