Skip to content

Commit 555c358

Browse files
GeneralJerelGeneralJerel
committed
feat: make app mobile responsive
- Header banner: smaller padding, text, and buttons on mobile; hide subtitle and "Demos" label on narrow screens - Demo gallery: full-screen bottom sheet on mobile, side drawer on sm+ - Brand shell: tighter padding and smaller border-radius on small screens - Add viewport meta tag for proper mobile scaling
1 parent 341411d commit 555c358

File tree

4 files changed

+53
-24
lines changed

4 files changed

+53
-24
lines changed

‎apps/app/src/app/globals.css‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -308,6 +308,12 @@ body, html {
308308

309309
@media (max-width: 768px) {
310310
.brand-shell { padding: 8px; }
311+
.brand-glass-container { border-radius: var(--radius-lg); }
312+
}
313+
314+
@media (max-width: 480px) {
315+
.brand-shell { padding: 4px; }
316+
.brand-glass-container { border-radius: var(--radius-md); }
311317
}
312318

313319
/* === Gradient Utilities === */
@@ -602,6 +608,35 @@ body, html {
602608
flex-shrink: 0;
603609
}
604610

611+
/* === Demo Gallery Drawer === */
612+
/* Mobile: full-screen, slides up from bottom */
613+
.demo-gallery-drawer {
614+
inset: 0;
615+
border-radius: 0;
616+
transform: translateY(100%);
617+
}
618+
.demo-gallery-drawer--open {
619+
transform: translateY(0);
620+
}
621+
622+
/* Desktop (sm+): right side panel, slides in from right */
623+
@media (min-width: 640px) {
624+
.demo-gallery-drawer {
625+
inset: auto;
626+
top: 0;
627+
right: 0;
628+
height: 100%;
629+
width: 480px;
630+
max-width: 90vw;
631+
border-left: 1px solid var(--color-border-glass, rgba(0,0,0,0.1));
632+
transform: translateX(100%);
633+
}
634+
.demo-gallery-drawer--open {
635+
transform: translateX(0);
636+
box-shadow: -8px 0 30px rgba(0,0,0,0.1);
637+
}
638+
}
639+
605640
/* === Flash Animation === */
606641
.content-flash {
607642
animation: content-flash 700ms ease-out;

‎apps/app/src/app/layout.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ export default function RootLayout({children}: Readonly<{ children: React.ReactN
1010
return (
1111
<html lang="en">
1212
<head>
13+
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
1314
<title>Open Generative UI</title>
1415
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🪁</text></svg>" />
1516
<link rel="preconnect" href="https://fonts.googleapis.com" />

‎apps/app/src/app/page.tsx‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -51,25 +51,25 @@ export default function HomePage() {
5151
background: "linear-gradient(135deg, rgba(190,194,255,0.08) 0%, rgba(133,224,206,0.06) 100%)",
5252
}}
5353
>
54-
<div className="flex items-center justify-between gap-4 px-5 py-3">
55-
<div className="flex items-center gap-3 min-w-0 flex-1">
54+
<div className="flex items-center justify-between gap-2 sm:gap-4 px-3 sm:px-5 py-2.5 sm:py-3">
55+
<div className="flex items-center gap-2 sm:gap-3 min-w-0 flex-1">
5656
<div
57-
className="flex items-center justify-center shrink-0 w-9 h-9 rounded-lg"
57+
className="flex items-center justify-center shrink-0 w-8 h-8 sm:w-9 sm:h-9 rounded-lg"
5858
style={{
5959
background: "linear-gradient(135deg, rgba(190,194,255,0.15), rgba(133,224,206,0.12))",
6060
}}
6161
>
62-
<span className="text-xl leading-none" role="img" aria-label="CopilotKit">🪁</span>
62+
<span className="text-lg sm:text-xl leading-none" role="img" aria-label="CopilotKit">🪁</span>
6363
</div>
64-
<p className="text-base font-semibold m-0 leading-snug" style={{ color: "var(--text-primary)" }}>
64+
<p className="text-sm sm:text-base font-semibold m-0 leading-snug" style={{ color: "var(--text-primary)" }}>
6565
Open Generative UI
66-
<span className="font-normal" style={{ color: "var(--text-secondary)" }}> — powered by CopilotKit</span>
66+
<span className="hidden sm:inline font-normal" style={{ color: "var(--text-secondary)" }}> — powered by CopilotKit</span>
6767
</p>
6868
</div>
69-
<div className="flex items-center gap-2">
69+
<div className="flex items-center gap-1.5 sm:gap-2">
7070
<button
7171
onClick={() => setDemoDrawerOpen(true)}
72-
className="inline-flex items-center gap-1.5 px-3 py-2 rounded-full text-sm font-medium no-underline whitespace-nowrap transition-all duration-150 hover:-translate-y-px cursor-pointer"
72+
className="inline-flex items-center gap-1.5 px-2.5 sm:px-3 py-1.5 sm:py-2 rounded-full text-xs sm:text-sm font-medium no-underline whitespace-nowrap transition-all duration-150 hover:-translate-y-px cursor-pointer"
7373
style={{
7474
color: "var(--text-secondary)",
7575
border: "1px solid var(--color-border-glass, rgba(0,0,0,0.1))",
@@ -79,13 +79,13 @@ export default function HomePage() {
7979
title="Open Demo Gallery"
8080
>
8181
<GridIcon size={15} />
82-
Demos
82+
<span className="hidden sm:inline">Demos</span>
8383
</button>
8484
<a
8585
href="https://github.com/CopilotKit/OpenGenerativeUI"
8686
target="_blank"
8787
rel="noopener noreferrer"
88-
className="inline-flex items-center px-5 py-2 rounded-full text-sm font-semibold text-white no-underline whitespace-nowrap transition-all duration-150 hover:-translate-y-px"
88+
className="inline-flex items-center px-3 sm:px-5 py-1.5 sm:py-2 rounded-full text-xs sm:text-sm font-semibold text-white no-underline whitespace-nowrap transition-all duration-150 hover:-translate-y-px"
8989
style={{
9090
background: "linear-gradient(135deg, var(--color-lilac-dark), var(--color-mint-dark))",
9191
boxShadow: "0 1px 4px rgba(149,153,204,0.3)",

‎apps/app/src/components/demo-gallery/index.tsx‎

Lines changed: 7 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -42,21 +42,14 @@ export function DemoGallery({ open, onClose, onTryDemo }: DemoGalleryProps) {
4242
/>
4343
)}
4444

45-
{/* Drawer panel */}
45+
{/* Drawer: full-screen bottom sheet on mobile, right side panel on sm+ */}
4646
<div
47-
className="fixed top-0 right-0 h-full z-50 flex flex-col transition-transform duration-300 ease-in-out"
48-
style={{
49-
width: 480,
50-
maxWidth: "90vw",
51-
transform: open ? "translateX(0)" : "translateX(100%)",
52-
background: "var(--surface-primary, #fff)",
53-
borderLeft: "1px solid var(--color-border-glass, rgba(0,0,0,0.1))",
54-
boxShadow: open ? "-8px 0 30px rgba(0,0,0,0.1)" : "none",
55-
}}
47+
className={`demo-gallery-drawer fixed z-50 flex flex-col transition-transform duration-300 ease-in-out ${open ? "demo-gallery-drawer--open" : ""}`}
48+
style={{ background: "var(--surface-primary, #fff)" }}
5649
>
5750
{/* Header */}
5851
<div
59-
className="flex items-center justify-between px-5 py-4 shrink-0"
52+
className="flex items-center justify-between px-4 sm:px-5 py-3 sm:py-4 shrink-0"
6053
style={{
6154
borderBottom:
6255
"1px solid var(--color-border-glass, rgba(0,0,0,0.1))",
@@ -82,7 +75,7 @@ export function DemoGallery({ open, onClose, onTryDemo }: DemoGalleryProps) {
8275
</div>
8376
<button
8477
onClick={onClose}
85-
className="p-1.5 rounded-lg transition-colors duration-150 cursor-pointer"
78+
className="p-2 -mr-1 rounded-lg transition-colors duration-150 cursor-pointer"
8679
style={{ color: "var(--text-secondary, #666)" }}
8780
>
8881
<svg
@@ -102,15 +95,15 @@ export function DemoGallery({ open, onClose, onTryDemo }: DemoGalleryProps) {
10295
</div>
10396

10497
{/* Category filter */}
105-
<div className="px-5 pt-4 pb-2 shrink-0">
98+
<div className="px-4 sm:px-5 pt-3 sm:pt-4 pb-2 shrink-0">
10699
<CategoryFilter
107100
selected={selectedCategory}
108101
onSelect={setSelectedCategory}
109102
/>
110103
</div>
111104

112105
{/* Card list */}
113-
<div className="flex-1 overflow-y-auto px-5 pb-5">
106+
<div className="flex-1 overflow-y-auto px-4 sm:px-5 pb-5 overscroll-contain">
114107
<div className="flex flex-col gap-3 pt-2">
115108
{filtered.map((demo) => (
116109
<DemoCard key={demo.id} demo={demo} onTry={onTryDemo} />

0 commit comments

Comments
 (0)