feat(ui): add responsive layout support for mobile and small screens

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-07 15:47:16 +08:00
parent dd659dcaa5
commit 768d1326b1
17 changed files with 664 additions and 216 deletions
--- a/src/app/folder/layout.tsx
+++ b/src/app/folder/layout.tsx
@@ -51,6 +51,8 @@ import {
 import type { AgentType } from "@/lib/types"
 import { cn } from "@/lib/utils"
 import { useFolderContext } from "@/contexts/folder-context"
+import { useIsMobile } from "@/hooks/use-mobile"
+import { Sheet, SheetContent, SheetTitle } from "@/components/ui/sheet"

 function FolderDocumentTitle() {
  const { folder } = useFolderContext()
@@ -246,6 +248,90 @@ function WorkspaceContent({ children }: { children: React.ReactNode }) {
  )
 }

+function MobileWorkspaceContent({ children }: { children: React.ReactNode }) {
+  const { mode } = useWorkspaceContext()
+
+  // On mobile, fusion mode falls back to conversation view
+  const showConversation = mode === "conversation" || mode === "fusion"
+
+  return (
+    <div className="relative h-full min-h-0 overflow-hidden">
+      {showConversation ? (
+        <section className="flex h-full min-h-0 flex-col overflow-hidden">
+          <TabBar />
+          <div className="relative flex-1 min-h-0 overflow-hidden">
+            {children}
+          </div>
+        </section>
+      ) : (
+        <section className="flex h-full min-h-0 flex-col overflow-hidden">
+          <FileWorkspaceTabBar />
+          <div className="flex-1 min-h-0 overflow-hidden">
+            <FileWorkspacePanel />
+          </div>
+        </section>
+      )}
+    </div>
+  )
+}
+
+function MobileFolderWorkspaceShell({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  const { isOpen: sidebarOpen, toggle: toggleSidebar } = useSidebarContext()
+  const { isOpen: auxOpen, toggle: toggleAux } = useAuxPanelContext()
+  const { isOpen: terminalOpen, toggle: toggleTerminal } = useTerminalContext()
+
+  return (
+    <div className="flex flex-1 min-h-0 overflow-hidden">
+      {/* Sidebar Sheet (left) */}
+      <Sheet open={sidebarOpen} onOpenChange={toggleSidebar}>
+        <SheetContent
+          side="left"
+          showCloseButton={false}
+          className="w-[85%] max-w-[360px] p-0"
+        >
+          <SheetTitle className="sr-only">Sidebar</SheetTitle>
+          <Sidebar />
+        </SheetContent>
+      </Sheet>
+
+      {/* Main workspace */}
+      <main className="flex h-full min-h-0 w-full flex-col overflow-hidden">
+        <MobileWorkspaceContent>{children}</MobileWorkspaceContent>
+      </main>
+
+      {/* Aux panel Sheet (right) */}
+      <Sheet open={auxOpen} onOpenChange={toggleAux}>
+        <SheetContent
+          side="right"
+          showCloseButton={false}
+          className="w-[85%] max-w-[360px] p-0"
+        >
+          <SheetTitle className="sr-only">Panel</SheetTitle>
+          <AuxPanel />
+        </SheetContent>
+      </Sheet>
+
+      {/* Terminal Sheet (bottom) */}
+      <Sheet open={terminalOpen} onOpenChange={toggleTerminal}>
+        <SheetContent
+          side="bottom"
+          showCloseButton={false}
+          className="!h-[70vh] p-0"
+        >
+          <SheetTitle className="sr-only">Terminal</SheetTitle>
+          <div className="h-full min-h-0 overflow-hidden">
+            <TerminalPanel />
+          </div>
+        </SheetContent>
+      </Sheet>
+    </div>
+  )
+}
+
 function FolderWorkspaceShell({ children }: { children: React.ReactNode }) {
  const {
    isOpen: sidebarOpen,
@@ -661,6 +747,27 @@ function FolderWorkspaceShell({ children }: { children: React.ReactNode }) {
  )
 }

+function FolderLayoutShell({ children }: { children: React.ReactNode }) {
+  const isMobile = useIsMobile()
+
+  return (
+    <div className="flex h-screen flex-col overflow-hidden">
+      <FolderTitleBar />
+      {isMobile ? (
+        <MobileFolderWorkspaceShell>{children}</MobileFolderWorkspaceShell>
+      ) : (
+        <FolderWorkspaceShell>{children}</FolderWorkspaceShell>
+      )}
+      <StatusBar />
+      <AppToaster
+        position="bottom-right"
+        duration={TOAST_DURATION_MS}
+        closeButton
+      />
+    </div>
+  )
+}
+
 function FolderLayoutInner({ children }: { children: React.ReactNode }) {
  const searchParams = useSearchParams()
  const folderId = Number(searchParams.get("id") ?? "0")
@@ -693,18 +800,7 @@ function FolderLayoutInner({ children }: { children: React.ReactNode }) {
                          folderId={normalizedFolderId}
                        >
                          <TerminalProvider>
-                            <div className="flex h-screen flex-col overflow-hidden">
-                              <FolderTitleBar />
-                              <FolderWorkspaceShell>
-                                {children}
-                              </FolderWorkspaceShell>
-                              <StatusBar />
-                              <AppToaster
-                                position="bottom-right"
-                                duration={TOAST_DURATION_MS}
-                                closeButton
-                              />
-                            </div>
+                            <FolderLayoutShell>{children}</FolderLayoutShell>
                          </TerminalProvider>
                        </AuxPanelProvider>
                      </SidebarProvider>
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -167,6 +167,10 @@
  }
  body {
    @apply bg-background text-foreground;
+    padding-top: env(safe-area-inset-top);
+    padding-bottom: env(safe-area-inset-bottom);
+    padding-left: env(safe-area-inset-left);
+    padding-right: env(safe-area-inset-right);
  }
 }

--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,4 +1,4 @@
-import type { Metadata } from "next"
+import type { Metadata, Viewport } from "next"
 import "./globals.css"
 import { JetBrains_Mono } from "next/font/google"
 import { NextIntlClientProvider } from "next-intl"
@@ -13,6 +13,12 @@ const jetbrainsMono = JetBrains_Mono({
  variable: "--font-sans",
 })

+export const viewport: Viewport = {
+  width: "device-width",
+  initialScale: 1,
+  viewportFit: "cover",
+}
+
 export const metadata: Metadata = {
  title: "codeg",
  description: "AI Coding Agent Conversation Manager",
--- a/src/app/login/page.tsx
+++ b/src/app/login/page.tsx
@@ -69,7 +69,7 @@ export default function LoginPage() {
              onChange={(e) => setToken(e.target.value)}
              placeholder="Access Token"
              autoFocus
-              className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+              className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-base md:text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
            />
          </div>

--- a/src/components/chat/message-input.tsx
+++ b/src/components/chat/message-input.tsx
@@ -1493,7 +1493,7 @@ export function MessageInput({
          onPaste={handlePaste}
          onFocus={onFocus}
          placeholder={resolvedPlaceholder}
-          className="min-h-0 flex-1 overflow-y-auto rounded-none border-0 bg-transparent text-sm shadow-none focus-visible:border-0 focus-visible:ring-0"
+          className="min-h-0 flex-1 overflow-y-auto rounded-none border-0 bg-transparent text-base md:text-sm shadow-none focus-visible:border-0 focus-visible:ring-0"
          autoFocus={autoFocus}
        />
        <div className="@container flex shrink-0 items-end justify-between gap-2 px-2 pb-2">
--- a/src/components/layout/app-title-bar.tsx
+++ b/src/components/layout/app-title-bar.tsx
@@ -2,6 +2,7 @@

 import type { ReactNode } from "react"
 import { usePlatform } from "@/hooks/use-platform"
+import { useIsMobile } from "@/hooks/use-mobile"
 import { cn } from "@/lib/utils"
 import { WindowControls } from "./window-controls"

@@ -25,6 +26,7 @@ export function AppTitleBar({
  showWindowControls = true,
 }: AppTitleBarProps) {
  const { isMac, isWindows } = usePlatform()
+  const isMobile = useIsMobile()
  const isDesktopRuntime =
    typeof window !== "undefined" && "__TAURI_INTERNALS__" in window
  const hasDesktopWindowChrome = showWindowControls && isDesktopRuntime
@@ -38,7 +40,8 @@ export function AppTitleBar({
  return (
    <div
      className={cn(
-        "relative h-8 shrink-0 border-b bg-muted/70 select-none",
+        "relative shrink-0 border-b bg-muted/70 select-none",
+        isMobile ? "h-11" : "h-8",
        className
      )}
    >
--- a/src/components/layout/folder-title-bar.tsx
+++ b/src/components/layout/folder-title-bar.tsx
@@ -9,7 +9,9 @@ import {
 } from "react"
 import {
  Columns2,
+  EllipsisVertical,
  FileCode2,
+  Menu,
  MessageSquare,
  PanelLeft,
  PanelRight,
@@ -40,6 +42,13 @@ import { CommandDropdown } from "./command-dropdown"
 import { SearchCommandDialog } from "@/components/conversations/search-command-dialog"
 import { DirectoryBrowserDialog } from "@/components/shared/directory-browser-dialog"
 import { cn } from "@/lib/utils"
+import { useIsMobile } from "@/hooks/use-mobile"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"

 const MODE_TABS = [
  {
@@ -196,6 +205,7 @@ export function FolderTitleBar() {
      setBranch(null)
    }
  }, [folderPath])
+  const isMobile = useIsMobile()
  const modeContainerRef = useRef<HTMLDivElement>(null)
  const modeItemRefs = useRef<Map<string, HTMLDivElement>>(new Map())
  const [modeIndicator, setModeIndicator] = useState<{
@@ -243,22 +253,7 @@ export function FolderTitleBar() {
    [setMode]
  )

-  return (
-    <>
-      <AppTitleBar
-        centerInteractive
-        left={
-          <div className="flex min-w-0 items-center gap-4">
-            <FolderNameDropdown />
-            <BranchDropdown
-              branch={branch}
-              parentBranch={folder?.parent_branch ?? null}
-              onBranchChange={refreshBranch}
-            />
-            <div data-tauri-drag-region className="h-8 flex-1" />
-          </div>
-        }
-        center={
+  const modeTabsElement = (
    <div
      ref={modeContainerRef}
      role="tablist"
@@ -308,6 +303,8 @@ export function FolderTitleBar() {
              className="block h-3 w-3 shrink-0"
              shapeRendering="geometricPrecision"
            />
+            {/* Hide text labels on mobile to save space */}
+            {!isMobile && (
              <span
                className={cn(
                  "grid transition-[grid-template-columns] duration-300",
@@ -323,12 +320,84 @@ export function FolderTitleBar() {
                  {title}
                </span>
              </span>
+            )}
          </div>
        )
      })}
    </div>
+  )
+
+  return (
+    <>
+      <AppTitleBar
+        centerInteractive
+        left={
+          isMobile ? (
+            <div className="flex min-w-0 items-center gap-2">
+              <Button
+                variant="ghost"
+                size="icon"
+                className="h-8 w-8 shrink-0"
+                onClick={toggle}
+              >
+                <Menu className="h-4 w-4" />
+              </Button>
+              <FolderNameDropdown />
+              <BranchDropdown
+                branch={branch}
+                parentBranch={folder?.parent_branch ?? null}
+                onBranchChange={refreshBranch}
+              />
+            </div>
+          ) : (
+            <div className="flex min-w-0 items-center gap-4">
+              <FolderNameDropdown />
+              <BranchDropdown
+                branch={branch}
+                parentBranch={folder?.parent_branch ?? null}
+                onBranchChange={refreshBranch}
+              />
+              <div data-tauri-drag-region className="h-8 flex-1" />
+            </div>
+          )
        }
+        center={isMobile ? undefined : modeTabsElement}
        right={
+          isMobile ? (
+            <div className="flex items-center gap-1">
+              <CommandDropdown />
+              <Button
+                variant="ghost"
+                size="icon"
+                className="h-8 w-8"
+                onClick={() => setSearchOpen(true)}
+                title={tTitleBar("search")}
+              >
+                <Search className="h-4 w-4" />
+              </Button>
+              <DropdownMenu>
+                <DropdownMenuTrigger asChild>
+                  <Button variant="ghost" size="icon" className="h-8 w-8">
+                    <EllipsisVertical className="h-4 w-4" />
+                  </Button>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent align="end">
+                  <DropdownMenuItem onClick={toggleAuxPanel}>
+                    <PanelRight className="h-3.5 w-3.5" />
+                    {tTitleBar("toggleAuxPanel")}
+                  </DropdownMenuItem>
+                  <DropdownMenuItem onClick={() => toggleTerminal()}>
+                    <SquareTerminal className="h-3.5 w-3.5" />
+                    {tTitleBar("toggleTerminal")}
+                  </DropdownMenuItem>
+                  <DropdownMenuItem onClick={handleOpenSettings}>
+                    <Settings className="h-3.5 w-3.5" />
+                    {tTitleBar("openSettings")}
+                  </DropdownMenuItem>
+                </DropdownMenuContent>
+              </DropdownMenu>
+            </div>
+          ) : (
            <div className="flex items-center gap-10">
              <div className="flex items-center gap-2">
                <CommandDropdown />
@@ -386,7 +455,10 @@ export function FolderTitleBar() {
                  onClick={() => setSearchOpen(true)}
                  title={tTitleBar("withShortcut", {
                    label: tTitleBar("search"),
-                  shortcut: formatShortcutLabel(shortcuts.toggle_search, isMac),
+                    shortcut: formatShortcutLabel(
+                      shortcuts.toggle_search,
+                      isMac
+                    ),
                  })}
                >
                  <Search className="h-3.5 w-3.5" />
@@ -398,13 +470,17 @@ export function FolderTitleBar() {
                  onClick={handleOpenSettings}
                  title={tTitleBar("withShortcut", {
                    label: tTitleBar("openSettings"),
-                  shortcut: formatShortcutLabel(shortcuts.open_settings, isMac),
+                    shortcut: formatShortcutLabel(
+                      shortcuts.open_settings,
+                      isMac
+                    ),
                  })}
                >
                  <Settings className="h-3.5 w-3.5" />
                </Button>
              </div>
            </div>
+          )
        }
      />
      <SearchCommandDialog open={searchOpen} onOpenChange={setSearchOpen} />
--- a/src/components/layout/sidebar.tsx
+++ b/src/components/layout/sidebar.tsx
@@ -11,12 +11,14 @@ import {
  type SidebarConversationListHandle,
 } from "@/components/conversations/sidebar-conversation-list"
 import { Button } from "@/components/ui/button"
+import { useIsMobile } from "@/hooks/use-mobile"

 export function Sidebar() {
  const t = useTranslations("Folder.sidebar")
  const { folder } = useFolderContext()
  const { openNewConversationTab } = useTabContext()
-  const { isOpen } = useSidebarContext()
+  const { isOpen, toggle } = useSidebarContext()
+  const isMobile = useIsMobile()
  const listRef = useRef<SidebarConversationListHandle>(null)

  const handleNewConversation = useCallback(() => {
@@ -70,7 +72,22 @@ export function Sidebar() {
        </div>
      </div>

+      {/* On mobile, clicking a conversation card auto-closes the Sheet */}
+      <div
+        className="flex-1 min-h-0 overflow-hidden"
+        onClick={
+          isMobile
+            ? (e) => {
+                const target = e.target as HTMLElement
+                if (target.closest("[data-conversation-id]")) {
+                  toggle()
+                }
+              }
+            : undefined
+        }
+      >
        <SidebarConversationList ref={listRef} />
+      </div>
    </aside>
  )
 }
--- a/src/components/layout/status-bar.tsx
+++ b/src/components/layout/status-bar.tsx
@@ -6,8 +6,23 @@ import { StatusBarTasks } from "@/components/layout/status-bar-tasks"
 import { StatusBarTokens } from "@/components/layout/status-bar-tokens"
 import { StatusBarConnection } from "@/components/layout/status-bar-connection"
 import { StatusBarAlerts } from "@/components/layout/status-bar-alerts"
+import { useIsMobile } from "@/hooks/use-mobile"

 export function StatusBar() {
+  const isMobile = useIsMobile()
+
+  if (isMobile) {
+    return (
+      <div className="h-7 shrink-0 border-t border-border bg-muted px-3 flex items-center justify-between text-xs text-muted-foreground">
+        <StatusBarConnection />
+        <div className="flex items-center gap-3">
+          <StatusBarTasks />
+          <StatusBarAlerts />
+        </div>
+      </div>
+    )
+  }
+
  return (
    <div className="h-8 shrink-0 border-t border-border bg-muted px-4 flex items-center justify-between text-xs text-muted-foreground">
      <div className="flex items-center">
--- a/src/components/settings/settings-shell.tsx
+++ b/src/components/settings/settings-shell.tsx
@@ -3,6 +3,7 @@
 import {
  useCallback,
  useEffect,
+  useState,
  type ComponentType,
  type ReactNode,
 } from "react"
@@ -12,6 +13,7 @@ import {
  GitBranch,
  Globe,
  Keyboard,
+  Menu,
  SendHorizontal,
  Palette,
  PlugZap,
@@ -26,6 +28,8 @@ import { AppToaster } from "@/components/ui/app-toaster"
 import { cn } from "@/lib/utils"
 import { detectEnvironment } from "@/lib/transport/detect"
 import { AppTitleBar } from "@/components/layout/app-title-bar"
+import { useIsMobile } from "@/hooks/use-mobile"
+import { Sheet, SheetContent, SheetTitle } from "@/components/ui/sheet"

 interface SettingsNavItem {
  href: string
@@ -118,6 +122,8 @@ export function SettingsShell({ children }: SettingsShellProps) {
  const pathname = usePathname()
  const router = useRouter()
  const normalizedPathname = normalizePath(pathname)
+  const isMobile = useIsMobile()
+  const [navOpen, setNavOpen] = useState(false)

  useEffect(() => {
    document.title = `${t("title")} - codeg`
@@ -129,41 +135,34 @@ export function SettingsShell({ children }: SettingsShellProps) {

      const target = normalizePath(href)
      const current = normalizePath(window.location.pathname)
-      if (current === target) return
+      if (current === target) {
+        setNavOpen(false)
+        return
+      }

      if (isWindowsRuntime()) {
-        // WebView2 on Windows: hard navigation is more reliable than client routing.
        window.location.assign(target)
        return
      }

-      // macOS/Linux: keep client-side routing for snappier transitions.
      router.push(target)
+      setNavOpen(false)
    },
-    [router]
+    [router, setNavOpen]
  )

-  return (
-    <div className="h-screen flex flex-col overflow-hidden bg-background text-foreground">
-      <AppTitleBar
-        center={
-          <div className="text-sm font-bold tracking-tight">{t("title")}</div>
-        }
-      />
+  const filteredNavItems = SETTINGS_NAV_ITEMS.filter(
+    (item) =>
+      !(item.labelKey === "web_service" && detectEnvironment() === "web")
+  )

-      <div className="flex-1 min-h-0 flex">
-        <aside className="w-56 shrink-0 border-r p-3">
+  const navContent = (
+    <>
      <div className="px-1 pb-2 text-[11px] font-medium text-muted-foreground">
        {t("preferences")}
      </div>
      <nav className="space-y-1">
-            {SETTINGS_NAV_ITEMS.filter(
-              (item) =>
-                !(
-                  item.labelKey === "web_service" &&
-                  detectEnvironment() === "web"
-                )
-            ).map((item) => {
+        {filteredNavItems.map((item) => {
          const Icon = item.icon
          const translationKey = `nav.${item.labelKey}` as const
          const active =
@@ -187,9 +186,57 @@ export function SettingsShell({ children }: SettingsShellProps) {
          )
        })}
      </nav>
-        </aside>
+    </>
+  )

-        <section className="flex-1 min-w-0 min-h-0 p-4">{children}</section>
+  return (
+    <div className="h-screen flex flex-col overflow-hidden bg-background text-foreground">
+      <AppTitleBar
+        left={
+          isMobile ? (
+            <Button
+              variant="ghost"
+              size="icon"
+              className="h-8 w-8"
+              onClick={() => setNavOpen(true)}
+            >
+              <Menu className="h-4 w-4" />
+            </Button>
+          ) : undefined
+        }
+        center={
+          <div className="text-sm font-bold tracking-tight">{t("title")}</div>
+        }
+      />
+
+      <div className="flex-1 min-h-0 flex">
+        {/* Desktop sidebar */}
+        {!isMobile && (
+          <aside className="w-56 shrink-0 border-r p-3">{navContent}</aside>
+        )}
+
+        {/* Mobile navigation Sheet */}
+        {isMobile && (
+          <Sheet open={navOpen} onOpenChange={setNavOpen}>
+            <SheetContent
+              side="left"
+              showCloseButton={false}
+              className="w-[260px] p-3"
+            >
+              <SheetTitle className="sr-only">{t("title")}</SheetTitle>
+              {navContent}
+            </SheetContent>
+          </Sheet>
+        )}
+
+        <section
+          className={cn(
+            "flex-1 min-w-0 min-h-0 overflow-auto",
+            isMobile ? "p-3" : "p-4"
+          )}
+        >
+          {children}
+        </section>
      </div>
      <AppToaster position="bottom-right" closeButton duration={4000} />
    </div>
--- a/src/components/ui/button.tsx
+++ b/src/components/ui/button.tsx
@@ -5,7 +5,7 @@ import { Slot } from "radix-ui"
 import { cn } from "@/lib/utils"

 const buttonVariants = cva(
-  "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-4xl border border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-[3px] aria-invalid:ring-[3px] [&_svg:not([class*='size-'])]:size-4 inline-flex items-center justify-center whitespace-nowrap transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none shrink-0 [&_svg]:shrink-0 outline-none group/button select-none",
+  "group/button inline-flex shrink-0 items-center justify-center rounded-4xl border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
  {
    variants: {
      variant: {
@@ -15,9 +15,9 @@ const buttonVariants = cva(
        secondary:
          "bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
        ghost:
-          "hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 aria-expanded:bg-muted aria-expanded:text-foreground",
+          "hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50",
        destructive:
-          "bg-destructive/10 hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/20 text-destructive focus-visible:border-destructive/40 dark:hover:bg-destructive/30",
+          "bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40",
        link: "text-primary underline-offset-4 hover:underline",
      },
      size: {
--- a/src/components/ui/command.tsx
+++ b/src/components/ui/command.tsx
@@ -34,7 +34,7 @@ function CommandDialog({
 }) {
  return (
    <Dialog {...props}>
-      <DialogContent className="overflow-hidden p-0 rounded-2xl max-w-lg">
+      <DialogContent className="overflow-hidden p-0 rounded-2xl max-w-lg md:max-w-xl lg:max-w-2xl">
        <VisuallyHidden.Root>
          <DialogTitle>{title}</DialogTitle>
        </VisuallyHidden.Root>
--- a/src/components/ui/sheet.tsx
+++ b/src/components/ui/sheet.tsx
@@ -0,0 +1,143 @@
+"use client"
+
+import * as React from "react"
+import { Dialog as SheetPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+import { XIcon } from "lucide-react"
+
+function Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>) {
+  return <SheetPrimitive.Root data-slot="sheet" {...props} />
+}
+
+function SheetTrigger({
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Trigger>) {
+  return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />
+}
+
+function SheetClose({
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Close>) {
+  return <SheetPrimitive.Close data-slot="sheet-close" {...props} />
+}
+
+function SheetPortal({
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Portal>) {
+  return <SheetPrimitive.Portal data-slot="sheet-portal" {...props} />
+}
+
+function SheetOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Overlay>) {
+  return (
+    <SheetPrimitive.Overlay
+      data-slot="sheet-overlay"
+      className={cn(
+        "fixed inset-0 z-50 bg-black/80 duration-100 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SheetContent({
+  className,
+  children,
+  side = "right",
+  showCloseButton = true,
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Content> & {
+  side?: "top" | "right" | "bottom" | "left"
+  showCloseButton?: boolean
+}) {
+  return (
+    <SheetPortal>
+      <SheetOverlay />
+      <SheetPrimitive.Content
+        data-slot="sheet-content"
+        data-side={side}
+        className={cn(
+          "fixed z-50 flex flex-col bg-popover bg-clip-padding text-sm text-popover-foreground shadow-lg transition duration-200 ease-in-out data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-[side=bottom]:data-open:slide-in-from-bottom-10 data-[side=left]:data-open:slide-in-from-left-10 data-[side=right]:data-open:slide-in-from-right-10 data-[side=top]:data-open:slide-in-from-top-10 data-closed:animate-out data-closed:fade-out-0 data-[side=bottom]:data-closed:slide-out-to-bottom-10 data-[side=left]:data-closed:slide-out-to-left-10 data-[side=right]:data-closed:slide-out-to-right-10 data-[side=top]:data-closed:slide-out-to-top-10",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        {showCloseButton && (
+          <SheetPrimitive.Close data-slot="sheet-close" asChild>
+            <Button
+              variant="ghost"
+              className="absolute top-4 right-4"
+              size="icon-sm"
+            >
+              <XIcon />
+              <span className="sr-only">Close</span>
+            </Button>
+          </SheetPrimitive.Close>
+        )}
+      </SheetPrimitive.Content>
+    </SheetPortal>
+  )
+}
+
+function SheetHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sheet-header"
+      className={cn("flex flex-col gap-1.5 p-6", className)}
+      {...props}
+    />
+  )
+}
+
+function SheetFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sheet-footer"
+      className={cn("mt-auto flex flex-col gap-2 p-6", className)}
+      {...props}
+    />
+  )
+}
+
+function SheetTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Title>) {
+  return (
+    <SheetPrimitive.Title
+      data-slot="sheet-title"
+      className={cn("text-base font-medium text-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+function SheetDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Description>) {
+  return (
+    <SheetPrimitive.Description
+      data-slot="sheet-description"
+      className={cn("text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Sheet,
+  SheetTrigger,
+  SheetClose,
+  SheetContent,
+  SheetHeader,
+  SheetFooter,
+  SheetTitle,
+  SheetDescription,
+}
--- a/src/components/welcome/welcome-screen.tsx
+++ b/src/components/welcome/welcome-screen.tsx
@@ -15,11 +15,13 @@ import { Button } from "@/components/ui/button"
 import { AppToaster } from "@/components/ui/app-toaster"
 import { resolveWelcomeError } from "@/components/welcome/error-utils"
 import { AppTitleBar } from "@/components/layout/app-title-bar"
+import { useIsMobile } from "@/hooks/use-mobile"

 export function WelcomeScreen() {
  const t = useTranslations("WelcomePage")
  const [history, setHistory] = useState<FolderHistoryEntry[]>([])
  const [loading, setLoading] = useState(true)
+  const isMobile = useIsMobile()
  const { shortcuts } = useShortcutSettings()

  const handleOpenSettings = useCallback(() => {
@@ -83,8 +85,20 @@ export function WelcomeScreen() {
        }
      />

-      <div className="flex-1 flex overflow-hidden">
-        <div className="w-60 shrink-0 flex flex-col border-r">
+      <div
+        className={
+          isMobile
+            ? "flex-1 flex flex-col overflow-hidden"
+            : "flex-1 flex overflow-hidden"
+        }
+      >
+        <div
+          className={
+            isMobile
+              ? "shrink-0 flex flex-col border-b"
+              : "w-60 shrink-0 flex flex-col border-r"
+          }
+        >
          <SoftwareInfo />
          <FolderActions />
        </div>
--- a/src/contexts/sidebar-context.tsx
+++ b/src/contexts/sidebar-context.tsx
@@ -64,9 +64,12 @@ export function SidebarProvider({ children, folderId }: SidebarProviderProps) {

  useEffect(() => {
    const stored = loadPersistedPanelState(storageKey)
+    // On mobile (< 768px), always start closed regardless of persisted state.
+    const isMobileViewport = window.innerWidth < 768
+    const defaultOpen = isMobileViewport ? false : DEFAULT_IS_OPEN
    // Hydrate from localStorage after mount to keep SSR/CSR markup consistent.
    // eslint-disable-next-line react-hooks/set-state-in-effect
-    setIsOpen(stored?.isOpen ?? DEFAULT_IS_OPEN)
+    setIsOpen(isMobileViewport ? false : (stored?.isOpen ?? defaultOpen))
    setWidthState(clampWidth(stored?.width ?? DEFAULT_WIDTH))
    setRestored(true)
  }, [storageKey])
--- a/src/hooks/use-media-query.ts
+++ b/src/hooks/use-media-query.ts
@@ -0,0 +1,15 @@
+"use client"
+
+import { useSyncExternalStore } from "react"
+
+export function useMediaQuery(query: string): boolean {
+  return useSyncExternalStore(
+    (callback) => {
+      const mql = window.matchMedia(query)
+      mql.addEventListener("change", callback)
+      return () => mql.removeEventListener("change", callback)
+    },
+    () => window.matchMedia(query).matches,
+    () => false
+  )
+}
--- a/src/hooks/use-mobile.ts
+++ b/src/hooks/use-mobile.ts
@@ -0,0 +1,9 @@
+"use client"
+
+import { useMediaQuery } from "./use-media-query"
+
+const MOBILE_BREAKPOINT = "(max-width: 767px)"
+
+export function useIsMobile(): boolean {
+  return useMediaQuery(MOBILE_BREAKPOINT)
+}