Skip to content

fix mobile responsive layout for iOS and small screens #12

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

Merged
prabhatexit0 merged 2 commits into from
Mar 5, 2026
Merged

fix mobile responsive layout for iOS and small screens #12

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
9895b3d
fix mobile responsive layout for iOS and small screens
claude Mar 4, 2026
f9ad13e
format toolbar.tsx with prettier
claude Mar 5, 2026
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
2 changes: 1 addition & 1 deletion ui/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover"
/>
<title>vizpix</title>
</head>
Expand Down
2 changes: 1 addition & 1 deletion ui/src/components/layout/editor-layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import { TooltipProvider } from '@/components/ui/tooltip'
export function EditorLayout() {
return (
<TooltipProvider delayDuration={300}>
<div className="flex h-screen w-screen overflow-hidden bg-neutral-950 text-white">
<div className="flex h-dvh w-screen overflow-hidden bg-neutral-950 text-white">
<Toolbar />
<EditorCanvas />
<RightPanel />
Expand Down
4 changes: 2 additions & 2 deletions ui/src/components/layout/right-panel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -108,8 +108,8 @@ export function RightPanel() {
return (
<Drawer open={drawerOpen} onOpenChange={setDrawerOpen}>
<DrawerTrigger asChild>
<button className="absolute top-4 right-4 z-50 rounded-lg border border-white/10 bg-neutral-900/90 p-2 text-neutral-400 backdrop-blur-md hover:text-white">
<PanelRight size={18} />
<button className="absolute top-4 right-4 z-50 rounded-lg border border-white/10 bg-neutral-900/90 p-2.5 text-neutral-400 backdrop-blur-md hover:text-white">
<PanelRight size={20} />
</button>
</DrawerTrigger>
<DrawerContent className="max-h-[70vh]">
Expand Down
48 changes: 31 additions & 17 deletions ui/src/components/layout/toolbar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -121,13 +121,13 @@ export function Toolbar() {
<button
onClick={() => setActiveTool(mode)}
className={cn(
'flex items-center justify-center rounded-md p-2 transition-colors',
'flex shrink-0 items-center justify-center rounded-md p-2 transition-colors',
activeTool === mode
? 'bg-blue-500/20 text-blue-400'
: 'text-neutral-400 hover:bg-white/10 hover:text-white',
)}
>
<Icon size={18} />
<Icon size={isMobile ? 20 : 18} />
</button>
</TooltipTrigger>
<TooltipContent side={isMobile ? 'top' : 'right'}>
Expand All @@ -136,13 +136,15 @@ export function Toolbar() {
</Tooltip>
))}

<div className={cn(isMobile ? 'h-5 w-px bg-white/15' : 'mx-1 h-px w-full bg-white/15')} />
<div
className={cn(isMobile ? 'h-5 w-px shrink-0 bg-white/15' : 'mx-1 h-px w-full bg-white/15')}
/>

<Tooltip>
<TooltipTrigger asChild>
<button
onClick={handleAddImage}
className="flex items-center justify-center rounded-md p-2 text-neutral-400 transition-colors hover:bg-white/10 hover:text-white"
className="flex shrink-0 items-center justify-center rounded-md p-2 text-neutral-400 transition-colors hover:bg-white/10 hover:text-white"
>
<ImagePlus size={18} />
</button>
Expand All @@ -155,7 +157,7 @@ export function Toolbar() {
<button
onClick={() => setActiveTool('draw-rectangle')}
className={cn(
'flex items-center justify-center rounded-md p-2 transition-colors',
'flex shrink-0 items-center justify-center rounded-md p-2 transition-colors',
activeTool === 'draw-rectangle'
? 'bg-blue-500/20 text-blue-400'
: 'text-neutral-400 hover:bg-white/10 hover:text-white',
Expand All @@ -172,7 +174,7 @@ export function Toolbar() {
<button
onClick={() => setActiveTool('draw-ellipse')}
className={cn(
'flex items-center justify-center rounded-md p-2 transition-colors',
'flex shrink-0 items-center justify-center rounded-md p-2 transition-colors',
activeTool === 'draw-ellipse'
? 'bg-blue-500/20 text-blue-400'
: 'text-neutral-400 hover:bg-white/10 hover:text-white',
Expand All @@ -189,7 +191,7 @@ export function Toolbar() {
<button
onClick={() => setActiveTool('draw-text')}
className={cn(
'flex items-center justify-center rounded-md p-2 transition-colors',
'flex shrink-0 items-center justify-center rounded-md p-2 transition-colors',
activeTool === 'draw-text'
? 'bg-blue-500/20 text-blue-400'
: 'text-neutral-400 hover:bg-white/10 hover:text-white',
Expand All @@ -201,13 +203,15 @@ export function Toolbar() {
<TooltipContent side={isMobile ? 'top' : 'right'}>Text (T)</TooltipContent>
</Tooltip>

<div className={cn(isMobile ? 'h-5 w-px bg-white/15' : 'mx-1 h-px w-full bg-white/15')} />
<div
className={cn(isMobile ? 'h-5 w-px shrink-0 bg-white/15' : 'mx-1 h-px w-full bg-white/15')}
/>

<Tooltip>
<TooltipTrigger asChild>
<button
onClick={handleSave}
className="flex items-center justify-center rounded-md p-2 text-neutral-400 transition-colors hover:bg-white/10 hover:text-white"
className="flex shrink-0 items-center justify-center rounded-md p-2 text-neutral-400 transition-colors hover:bg-white/10 hover:text-white"
>
<Save size={18} />
</button>
Expand All @@ -219,22 +223,24 @@ export function Toolbar() {
<TooltipTrigger asChild>
<button
onClick={handleOpen}
className="flex items-center justify-center rounded-md p-2 text-neutral-400 transition-colors hover:bg-white/10 hover:text-white"
className="flex shrink-0 items-center justify-center rounded-md p-2 text-neutral-400 transition-colors hover:bg-white/10 hover:text-white"
>
<FolderOpen size={18} />
</button>
</TooltipTrigger>
<TooltipContent side={isMobile ? 'top' : 'right'}>Open Project</TooltipContent>
</Tooltip>

<div className={cn(isMobile ? 'h-5 w-px bg-white/15' : 'mx-1 h-px w-full bg-white/15')} />
<div
className={cn(isMobile ? 'h-5 w-px shrink-0 bg-white/15' : 'mx-1 h-px w-full bg-white/15')}
/>

<Tooltip>
<TooltipTrigger asChild>
<button
onClick={() => undo()}
disabled={undoStack.length === 0}
className="flex items-center justify-center rounded-md p-2 text-neutral-400 transition-colors hover:bg-white/10 hover:text-white disabled:pointer-events-none disabled:opacity-25"
className="flex shrink-0 items-center justify-center rounded-md p-2 text-neutral-400 transition-colors hover:bg-white/10 hover:text-white disabled:pointer-events-none disabled:opacity-25"
>
<Undo2 size={18} />
</button>
Expand All @@ -247,21 +253,23 @@ export function Toolbar() {
<button
onClick={() => redo()}
disabled={redoStack.length === 0}
className="flex items-center justify-center rounded-md p-2 text-neutral-400 transition-colors hover:bg-white/10 hover:text-white disabled:pointer-events-none disabled:opacity-25"
className="flex shrink-0 items-center justify-center rounded-md p-2 text-neutral-400 transition-colors hover:bg-white/10 hover:text-white disabled:pointer-events-none disabled:opacity-25"
>
<Redo2 size={18} />
</button>
</TooltipTrigger>
<TooltipContent side={isMobile ? 'top' : 'right'}>Redo (Ctrl+Shift+Z)</TooltipContent>
</Tooltip>

<div className={cn(isMobile ? 'h-5 w-px bg-white/15' : 'mx-1 h-px w-full bg-white/15')} />
<div
className={cn(isMobile ? 'h-5 w-px shrink-0 bg-white/15' : 'mx-1 h-px w-full bg-white/15')}
/>

<Tooltip>
<TooltipTrigger asChild>
<button
onClick={() => setCanvasSizeOpen(true)}
className="flex items-center justify-center rounded-md p-2 text-neutral-400 transition-colors hover:bg-white/10 hover:text-white"
className="flex shrink-0 items-center justify-center rounded-md p-2 text-neutral-400 transition-colors hover:bg-white/10 hover:text-white"
>
<Frame size={18} />
</button>
Expand All @@ -273,7 +281,7 @@ export function Toolbar() {
<TooltipTrigger asChild>
<button
onClick={() => setExportOpen(true)}
className="flex items-center justify-center rounded-md p-2 text-neutral-400 transition-colors hover:bg-white/10 hover:text-white"
className="flex shrink-0 items-center justify-center rounded-md p-2 text-neutral-400 transition-colors hover:bg-white/10 hover:text-white"
>
<Download size={18} />
</button>
Expand Down Expand Up @@ -301,7 +309,13 @@ export function Toolbar() {
if (isMobile) {
return (
<>
<div className="absolute bottom-4 left-1/2 z-50 flex -translate-x-1/2 items-center gap-1 rounded-full border border-white/15 bg-neutral-900/90 px-2 py-1.5 backdrop-blur-md">
<div
className="scrollbar-none absolute right-4 bottom-4 left-4 z-50 flex items-center gap-1 overflow-x-auto rounded-full border border-white/15 bg-neutral-900/90 px-2 py-1.5 backdrop-blur-md"
style={{
paddingBottom: 'calc(0.375rem + env(safe-area-inset-bottom, 0px))',
marginBottom: 'env(safe-area-inset-bottom, 0px)',
}}
>
{buttons}
</div>
{dialogs}
Expand Down
5 changes: 5 additions & 0 deletions ui/src/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -122,6 +122,11 @@
@apply bg-background text-foreground;
overscroll-behavior: none;
-webkit-tap-highlight-color: transparent;
/* Prevent iOS pull-to-refresh and overscroll bouncing */
position: fixed;
width: 100%;
height: 100%;
overflow: hidden;
}
}

Expand Down