From 07dc1d99bcd42f662c536bd2a728ff6d8b24847f Mon Sep 17 00:00:00 2001
From: ZingerLittleBee <6970999@gmail.com>
Date: Sat, 16 May 2026 19:10:07 +0800
Subject: [PATCH 1/3] feat(web): adapt UI for mobile viewports

Make settings, dashboard, data-table, and detail pages responsive:
stack header/action rows on small screens, allow horizontal table
scrolling via ScrollArea, and constrain widths to prevent overflow.
Default the servers list to grid view on mobile and split server
cell renderers and view-mode resolution into dedicated modules.
---
 .../dashboard/dashboard-editor-view.tsx       |   6 +-
 .../components/dashboard/dashboard-grid.tsx   |  10 +-
 .../components/dashboard/widget-picker.tsx    |   2 +-
 .../data-table/data-table-pagination.tsx      |   8 +-
 .../data-table/data-table-skeleton.tsx        |  10 +-
 .../data-table/data-table-toolbar.tsx         |  12 +-
 .../components/data-table/data-table.test.tsx |  36 ++++
 .../src/components/data-table/data-table.tsx  |   4 +-
 .../components/server/server-edit-dialog.tsx  |   6 +-
 .../components/task/scheduled-task-dialog.tsx |   2 +-
 apps/web/src/components/ui/data-table.tsx     |   2 +-
 apps/web/src/components/ui/scroll-area.tsx    |   1 +
 apps/web/src/components/ui/table.tsx          |   4 +-
 apps/web/src/routes/_authed.tsx               |  18 +-
 .../src/routes/_authed/files.$serverId.tsx    |  18 +-
 .../src/routes/_authed/network/$serverId.tsx  |   2 +-
 .../index-cells.tsx}                          |   0
 .../_authed/servers/components/mobile-view.ts |  31 ++++
 .../_authed/servers/index.cells.test.tsx      |   2 +-
 apps/web/src/routes/_authed/servers/index.tsx | 154 +++++++++---------
 .../_authed/servers/mobile-view.test.ts       |  20 +++
 .../src/routes/_authed/settings/alerts.tsx    |  11 +-
 .../src/routes/_authed/settings/api-keys.tsx  |   9 +-
 .../routes/_authed/settings/appearance.tsx    |  10 +-
 .../routes/_authed/settings/audit-logs.tsx    |   4 +-
 .../routes/_authed/settings/capabilities.tsx  |  10 +-
 .../web/src/routes/_authed/settings/index.tsx |   8 +-
 .../_authed/settings/mobile-devices.tsx       |  13 +-
 .../_authed/settings/network-probes.tsx       |  18 +-
 .../routes/_authed/settings/notifications.tsx |  16 +-
 .../routes/_authed/settings/ping-tasks.tsx    |   6 +-
 .../src/routes/_authed/settings/security.tsx  |   7 +-
 .../_authed/settings/service-monitors.tsx     |  12 +-
 .../routes/_authed/settings/status-pages.tsx  |   6 +-
 .../web/src/routes/_authed/settings/users.tsx |   9 +-
 .../src/routes/_authed/terminal.$serverId.tsx |  12 +-
 apps/web/src/routes/_authed/traffic/index.tsx |   4 +-
 apps/web/src/routes/login.tsx                 |   2 +-
 38 files changed, 313 insertions(+), 192 deletions(-)
 create mode 100644 apps/web/src/components/data-table/data-table.test.tsx
 rename apps/web/src/routes/_authed/servers/{index.cells.tsx => components/index-cells.tsx} (100%)
 create mode 100644 apps/web/src/routes/_authed/servers/components/mobile-view.ts
 create mode 100644 apps/web/src/routes/_authed/servers/mobile-view.test.ts

diff --git a/apps/web/src/components/dashboard/dashboard-editor-view.tsx b/apps/web/src/components/dashboard/dashboard-editor-view.tsx
index 79aa9cb5..ed4b3312 100644
--- a/apps/web/src/components/dashboard/dashboard-editor-view.tsx
+++ b/apps/web/src/components/dashboard/dashboard-editor-view.tsx
@@ -142,15 +142,15 @@ export function DashboardEditorView({
   }
 
   return (
-    <div>
-      <div className="mb-6 flex flex-wrap items-center justify-between gap-3">
+    <div className="w-full min-w-0 max-w-[calc(100vw-1.5rem)] overflow-hidden sm:max-w-full">
+      <div className="mb-6 flex w-full min-w-0 max-w-full flex-col gap-3 sm:flex-row sm:flex-wrap sm:items-center sm:justify-between">
         <DashboardSwitcher
           currentId={activeDashboardId}
           dashboards={dashboards}
           isAdmin={isAdmin}
           onSelect={handleDashboardSelect}
         />
-        <div className="flex items-center gap-2">
+        <div className="flex flex-wrap items-center gap-2">
           {isAdmin && !editor.isEditing && isDashboardReady && (
             <Button onClick={handleEdit} size="sm" variant="outline">
               <PencilIcon className="mr-1 size-4" />
diff --git a/apps/web/src/components/dashboard/dashboard-grid.tsx b/apps/web/src/components/dashboard/dashboard-grid.tsx
index 81d9b638..7a02ccea 100644
--- a/apps/web/src/components/dashboard/dashboard-grid.tsx
+++ b/apps/web/src/components/dashboard/dashboard-grid.tsx
@@ -173,6 +173,7 @@ export function DashboardGrid({
           <div className="relative" key={widget.id}>
             {isEditing && (
               <EditOverlay
+                forceVisible
                 isStatic={isWidgetStatic(widget.config_json)}
                 onDelete={() => onWidgetDelete(widget.id)}
                 onEdit={() => onWidgetEdit(widget.id)}
@@ -232,18 +233,25 @@ export function DashboardGrid({
 }
 
 function EditOverlay({
+  forceVisible,
   isStatic,
   onEdit,
   onDelete,
   onToggleStatic
 }: {
+  forceVisible?: boolean
   isStatic?: boolean
   onDelete: () => void
   onEdit: () => void
   onToggleStatic?: () => void
 }) {
   return (
-    <div className="absolute top-1 right-1 z-10 flex gap-1 opacity-0 transition-opacity [div:hover>&]:opacity-100">
+    <div
+      className={cn(
+        'absolute top-1 right-1 z-10 flex gap-1 transition-opacity [div:hover>&]:opacity-100',
+        forceVisible ? 'opacity-100' : 'opacity-0'
+      )}
+    >
       {onToggleStatic && (
         <Button
           className="size-7"
diff --git a/apps/web/src/components/dashboard/widget-picker.tsx b/apps/web/src/components/dashboard/widget-picker.tsx
index ac3153bd..4c684908 100644
--- a/apps/web/src/components/dashboard/widget-picker.tsx
+++ b/apps/web/src/components/dashboard/widget-picker.tsx
@@ -88,7 +88,7 @@ export function WidgetPicker({ onSelect, open, onOpenChange }: WidgetPickerProps
               return (
                 <div key={category}>
                   <h4 className="mb-2 font-medium text-muted-foreground text-xs uppercase tracking-wide">{category}</h4>
-                  <div className="grid grid-cols-2 gap-2">
+                  <div className="grid gap-2 sm:grid-cols-2">
                     {widgets.map((widgetType) => {
                       const Icon = WIDGET_ICONS[widgetType.id] ?? Server
                       const description = WIDGET_DESCRIPTIONS[widgetType.id] ?? ''
diff --git a/apps/web/src/components/data-table/data-table-pagination.tsx b/apps/web/src/components/data-table/data-table-pagination.tsx
index 8d48f2d6..6a655ad8 100644
--- a/apps/web/src/components/data-table/data-table-pagination.tsx
+++ b/apps/web/src/components/data-table/data-table-pagination.tsx
@@ -19,7 +19,7 @@ export function DataTablePagination<TData>({
   return (
     <div
       className={cn(
-        'flex w-full flex-col-reverse items-center justify-between gap-4 overflow-auto p-1 sm:flex-row sm:gap-8',
+        'flex w-full min-w-0 flex-col-reverse items-center justify-between gap-4 p-1 sm:flex-row sm:gap-8',
         className
       )}
       {...props}
@@ -27,8 +27,8 @@ export function DataTablePagination<TData>({
       <div className="flex-1 whitespace-nowrap text-muted-foreground text-sm">
         {table.getFilteredSelectedRowModel().rows.length} of {table.getFilteredRowModel().rows.length} row(s) selected.
       </div>
-      <div className="flex flex-col-reverse items-center gap-4 sm:flex-row sm:gap-6 lg:gap-8">
-        <div className="flex items-center space-x-2">
+      <div className="flex w-full flex-col-reverse items-center gap-4 sm:w-auto sm:flex-row sm:gap-6 lg:gap-8">
+        <div className="flex items-center gap-2">
           <p className="whitespace-nowrap font-medium text-sm">Rows per page</p>
           <Select
             onValueChange={(value) => {
@@ -51,7 +51,7 @@ export function DataTablePagination<TData>({
         <div className="flex items-center justify-center font-medium text-sm">
           Page {table.getState().pagination.pageIndex + 1} of {table.getPageCount()}
         </div>
-        <div className="flex items-center space-x-2">
+        <div className="flex items-center gap-2">
           <Button
             aria-label="Go to first page"
             className="hidden size-8 lg:flex"
diff --git a/apps/web/src/components/data-table/data-table-skeleton.tsx b/apps/web/src/components/data-table/data-table-skeleton.tsx
index feafe818..b89feb9c 100644
--- a/apps/web/src/components/data-table/data-table-skeleton.tsx
+++ b/apps/web/src/components/data-table/data-table-skeleton.tsx
@@ -29,16 +29,16 @@ export function DataTableSkeleton({
   )
 
   return (
-    <div className={cn('flex w-full flex-col gap-2.5 overflow-auto', className)} {...props}>
-      <div className="flex w-full items-center justify-between gap-2 overflow-auto p-1">
-        <div className="flex flex-1 items-center gap-2">
+    <div className={cn('flex w-full min-w-0 flex-col gap-2.5 overflow-hidden', className)} {...props}>
+      <div className="flex w-full min-w-0 flex-wrap items-center justify-between gap-2 p-1">
+        <div className="flex min-w-0 flex-1 flex-wrap items-center gap-2">
           {filterCount > 0
             ? Array.from({ length: filterCount }).map((_, i) => <Skeleton className="h-7 w-18 border-dashed" key={i} />)
             : null}
         </div>
         {withViewOptions ? <Skeleton className="ml-auto hidden h-7 w-18 lg:flex" /> : null}
       </div>
-      <div className="rounded-md border">
+      <div className="min-w-0 overflow-hidden rounded-md border">
         <Table>
           <TableHeader>
             {Array.from({ length: 1 }).map((_, i) => (
@@ -77,7 +77,7 @@ export function DataTableSkeleton({
         </Table>
       </div>
       {withPagination ? (
-        <div className="flex w-full items-center justify-between gap-4 overflow-auto p-1 sm:gap-8">
+        <div className="flex w-full min-w-0 flex-wrap items-center justify-between gap-4 p-1 sm:gap-8">
           <Skeleton className="h-7 w-40 shrink-0" />
           <div className="flex items-center gap-4 sm:gap-6 lg:gap-8">
             <div className="flex items-center gap-2">
diff --git a/apps/web/src/components/data-table/data-table-toolbar.tsx b/apps/web/src/components/data-table/data-table-toolbar.tsx
index 5f4c66a3..17c204f2 100644
--- a/apps/web/src/components/data-table/data-table-toolbar.tsx
+++ b/apps/web/src/components/data-table/data-table-toolbar.tsx
@@ -28,11 +28,11 @@ export function DataTableToolbar<TData>({ table, children, className, ...props }
   return (
     <div
       aria-orientation="horizontal"
-      className={cn('flex w-full items-start justify-between gap-2 p-1', className)}
+      className={cn('flex w-full min-w-0 flex-col gap-2 p-1 sm:flex-row sm:items-start sm:justify-between', className)}
       role="toolbar"
       {...props}
     >
-      <div className="flex flex-1 flex-wrap items-center gap-2">
+      <div className="flex min-w-0 flex-1 flex-wrap items-center gap-2">
         {columns.map((column) => (
           <DataTableToolbarFilter column={column} key={column.id} />
         ))}
@@ -43,7 +43,7 @@ export function DataTableToolbar<TData>({ table, children, className, ...props }
           </Button>
         )}
       </div>
-      <div className="flex items-center gap-2">
+      <div className="flex w-full flex-wrap items-center justify-end gap-2 sm:w-auto">
         {children}
         <DataTableViewOptions align="end" table={table} />
       </div>
@@ -67,7 +67,7 @@ function DataTableToolbarFilter<TData>({ column }: DataTableToolbarFilterProps<T
         case 'text':
           return (
             <Input
-              className="h-8 w-40 lg:w-56"
+              className="h-8 w-full min-w-36 sm:w-40 lg:w-56"
               onChange={(event) => column.setFilterValue(event.target.value)}
               placeholder={columnMeta.placeholder ?? columnMeta.label}
               value={(column.getFilterValue() as string) ?? ''}
@@ -76,9 +76,9 @@ function DataTableToolbarFilter<TData>({ column }: DataTableToolbarFilterProps<T
 
         case 'number':
           return (
-            <div className="relative">
+            <div className="relative min-w-32">
               <Input
-                className={cn('h-8 w-[120px]', columnMeta.unit && 'pr-8')}
+                className={cn('h-8 w-full', columnMeta.unit && 'pr-8')}
                 inputMode="numeric"
                 onChange={(event) => column.setFilterValue(event.target.value)}
                 placeholder={columnMeta.placeholder ?? columnMeta.label}
diff --git a/apps/web/src/components/data-table/data-table.test.tsx b/apps/web/src/components/data-table/data-table.test.tsx
new file mode 100644
index 00000000..92686d84
--- /dev/null
+++ b/apps/web/src/components/data-table/data-table.test.tsx
@@ -0,0 +1,36 @@
+import { type ColumnDef, getCoreRowModel, useReactTable } from '@tanstack/react-table'
+import { render, screen } from '@testing-library/react'
+import { describe, expect, it } from 'vitest'
+import { DataTable } from './data-table'
+
+interface Row {
+  name: string
+}
+
+const columns: ColumnDef<Row>[] = [
+  {
+    accessorKey: 'name',
+    header: 'Name',
+    cell: ({ row }) => row.original.name
+  }
+]
+
+function TestTable() {
+  const table = useReactTable({
+    data: [{ name: 'server-1' }],
+    columns,
+    getCoreRowModel: getCoreRowModel()
+  })
+
+  return <DataTable table={table} />
+}
+
+describe('DataTable mobile layout', () => {
+  it('keeps horizontal overflow inside the table viewport', () => {
+    const { container } = render(<TestTable />)
+
+    expect(container.firstElementChild).toHaveClass('min-w-0', 'overflow-hidden')
+    expect(screen.getByTestId('data-table-scroll')).toHaveClass('min-w-0')
+    expect(screen.getByRole('table')).toHaveClass('min-w-max')
+  })
+})
diff --git a/apps/web/src/components/data-table/data-table.tsx b/apps/web/src/components/data-table/data-table.tsx
index 3522a62d..0b9030eb 100644
--- a/apps/web/src/components/data-table/data-table.tsx
+++ b/apps/web/src/components/data-table/data-table.tsx
@@ -12,9 +12,9 @@ interface DataTableProps<TData> extends React.ComponentProps<'div'> {
 
 export function DataTable<TData>({ table, actionBar, children, className, ...props }: DataTableProps<TData>) {
   return (
-    <div className={cn('flex w-full flex-col gap-2.5 overflow-auto', className)} {...props}>
+    <div className={cn('flex w-full min-w-0 flex-col gap-2.5 overflow-hidden', className)} {...props}>
       {children}
-      <div className="overflow-hidden rounded-md border">
+      <div className="min-w-0 overflow-hidden rounded-md border" data-testid="data-table-scroll">
         <Table className="table-fixed [&_td]:px-3 [&_th]:px-3">
           <TableHeader>
             {table.getHeaderGroups().map((headerGroup) => (
diff --git a/apps/web/src/components/server/server-edit-dialog.tsx b/apps/web/src/components/server/server-edit-dialog.tsx
index 50aa8e1b..6b39556a 100644
--- a/apps/web/src/components/server/server-edit-dialog.tsx
+++ b/apps/web/src/components/server/server-edit-dialog.tsx
@@ -200,7 +200,7 @@ export function ServerEditDialog({ server, open, onClose }: ServerEditDialogProp
                   value={name}
                 />
               </Field>
-              <div className="grid grid-cols-2 gap-3">
+              <div className="grid gap-3 sm:grid-cols-2">
                 <Field label={t('edit_weight')}>
                   <Input
                     aria-label={t('edit_weight')}
@@ -282,7 +282,7 @@ export function ServerEditDialog({ server, open, onClose }: ServerEditDialogProp
               <legend className="mb-1 font-medium text-muted-foreground text-xs uppercase tracking-wider">
                 {t('edit_billing')}
               </legend>
-              <div className="grid grid-cols-3 gap-3">
+              <div className="grid gap-3 sm:grid-cols-3">
                 <Field label={t('edit_price')}>
                   <Input
                     aria-label={t('edit_price')}
@@ -336,7 +336,7 @@ export function ServerEditDialog({ server, open, onClose }: ServerEditDialogProp
               <Field label={t('edit_expiration')}>
                 <DatePickerField ariaLabel={t('edit_expiration')} onChange={setExpiredAt} value={expiredAt} />
               </Field>
-              <div className="grid grid-cols-2 gap-3">
+              <div className="grid gap-3 sm:grid-cols-2">
                 <Field label={t('edit_traffic_limit')}>
                   <Input
                     aria-label={t('edit_traffic_limit')}
diff --git a/apps/web/src/components/task/scheduled-task-dialog.tsx b/apps/web/src/components/task/scheduled-task-dialog.tsx
index 6e858a1d..7c6bcd26 100644
--- a/apps/web/src/components/task/scheduled-task-dialog.tsx
+++ b/apps/web/src/components/task/scheduled-task-dialog.tsx
@@ -177,7 +177,7 @@ export function ScheduledTaskDialog({ onClose, task }: Props) {
             />
           </div>
 
-          <div className="grid grid-cols-3 gap-3">
+          <div className="grid gap-3 sm:grid-cols-3">
             <div>
               <label className="mb-1 block font-medium text-sm" htmlFor="task-timeout">
                 {t('tasks.timeout')}
diff --git a/apps/web/src/components/ui/data-table.tsx b/apps/web/src/components/ui/data-table.tsx
index 70141777..fa47fd9e 100644
--- a/apps/web/src/components/ui/data-table.tsx
+++ b/apps/web/src/components/ui/data-table.tsx
@@ -18,7 +18,7 @@ interface DataTableProps<TData> {
 
 function DataTable<TData>({ table, noResults, className }: DataTableProps<TData>) {
   return (
-    <div className={cn('overflow-hidden rounded-lg border', className)}>
+    <div className={cn('min-w-0 max-w-full overflow-hidden rounded-lg border', className)}>
       <Table className="table-fixed">
         <TableHeader className="sticky top-0 z-10 bg-background">
           {table.getHeaderGroups().map((headerGroup) => (
diff --git a/apps/web/src/components/ui/scroll-area.tsx b/apps/web/src/components/ui/scroll-area.tsx
index cd891eda..a8d80583 100644
--- a/apps/web/src/components/ui/scroll-area.tsx
+++ b/apps/web/src/components/ui/scroll-area.tsx
@@ -16,6 +16,7 @@ function ScrollArea({ className, children, ...props }: ScrollAreaPrimitive.Root.
         <ScrollAreaPrimitive.Content data-slot="scroll-area-content">{children}</ScrollAreaPrimitive.Content>
       </ScrollAreaPrimitive.Viewport>
       <ScrollBar />
+      <ScrollBar orientation="horizontal" />
       <ScrollAreaPrimitive.Corner />
     </ScrollAreaPrimitive.Root>
   )
diff --git a/apps/web/src/components/ui/table.tsx b/apps/web/src/components/ui/table.tsx
index 51c814d3..0e62c74d 100644
--- a/apps/web/src/components/ui/table.tsx
+++ b/apps/web/src/components/ui/table.tsx
@@ -5,8 +5,8 @@ import { cn } from '@/lib/utils'
 
 function Table({ className, ...props }: React.ComponentProps<'table'>) {
   return (
-    <ScrollArea className="min-h-0 w-full flex-1" data-slot="table-container">
-      <table className={cn('w-full caption-bottom text-sm', className)} data-slot="table" {...props} />
+    <ScrollArea className="min-h-0 w-full min-w-0 flex-1" data-slot="table-container">
+      <table className={cn('w-full min-w-max caption-bottom text-sm', className)} data-slot="table" {...props} />
     </ScrollArea>
   )
 }
diff --git a/apps/web/src/routes/_authed.tsx b/apps/web/src/routes/_authed.tsx
index 82976438..84b49d0c 100644
--- a/apps/web/src/routes/_authed.tsx
+++ b/apps/web/src/routes/_authed.tsx
@@ -196,23 +196,23 @@ function AuthedLayout() {
       <SidebarProvider>
         <AppSidebar />
         <SidebarInset className="min-h-0 overflow-hidden">
-          <header className="flex h-16 shrink-0 items-center justify-between gap-2 px-4">
-            <div className="flex items-center gap-2">
+          <header className="flex h-14 shrink-0 items-center justify-between gap-2 px-3 sm:h-16 sm:px-4">
+            <div className="flex min-w-0 items-center gap-2">
               <SidebarTrigger className="-ml-1" />
               <Separator
-                className="mr-2 data-[orientation=vertical]:h-4 data-[orientation=vertical]:self-center"
+                className="mr-1 data-[orientation=vertical]:h-4 data-[orientation=vertical]:self-center sm:mr-2"
                 orientation="vertical"
               />
-              <Breadcrumb>
-                <BreadcrumbList>
+              <Breadcrumb className="min-w-0">
+                <BreadcrumbList className="min-w-0 flex-nowrap">
                   {breadcrumbs.map((crumb, index) => {
                     const isLast = index === breadcrumbs.length - 1
                     const hiddenOnMobile = index === 0 && breadcrumbs.length > 1
                     return (
                       <Fragment key={crumb.label}>
-                        <BreadcrumbItem className={hiddenOnMobile ? 'hidden md:block' : ''}>
+                        <BreadcrumbItem className={hiddenOnMobile ? 'hidden md:block' : 'min-w-0'}>
                           {isLast || !crumb.to ? (
-                            <BreadcrumbPage>{crumb.label}</BreadcrumbPage>
+                            <BreadcrumbPage className="truncate">{crumb.label}</BreadcrumbPage>
                           ) : (
                             <BreadcrumbLink render={<Link to={crumb.to} />}>{crumb.label}</BreadcrumbLink>
                           )}
@@ -224,13 +224,13 @@ function AuthedLayout() {
                 </BreadcrumbList>
               </Breadcrumb>
             </div>
-            <div className="flex items-center gap-2">
+            <div className="flex shrink-0 items-center gap-1 sm:gap-2">
               <LanguageSwitcher />
               <ThemeToggle />
             </div>
           </header>
           <ScrollArea className="min-h-0 flex-1 overflow-hidden">
-            <main className="flex h-full flex-col p-4 pt-0">
+            <main className="flex min-h-full min-w-0 flex-col p-3 pt-0 sm:p-4 sm:pt-0">
               <Outlet />
             </main>
           </ScrollArea>
diff --git a/apps/web/src/routes/_authed/files.$serverId.tsx b/apps/web/src/routes/_authed/files.$serverId.tsx
index 8cb873d2..d1d015a5 100644
--- a/apps/web/src/routes/_authed/files.$serverId.tsx
+++ b/apps/web/src/routes/_authed/files.$serverId.tsx
@@ -131,23 +131,23 @@ function FilesPage() {
   )
 
   return (
-    <div className="flex h-full flex-col">
+    <div className="flex min-h-0 min-w-0 flex-1 flex-col">
       {/* Header */}
-      <div className="flex items-center gap-3 border-b px-4 py-2">
+      <div className="flex flex-wrap items-center gap-2 border-b px-3 py-2 sm:gap-3 sm:px-4">
         <Link params={{ id: serverId }} search={{ range: 'realtime' }} to="/servers/$id">
           <Button size="sm" variant="ghost">
             <ArrowLeft aria-hidden="true" className="size-4" />
             {t('back_to_server')}
           </Button>
         </Link>
-        <h1 className="font-semibold text-lg">{t('title')}</h1>
-        <span className="text-muted-foreground text-sm">{serverId.slice(0, 8)}...</span>
+        <h1 className="font-semibold text-base sm:text-lg">{t('title')}</h1>
+        <span className="text-muted-foreground text-xs sm:text-sm">{serverId.slice(0, 8)}...</span>
       </div>
 
       {/* Breadcrumb + Actions */}
-      <div className="flex items-center gap-2 border-b px-4 py-1.5">
+      <div className="flex flex-col gap-2 border-b px-3 py-2 sm:flex-row sm:items-center sm:px-4 sm:py-1.5">
         <FileBreadcrumb onNavigate={handleNavigate} path={currentPath} />
-        <div className="ml-auto flex gap-1">
+        <div className="flex flex-wrap gap-1 sm:ml-auto">
           {isAdmin && (
             <Button aria-label={t('upload')} onClick={() => setUploadOpen(true)} size="sm" variant="outline">
               <Upload className="size-3.5" />
@@ -169,7 +169,7 @@ function FilesPage() {
       {/* Main content: file list + preview */}
       <div className="flex min-h-0 flex-1">
         {/* File list panel */}
-        <div className="w-full min-w-0 overflow-y-auto border-r md:w-[45%]">
+        <div className="w-full min-w-0 border-r md:w-[45%]">
           <FileBrowser
             entries={entries}
             error={isError ? getErrorMessage(listError, t('load_error')) : undefined}
@@ -190,14 +190,14 @@ function FilesPage() {
       {/* Mobile preview overlay */}
       {selectedFile && (
         <div className="fixed inset-0 z-40 flex flex-col bg-background md:hidden">
-          <div className="flex items-center gap-2 border-b px-4 py-2">
+          <div className="flex min-w-0 items-center gap-2 border-b px-3 py-2 sm:px-4">
             <Button onClick={() => setSelectedFile(null)} size="sm" variant="ghost">
               <ArrowLeft aria-hidden="true" className="size-4" />
               {t('back_to_server')}
             </Button>
             <span className="truncate text-sm">{selectedFile.name}</span>
           </div>
-          <div className="flex-1">
+          <div className="min-h-0 flex-1">
             <FilePreview entry={selectedFile} readOnly={!isAdmin} serverId={serverId} />
           </div>
         </div>
diff --git a/apps/web/src/routes/_authed/network/$serverId.tsx b/apps/web/src/routes/_authed/network/$serverId.tsx
index af141479..a854c7c1 100644
--- a/apps/web/src/routes/_authed/network/$serverId.tsx
+++ b/apps/web/src/routes/_authed/network/$serverId.tsx
@@ -667,7 +667,7 @@ export function NetworkDetailPage() {
       </div>
 
       {/* Bottom stats */}
-      <div className="mb-6 grid grid-cols-3 gap-4">
+      <div className="mb-6 grid gap-4 sm:grid-cols-3">
         <div className="rounded-lg border bg-card p-4 text-center">
           <p className="font-mono font-semibold text-lg tabular-nums">
             {stats.avgLatency != null ? `${stats.avgLatency.toFixed(1)} ms` : 'N/A'}
diff --git a/apps/web/src/routes/_authed/servers/index.cells.tsx b/apps/web/src/routes/_authed/servers/components/index-cells.tsx
similarity index 100%
rename from apps/web/src/routes/_authed/servers/index.cells.tsx
rename to apps/web/src/routes/_authed/servers/components/index-cells.tsx
diff --git a/apps/web/src/routes/_authed/servers/components/mobile-view.ts b/apps/web/src/routes/_authed/servers/components/mobile-view.ts
new file mode 100644
index 00000000..be75a16a
--- /dev/null
+++ b/apps/web/src/routes/_authed/servers/components/mobile-view.ts
@@ -0,0 +1,31 @@
+export type ServersViewMode = 'grid' | 'table'
+
+interface ResolveInitialServersViewInput {
+  isMobile: boolean
+  searchView?: ServersViewMode
+  storedView: string | null
+}
+
+function isServersViewMode(value: string | null | undefined): value is ServersViewMode {
+  return value === 'grid' || value === 'table'
+}
+
+export function resolveInitialServersView({
+  isMobile,
+  searchView,
+  storedView
+}: ResolveInitialServersViewInput): ServersViewMode {
+  if (isServersViewMode(searchView)) {
+    return searchView
+  }
+  if (isServersViewMode(storedView)) {
+    return storedView
+  }
+  return isMobile ? 'grid' : 'table'
+}
+
+export function getInitialServersView(searchView?: ServersViewMode): ServersViewMode {
+  const storedView = typeof window === 'undefined' ? null : localStorage.getItem('serverbee-servers-view-mode')
+  const isMobile = typeof window !== 'undefined' && window.innerWidth < 768
+  return resolveInitialServersView({ isMobile, searchView, storedView })
+}
diff --git a/apps/web/src/routes/_authed/servers/index.cells.test.tsx b/apps/web/src/routes/_authed/servers/index.cells.test.tsx
index 5d344e6f..9bbcf441 100644
--- a/apps/web/src/routes/_authed/servers/index.cells.test.tsx
+++ b/apps/web/src/routes/_authed/servers/index.cells.test.tsx
@@ -11,7 +11,7 @@ import {
   NetworkCell,
   PositionIndicator,
   UptimeCell
-} from './index.cells'
+} from './components/index-cells'
 
 vi.mock('react-i18next', () => ({
   useTranslation: () => ({ t: (key: string) => key })
diff --git a/apps/web/src/routes/_authed/servers/index.tsx b/apps/web/src/routes/_authed/servers/index.tsx
index 31e6c6b0..8cf94e4d 100644
--- a/apps/web/src/routes/_authed/servers/index.tsx
+++ b/apps/web/src/routes/_authed/servers/index.tsx
@@ -38,7 +38,8 @@ import { api } from '@/lib/api-client'
 import type { ServerGroup } from '@/lib/api-schema'
 import { countCleanupCandidates } from '@/lib/orphan-server-utils'
 import { useUpgradeJobsStore } from '@/stores/upgrade-jobs-store'
-import { CpuCell, DiskCell, MemoryCell, NameCell, NetworkCell, UptimeCell } from './index.cells'
+import { CpuCell, DiskCell, MemoryCell, NameCell, NetworkCell, UptimeCell } from './components/index-cells'
+import { getInitialServersView } from './components/mobile-view'
 
 function UpgradeBadgeCell({ serverId }: { serverId: string }) {
   const job = useUpgradeJobsStore((state) => state.jobs.get(serverId))
@@ -50,7 +51,7 @@ export const Route = createFileRoute('/_authed/servers/')({
   validateSearch: (search: Record<string, unknown>) => ({
     ...search,
     q: (search.q as string) || '',
-    view: (search.view === 'grid' ? 'grid' : 'table') as 'table' | 'grid'
+    view: search.view === 'grid' || search.view === 'table' ? search.view : undefined
   })
 })
 
@@ -67,12 +68,9 @@ function ServersListPage() {
   const navigate = Route.useNavigate()
   const { q: search, view: viewParam } = Route.useSearch()
 
-  const [viewMode, setViewModeState] = useState<'table' | 'grid'>(() => {
-    if (viewParam === 'table' || viewParam === 'grid') {
-      return viewParam
-    }
-    return (localStorage.getItem('serverbee-servers-view-mode') as 'table' | 'grid') || 'table'
-  })
+  const [viewMode, setViewModeState] = useState<'table' | 'grid'>(() =>
+    getInitialServersView(viewParam === 'grid' || viewParam === 'table' ? viewParam : undefined)
+  )
 
   const setViewMode = (value: 'table' | 'grid') => {
     setViewModeState(value)
@@ -335,9 +333,9 @@ function ServersListPage() {
   }
 
   return (
-    <div>
-      <div className="mb-6 flex items-center justify-between">
-        <div>
+    <div className="min-w-0">
+      <div className="mb-6 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+        <div className="min-w-0">
           <h1 className="font-bold text-2xl">{t('title')}</h1>
           <p className="text-muted-foreground text-sm">
             {t('servers_online', { online: servers.filter((s) => s.online).length, total: servers.length })}
@@ -345,8 +343,8 @@ function ServersListPage() {
         </div>
       </div>
 
-      <div className="mb-4 flex items-center gap-3">
-        <div className="relative flex-1">
+      <div className="mb-4 flex flex-col gap-3 sm:flex-row sm:items-center">
+        <div className="relative min-w-0 flex-1">
           <Search className="absolute top-1/2 left-3 size-4 -translate-y-1/2 text-muted-foreground" />
           <Input
             aria-label={t('servers:search_placeholder')}
@@ -359,69 +357,71 @@ function ServersListPage() {
             value={search}
           />
         </div>
-        <ToggleGroup
-          multiple={false}
-          onValueChange={(value) => value.length > 0 && setViewMode(value[0] as 'table' | 'grid')}
-          size="sm"
-          value={[viewMode]}
-          variant="outline"
-        >
-          <ToggleGroupItem aria-label={t('common:a11y.table_view')} value="table">
-            <Table2 className="size-4" />
-          </ToggleGroupItem>
-          <ToggleGroupItem aria-label={t('common:a11y.grid_view')} value="grid">
-            <LayoutGrid className="size-4" />
-          </ToggleGroupItem>
-        </ToggleGroup>
-        {orphanCount > 0 && (
-          <AlertDialog>
-            <AlertDialogTrigger
-              render={
-                <Button disabled={cleanupMutation.isPending} size="sm" variant="outline">
-                  {t('servers:cleanup_orphans')} ({orphanCount})
-                </Button>
-              }
-            />
-            <AlertDialogContent>
-              <AlertDialogHeader>
-                <AlertDialogTitle>{t('servers:cleanup_confirm_title')}</AlertDialogTitle>
-                <AlertDialogDescription>
-                  {t('servers:cleanup_confirm_description', { count: orphanCount })}
-                </AlertDialogDescription>
-              </AlertDialogHeader>
-              <AlertDialogFooter>
-                <AlertDialogCancel>{t('common:cancel')}</AlertDialogCancel>
-                <AlertDialogAction onClick={() => cleanupMutation.mutate()} variant="destructive">
-                  {t('common:delete')}
-                </AlertDialogAction>
-              </AlertDialogFooter>
-            </AlertDialogContent>
-          </AlertDialog>
-        )}
-        {selectedCount > 0 && (
-          <AlertDialog>
-            <AlertDialogTrigger
-              render={
-                <Button disabled={batchDeleteMutation.isPending} size="sm" variant="destructive">
-                  <Trash2 aria-hidden="true" className="size-3.5" />
-                  {t('servers:delete_selected', { count: selectedCount })}
-                </Button>
-              }
-            />
-            <AlertDialogContent>
-              <AlertDialogHeader>
-                <AlertDialogTitle>{t('common:confirm_title')}</AlertDialogTitle>
-                <AlertDialogDescription>{t('common:confirm_delete_message')}</AlertDialogDescription>
-              </AlertDialogHeader>
-              <AlertDialogFooter>
-                <AlertDialogCancel>{t('common:cancel')}</AlertDialogCancel>
-                <AlertDialogAction onClick={handleBatchDelete} variant="destructive">
-                  {t('common:delete')}
-                </AlertDialogAction>
-              </AlertDialogFooter>
-            </AlertDialogContent>
-          </AlertDialog>
-        )}
+        <div className="flex flex-wrap items-center gap-2">
+          <ToggleGroup
+            multiple={false}
+            onValueChange={(value) => value.length > 0 && setViewMode(value[0] as 'table' | 'grid')}
+            size="sm"
+            value={[viewMode]}
+            variant="outline"
+          >
+            <ToggleGroupItem aria-label={t('common:a11y.table_view')} value="table">
+              <Table2 className="size-4" />
+            </ToggleGroupItem>
+            <ToggleGroupItem aria-label={t('common:a11y.grid_view')} value="grid">
+              <LayoutGrid className="size-4" />
+            </ToggleGroupItem>
+          </ToggleGroup>
+          {orphanCount > 0 && (
+            <AlertDialog>
+              <AlertDialogTrigger
+                render={
+                  <Button disabled={cleanupMutation.isPending} size="sm" variant="outline">
+                    {t('servers:cleanup_orphans')} ({orphanCount})
+                  </Button>
+                }
+              />
+              <AlertDialogContent>
+                <AlertDialogHeader>
+                  <AlertDialogTitle>{t('servers:cleanup_confirm_title')}</AlertDialogTitle>
+                  <AlertDialogDescription>
+                    {t('servers:cleanup_confirm_description', { count: orphanCount })}
+                  </AlertDialogDescription>
+                </AlertDialogHeader>
+                <AlertDialogFooter>
+                  <AlertDialogCancel>{t('common:cancel')}</AlertDialogCancel>
+                  <AlertDialogAction onClick={() => cleanupMutation.mutate()} variant="destructive">
+                    {t('common:delete')}
+                  </AlertDialogAction>
+                </AlertDialogFooter>
+              </AlertDialogContent>
+            </AlertDialog>
+          )}
+          {selectedCount > 0 && (
+            <AlertDialog>
+              <AlertDialogTrigger
+                render={
+                  <Button disabled={batchDeleteMutation.isPending} size="sm" variant="destructive">
+                    <Trash2 aria-hidden="true" className="size-3.5" />
+                    {t('servers:delete_selected', { count: selectedCount })}
+                  </Button>
+                }
+              />
+              <AlertDialogContent>
+                <AlertDialogHeader>
+                  <AlertDialogTitle>{t('common:confirm_title')}</AlertDialogTitle>
+                  <AlertDialogDescription>{t('common:confirm_delete_message')}</AlertDialogDescription>
+                </AlertDialogHeader>
+                <AlertDialogFooter>
+                  <AlertDialogCancel>{t('common:cancel')}</AlertDialogCancel>
+                  <AlertDialogAction onClick={handleBatchDelete} variant="destructive">
+                    {t('common:delete')}
+                  </AlertDialogAction>
+                </AlertDialogFooter>
+              </AlertDialogContent>
+            </AlertDialog>
+          )}
+        </div>
       </div>
 
       {servers.length === 0 && (
@@ -438,7 +438,7 @@ function ServersListPage() {
         </DataTable>
       )}
       {servers.length > 0 && viewMode === 'grid' && (
-        <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+        <div className="grid gap-4 sm:grid-cols-2 xl:grid-cols-3">
           {filtered.map((server) => (
             <div className="[contain-intrinsic-size:auto_280px] [content-visibility:auto]" key={server.id}>
               <ServerCard server={server} />
diff --git a/apps/web/src/routes/_authed/servers/mobile-view.test.ts b/apps/web/src/routes/_authed/servers/mobile-view.test.ts
new file mode 100644
index 00000000..27458b76
--- /dev/null
+++ b/apps/web/src/routes/_authed/servers/mobile-view.test.ts
@@ -0,0 +1,20 @@
+import { describe, expect, it } from 'vitest'
+import { resolveInitialServersView } from './components/mobile-view'
+
+describe('resolveInitialServersView', () => {
+  it('uses grid as the mobile default when there is no saved preference', () => {
+    expect(resolveInitialServersView({ isMobile: true, searchView: undefined, storedView: null })).toBe('grid')
+  })
+
+  it('uses table as the desktop default when there is no saved preference', () => {
+    expect(resolveInitialServersView({ isMobile: false, searchView: undefined, storedView: null })).toBe('table')
+  })
+
+  it('keeps explicit route search above viewport defaults', () => {
+    expect(resolveInitialServersView({ isMobile: true, searchView: 'table', storedView: 'grid' })).toBe('table')
+  })
+
+  it('keeps the saved preference above viewport defaults', () => {
+    expect(resolveInitialServersView({ isMobile: true, searchView: undefined, storedView: 'table' })).toBe('table')
+  })
+})
diff --git a/apps/web/src/routes/_authed/settings/alerts.tsx b/apps/web/src/routes/_authed/settings/alerts.tsx
index a8d2cc9a..f449b407 100644
--- a/apps/web/src/routes/_authed/settings/alerts.tsx
+++ b/apps/web/src/routes/_authed/settings/alerts.tsx
@@ -228,7 +228,7 @@ function AlertsPage() {
 
       <div className="max-w-2xl space-y-6">
         <div className="rounded-lg border bg-card p-6">
-          <div className="mb-4 flex items-center justify-between">
+          <div className="mb-4 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
             <h2 className="font-semibold text-lg">{t('alerts.rules')}</h2>
             <Button onClick={() => setShowForm(!showForm)} size="sm" variant="outline">
               <Plus className="size-4" />
@@ -247,7 +247,7 @@ function AlertsPage() {
                 value={name}
               />
 
-              <div className="flex gap-3">
+              <div className="flex flex-col gap-3 sm:flex-row">
                 <Select
                   items={{ always: t('alerts.trigger_always'), once: t('alerts.trigger_once') }}
                   onValueChange={(v) => v !== null && setTriggerMode(v)}
@@ -481,8 +481,11 @@ function AlertsPage() {
                 const items: AlertRuleItem[] = JSON.parse(rule.rules_json || '[]')
                 return (
                   <>
-                    <div className="flex items-center justify-between px-4 py-3" key={rule.id}>
-                      <div className="flex items-center gap-3">
+                    <div
+                      className="flex flex-col gap-3 px-4 py-3 sm:flex-row sm:items-center sm:justify-between"
+                      key={rule.id}
+                    >
+                      <div className="flex min-w-0 items-center gap-3">
                         <AlertTriangle
                           className={`size-4 ${rule.enabled ? 'text-amber-500' : 'text-muted-foreground'}`}
                         />
diff --git a/apps/web/src/routes/_authed/settings/api-keys.tsx b/apps/web/src/routes/_authed/settings/api-keys.tsx
index 9ae6facc..461e6a69 100644
--- a/apps/web/src/routes/_authed/settings/api-keys.tsx
+++ b/apps/web/src/routes/_authed/settings/api-keys.tsx
@@ -137,10 +137,13 @@ function ApiKeysPage() {
           {!isLoading && keys && keys.length > 0 && (
             <div className="divide-y">
               {keys.map((apiKey) => (
-                <div className="flex items-center justify-between px-6 py-3" key={apiKey.id}>
-                  <div>
+                <div
+                  className="flex flex-col gap-3 px-4 py-3 sm:flex-row sm:items-center sm:justify-between sm:px-6"
+                  key={apiKey.id}
+                >
+                  <div className="min-w-0">
                     <p className="font-medium text-sm">{apiKey.name}</p>
-                    <div className="flex gap-3 text-muted-foreground text-xs">
+                    <div className="flex flex-wrap gap-x-3 gap-y-1 text-muted-foreground text-xs">
                       <span className="font-mono">
                         {t('api_keys.prefix')}
                         {apiKey.key_prefix}
diff --git a/apps/web/src/routes/_authed/settings/appearance.tsx b/apps/web/src/routes/_authed/settings/appearance.tsx
index f7a7822c..43fcb724 100644
--- a/apps/web/src/routes/_authed/settings/appearance.tsx
+++ b/apps/web/src/routes/_authed/settings/appearance.tsx
@@ -175,7 +175,7 @@ export function ThemeGrid() {
         <h2 className="mb-1 font-semibold text-lg">{t('appearance.color_theme')}</h2>
         <p className="mb-4 text-muted-foreground text-sm">{t('appearance.color_theme_description')}</p>
 
-        <div className="grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-4">
+        <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-4">
           {themes.map((themeInfo) => (
             <ThemeCard
               active={isActive(`preset:${themeInfo.id}`)}
@@ -189,12 +189,12 @@ export function ThemeGrid() {
       </div>
 
       <div className="rounded-lg border bg-card p-6">
-        <div className="mb-4 flex items-center justify-between gap-3">
-          <div>
+        <div className="mb-4 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+          <div className="min-w-0">
             <h2 className="font-semibold text-lg">{t('appearance.custom_themes.title')}</h2>
             <p className="text-muted-foreground text-sm">{t('appearance.custom_themes.description')}</p>
           </div>
-          <div className="flex gap-2">
+          <div className="flex flex-wrap gap-2">
             <input
               accept="application/json"
               className="hidden"
@@ -213,7 +213,7 @@ export function ThemeGrid() {
           </div>
         </div>
 
-        <div className="grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-4">
+        <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-4">
           {(customThemes ?? []).map((customTheme) => (
             <CustomThemeCard
               active={isActive(`custom:${customTheme.id}`)}
diff --git a/apps/web/src/routes/_authed/settings/audit-logs.tsx b/apps/web/src/routes/_authed/settings/audit-logs.tsx
index ef4a477d..5255e6fc 100644
--- a/apps/web/src/routes/_authed/settings/audit-logs.tsx
+++ b/apps/web/src/routes/_authed/settings/audit-logs.tsx
@@ -95,10 +95,10 @@ function AuditLogsPage() {
   })
 
   return (
-    <div>
+    <div className="w-full min-w-0 max-w-[calc(100vw-1.5rem)] overflow-hidden sm:max-w-full">
       <h1 className="mb-6 font-bold text-2xl">{t('audit.title')}</h1>
 
-      <div className="max-w-4xl">
+      <div className="w-full min-w-0 max-w-4xl">
         {isLoading && !data ? (
           <div className="space-y-2">
             {Array.from({ length: 5 }, (_, i) => (
diff --git a/apps/web/src/routes/_authed/settings/capabilities.tsx b/apps/web/src/routes/_authed/settings/capabilities.tsx
index afc4c629..4554f23c 100644
--- a/apps/web/src/routes/_authed/settings/capabilities.tsx
+++ b/apps/web/src/routes/_authed/settings/capabilities.tsx
@@ -199,14 +199,14 @@ export function CapabilitiesPage() {
   }
 
   return (
-    <div>
-      <div className="mb-6">
+    <div className="w-full min-w-0 max-w-[calc(100vw-1.5rem)] overflow-hidden sm:max-w-full">
+      <div className="mb-6 min-w-0">
         <h1 className="font-bold text-2xl">{t('capabilities.title')}</h1>
         <p className="text-muted-foreground text-sm">{t('capabilities.description')}</p>
       </div>
 
-      <div className="mb-4 flex items-center gap-3">
-        <div className="relative max-w-sm flex-1">
+      <div className="mb-4 flex min-w-0 flex-col gap-3 sm:flex-row sm:items-center">
+        <div className="relative w-full min-w-0 max-w-sm flex-1">
           <Search
             aria-hidden="true"
             className="absolute top-1/2 left-3 size-4 -translate-y-1/2 text-muted-foreground"
@@ -222,7 +222,7 @@ export function CapabilitiesPage() {
           />
         </div>
         {selectedIds.length > 0 && (
-          <div className="flex items-center gap-2">
+          <div className="flex min-w-0 flex-wrap items-center gap-2">
             <span className="text-muted-foreground text-sm">
               {t('capabilities.selected', { count: selectedIds.length })}
             </span>
diff --git a/apps/web/src/routes/_authed/settings/index.tsx b/apps/web/src/routes/_authed/settings/index.tsx
index 32e1d274..a3ba3c2f 100644
--- a/apps/web/src/routes/_authed/settings/index.tsx
+++ b/apps/web/src/routes/_authed/settings/index.tsx
@@ -57,17 +57,17 @@ function SettingsPage() {
   }
 
   return (
-    <div>
+    <div className="w-full min-w-0 max-w-[calc(100vw-1.5rem)] overflow-hidden sm:max-w-full">
       <h1 className="mb-6 font-bold text-2xl">{t('title')}</h1>
 
-      <div className="max-w-xl space-y-6">
+      <div className="w-full min-w-0 max-w-xl space-y-6">
         <div className="rounded-lg border bg-card p-6">
           <h2 className="mb-1 font-semibold text-lg">{t('auto_discovery_key')}</h2>
           <p className="mb-4 text-muted-foreground text-sm">{t('auto_discovery_description')}</p>
 
           {config?.key ? (
-            <div className="flex items-center gap-2">
-              <div className="flex-1 rounded-md border bg-muted/50 px-3 py-2 font-mono text-sm">
+            <div className="flex min-w-0 flex-wrap items-center gap-2">
+              <div className="min-w-0 flex-1 truncate rounded-md border bg-muted/50 px-3 py-2 font-mono text-sm">
                 {showKey ? config.key : config.key.replace(/./g, '*')}
               </div>
               <Button
diff --git a/apps/web/src/routes/_authed/settings/mobile-devices.tsx b/apps/web/src/routes/_authed/settings/mobile-devices.tsx
index 8e110df1..6385037d 100644
--- a/apps/web/src/routes/_authed/settings/mobile-devices.tsx
+++ b/apps/web/src/routes/_authed/settings/mobile-devices.tsx
@@ -102,8 +102,8 @@ function MobileDevicesPage() {
 
       <div className="max-w-2xl space-y-6">
         <div className="rounded-lg border bg-card p-6">
-          <div className="mb-4 flex items-center justify-between">
-            <div>
+          <div className="mb-4 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+            <div className="min-w-0">
               <h2 className="font-semibold text-lg">{t('mobile.devices')}</h2>
               <p className="text-muted-foreground text-sm">{t('mobile.devices_description')}</p>
             </div>
@@ -123,12 +123,15 @@ function MobileDevicesPage() {
           {!isLoading && devices && devices.length > 0 && (
             <div className="divide-y rounded-md border">
               {devices.map((device) => (
-                <div className="flex items-center justify-between px-4 py-3" key={device.id}>
-                  <div className="flex items-center gap-3">
+                <div
+                  className="flex flex-col gap-3 px-4 py-3 sm:flex-row sm:items-center sm:justify-between"
+                  key={device.id}
+                >
+                  <div className="flex min-w-0 items-center gap-3">
                     <Smartphone aria-hidden="true" className="size-4 text-muted-foreground" />
                     <div>
                       <p className="font-medium text-sm">{device.device_name || t('mobile.unknown_device')}</p>
-                      <div className="flex gap-3 text-muted-foreground text-xs">
+                      <div className="flex flex-wrap gap-x-3 gap-y-1 text-muted-foreground text-xs">
                         <span>
                           {t('mobile.paired')} {new Date(device.created_at).toLocaleDateString()}
                         </span>
diff --git a/apps/web/src/routes/_authed/settings/network-probes.tsx b/apps/web/src/routes/_authed/settings/network-probes.tsx
index df01321d..d96ecbef 100644
--- a/apps/web/src/routes/_authed/settings/network-probes.tsx
+++ b/apps/web/src/routes/_authed/settings/network-probes.tsx
@@ -342,20 +342,20 @@ export function NetworkProbeSettingsPage() {
   })
 
   return (
-    <div className="flex min-h-0 flex-1 flex-col overflow-hidden">
-      <h1 className="mb-6 font-bold text-2xl">{t('settings_title')}</h1>
+    <div className="flex min-h-0 w-full min-w-0 max-w-[calc(100vw-1.5rem)] flex-1 flex-col overflow-hidden sm:max-w-full">
+      <h1 className="mb-6 min-w-0 font-bold text-2xl">{t('settings_title')}</h1>
       <Tabs
-        className="flex min-h-0 flex-1 flex-col"
+        className="flex min-h-0 w-full min-w-0 max-w-full flex-1 flex-col"
         onValueChange={(value) => navigate({ search: { tab: value } })}
         value={activeTab}
       >
-        <div className="flex max-w-4xl items-center justify-between">
-          <TabsList>
+        <div className="flex w-full max-w-full flex-col items-stretch gap-3 sm:max-w-4xl sm:flex-row sm:items-center sm:justify-between">
+          <TabsList className="w-full sm:w-auto">
             <TabsTrigger value="targets">{t('target_management')}</TabsTrigger>
             <TabsTrigger value="settings">{t('global_settings')}</TabsTrigger>
           </TabsList>
           {activeTab === 'targets' && (
-            <Button onClick={openAddDialog} size="sm" variant="outline">
+            <Button className="w-full sm:w-auto" onClick={openAddDialog} size="sm" variant="outline">
               <Plus className="size-4" />
               {t('add_target')}
             </Button>
@@ -373,7 +373,11 @@ export function NetworkProbeSettingsPage() {
           )}
 
           {!targetsLoading && (
-            <DataTable className="flex h-full max-w-4xl flex-col" noResults={t('no_targets')} table={targetsTable} />
+            <DataTable
+              className="flex h-full w-full min-w-0 max-w-full sm:max-w-4xl"
+              noResults={t('no_targets')}
+              table={targetsTable}
+            />
           )}
         </TabsContent>
 
diff --git a/apps/web/src/routes/_authed/settings/notifications.tsx b/apps/web/src/routes/_authed/settings/notifications.tsx
index 1b739922..57d82023 100644
--- a/apps/web/src/routes/_authed/settings/notifications.tsx
+++ b/apps/web/src/routes/_authed/settings/notifications.tsx
@@ -546,7 +546,7 @@ function NotificationsPage() {
       <div className="max-w-2xl space-y-6">
         {/* Create notification */}
         <div className="rounded-lg border bg-card p-6">
-          <div className="mb-4 flex items-center justify-between">
+          <div className="mb-4 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
             <h2 className="font-semibold text-lg">{t('notifications.channels')}</h2>
             <Button onClick={toggleChannelForm} size="sm" variant="outline">
               <Plus className="size-4" />
@@ -614,7 +614,7 @@ function NotificationsPage() {
                     value={configFields[key] ?? ''}
                   />
                 ))}
-              <div className="flex items-center justify-between">
+              <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
                 <Label className="text-sm">{t('notifications.enabled_label')}</Label>
                 <Switch checked={isEnabled} onCheckedChange={setIsEnabled} />
               </div>
@@ -642,7 +642,10 @@ function NotificationsPage() {
           {notifications && notifications.length > 0 && (
             <div className="divide-y rounded-md border">
               {notifications.map((n) => (
-                <div className="flex items-center justify-between px-4 py-3" key={n.id}>
+                <div
+                  className="flex flex-col gap-3 px-4 py-3 sm:flex-row sm:items-center sm:justify-between"
+                  key={n.id}
+                >
                   <div className="flex items-center gap-3">
                     <Bell className="size-4 text-muted-foreground" />
                     <div>
@@ -689,7 +692,7 @@ function NotificationsPage() {
 
         {/* Notification Groups */}
         <div className="rounded-lg border bg-card p-6">
-          <div className="mb-4 flex items-center justify-between">
+          <div className="mb-4 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
             <h2 className="font-semibold text-lg">{t('notifications.groups')}</h2>
             <Button onClick={toggleGroupForm} size="sm" variant="outline">
               <Plus className="size-4" />
@@ -743,7 +746,10 @@ function NotificationsPage() {
               {groups.map((g) => {
                 const ids = parseGroupIds(g.notification_ids_json)
                 return (
-                  <div className="flex items-center justify-between px-4 py-3" key={g.id}>
+                  <div
+                    className="flex flex-col gap-3 px-4 py-3 sm:flex-row sm:items-center sm:justify-between"
+                    key={g.id}
+                  >
                     <div>
                       <p className="font-medium text-sm">{g.name}</p>
                       <p className="text-muted-foreground text-xs">
diff --git a/apps/web/src/routes/_authed/settings/ping-tasks.tsx b/apps/web/src/routes/_authed/settings/ping-tasks.tsx
index 578b6520..255256e5 100644
--- a/apps/web/src/routes/_authed/settings/ping-tasks.tsx
+++ b/apps/web/src/routes/_authed/settings/ping-tasks.tsx
@@ -209,7 +209,7 @@ function PingTasksPage() {
 
       <div className="max-w-3xl space-y-6">
         <div className="rounded-lg border bg-card p-6">
-          <div className="mb-4 flex items-center justify-between">
+          <div className="mb-4 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
             <h2 className="font-semibold text-lg">{t('ping.probe_tasks')}</h2>
             <Button onClick={() => setShowForm(!showForm)} size="sm" variant="outline">
               <Plus className="size-4" />
@@ -227,7 +227,7 @@ function PingTasksPage() {
                 value={name}
               />
 
-              <div className="flex gap-3">
+              <div className="flex flex-col gap-3 sm:flex-row">
                 <Select
                   items={probeTypeLabels}
                   onValueChange={(value) => setProbeType(value as ProbeType)}
@@ -317,7 +317,7 @@ function PingTasksPage() {
                 const isExpanded = expandedTaskId === task.id
                 return (
                   <div key={task.id}>
-                    <div className="flex items-center justify-between px-4 py-3">
+                    <div className="flex flex-col gap-3 px-4 py-3 sm:flex-row sm:items-center sm:justify-between">
                       <div className="flex items-center gap-3">
                         <Activity className={`size-4 ${task.enabled ? 'text-green-500' : 'text-muted-foreground'}`} />
                         <div>
diff --git a/apps/web/src/routes/_authed/settings/security.tsx b/apps/web/src/routes/_authed/settings/security.tsx
index a9950329..7b9103ad 100644
--- a/apps/web/src/routes/_authed/settings/security.tsx
+++ b/apps/web/src/routes/_authed/settings/security.tsx
@@ -331,8 +331,11 @@ function OAuthAccountsSection() {
       {!isLoading && accounts && accounts.length > 0 && (
         <div className="space-y-2">
           {accounts.map((acct) => (
-            <div className="flex items-center justify-between rounded-md border px-4 py-3" key={acct.id}>
-              <div>
+            <div
+              className="flex flex-col gap-3 rounded-md border px-4 py-3 sm:flex-row sm:items-center sm:justify-between"
+              key={acct.id}
+            >
+              <div className="min-w-0">
                 <div className="flex items-center gap-2">
                   <span className="rounded bg-muted px-1.5 py-0.5 font-mono text-xs uppercase">{acct.provider}</span>
                   <span className="font-medium text-sm">
diff --git a/apps/web/src/routes/_authed/settings/service-monitors.tsx b/apps/web/src/routes/_authed/settings/service-monitors.tsx
index 41046de3..1f8783e6 100644
--- a/apps/web/src/routes/_authed/settings/service-monitors.tsx
+++ b/apps/web/src/routes/_authed/settings/service-monitors.tsx
@@ -732,16 +732,16 @@ export function ServiceMonitorsPage() {
   }
 
   return (
-    <div>
-      <div className="mb-6 flex items-center justify-between">
-        <h1 className="font-bold text-2xl">{t('page.title')}</h1>
-        <Button onClick={openCreate} size="sm">
+    <div className="w-full min-w-0 max-w-[calc(100vw-1.5rem)] overflow-hidden sm:max-w-full">
+      <div className="mb-6 flex w-full min-w-0 max-w-full flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+        <h1 className="min-w-0 font-bold text-2xl">{t('page.title')}</h1>
+        <Button className="w-full sm:w-auto" onClick={openCreate} size="sm">
           <Plus className="size-4" />
           {tCommon('actions.addMonitor')}
         </Button>
       </div>
 
-      <div className="max-w-5xl">
+      <div className="w-full min-w-0 max-w-full lg:max-w-5xl">
         {isLoading && (
           <div className="space-y-2">
             {Array.from({ length: 3 }, (_, i) => (
@@ -761,7 +761,7 @@ export function ServiceMonitorsPage() {
         )}
 
         {monitors && monitors.length > 0 && (
-          <div className="rounded-lg border">
+          <div className="min-w-0 overflow-hidden rounded-lg border">
             <Table>
               <TableHeader>
                 <TableRow>
diff --git a/apps/web/src/routes/_authed/settings/status-pages.tsx b/apps/web/src/routes/_authed/settings/status-pages.tsx
index edabd533..a62fae11 100644
--- a/apps/web/src/routes/_authed/settings/status-pages.tsx
+++ b/apps/web/src/routes/_authed/settings/status-pages.tsx
@@ -339,7 +339,7 @@ function StatusPagesTab({ servers }: { servers: ServerResponse[] }) {
 
   return (
     <div>
-      <div className="mb-4 flex items-center justify-between">
+      <div className="mb-4 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
         <p className="text-muted-foreground text-sm">{t('status_pages.tab_description')}</p>
         <Button
           onClick={() => {
@@ -730,7 +730,7 @@ function IncidentsTab({ servers }: { servers: ServerResponse[] }) {
 
   return (
     <div>
-      <div className="mb-4 flex items-center justify-between">
+      <div className="mb-4 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
         <p className="text-muted-foreground text-sm">{t('incidents.tab_description')}</p>
         <Button
           onClick={() => {
@@ -1055,7 +1055,7 @@ function MaintenanceTab({ servers }: { servers: ServerResponse[] }) {
 
   return (
     <div>
-      <div className="mb-4 flex items-center justify-between">
+      <div className="mb-4 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
         <p className="text-muted-foreground text-sm">{t('maintenance.tab_description')}</p>
         <Button
           onClick={() => {
diff --git a/apps/web/src/routes/_authed/settings/users.tsx b/apps/web/src/routes/_authed/settings/users.tsx
index 2faa7d49..7141966a 100644
--- a/apps/web/src/routes/_authed/settings/users.tsx
+++ b/apps/web/src/routes/_authed/settings/users.tsx
@@ -107,7 +107,7 @@ function UsersPage() {
 
       <div className="max-w-2xl space-y-6">
         <div className="rounded-lg border bg-card p-6">
-          <div className="mb-4 flex items-center justify-between">
+          <div className="mb-4 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
             <h2 className="font-semibold text-lg">{t('users.count')}</h2>
             <Button onClick={() => setShowForm(!showForm)} size="sm" variant="outline">
               <Plus className="size-4" />
@@ -173,8 +173,11 @@ function UsersPage() {
           {users && users.length > 0 && (
             <div className="divide-y rounded-md border">
               {users.map((user) => (
-                <div className="flex items-center justify-between px-4 py-3" key={user.id}>
-                  <div className="flex items-center gap-3">
+                <div
+                  className="flex flex-col gap-3 px-4 py-3 sm:flex-row sm:items-center sm:justify-between"
+                  key={user.id}
+                >
+                  <div className="flex min-w-0 items-center gap-3">
                     <UserCog aria-hidden="true" className="size-4 text-muted-foreground" />
                     <div>
                       <p className="font-medium text-sm">
diff --git a/apps/web/src/routes/_authed/terminal.$serverId.tsx b/apps/web/src/routes/_authed/terminal.$serverId.tsx
index 3a355ea7..dda98b80 100644
--- a/apps/web/src/routes/_authed/terminal.$serverId.tsx
+++ b/apps/web/src/routes/_authed/terminal.$serverId.tsx
@@ -68,17 +68,17 @@ function TerminalPage() {
   )
 
   return (
-    <div className="flex h-full flex-col">
-      <div className="flex items-center gap-3 border-b px-4 py-2">
+    <div className="flex min-h-0 min-w-0 flex-1 flex-col">
+      <div className="flex flex-wrap items-center gap-2 border-b px-3 py-2 sm:gap-3 sm:px-4">
         <Link params={{ id: serverId }} search={{ range: 'realtime' }} to="/servers/$id">
           <Button size="sm" variant="ghost">
             <ArrowLeft className="size-4" />
             {t('back')}
           </Button>
         </Link>
-        <h1 className="font-semibold text-lg">{t('title')}</h1>
-        <span className="text-muted-foreground text-sm">{serverId.slice(0, 8)}...</span>
-        <div className="ml-auto flex items-center gap-2">
+        <h1 className="font-semibold text-base sm:text-lg">{t('title')}</h1>
+        <span className="text-muted-foreground text-xs sm:text-sm">{serverId.slice(0, 8)}...</span>
+        <div className="ml-auto flex min-w-0 flex-wrap items-center justify-end gap-2">
           <span className={`inline-block size-2 rounded-full ${statusColor(status)}`} />
           <span className="text-muted-foreground text-xs">{statusLabel(status, t)}</span>
           {error && <span className="text-red-500 text-xs">{error}</span>}
@@ -89,7 +89,7 @@ function TerminalPage() {
           )}
         </div>
       </div>
-      <div className="flex-1 p-2">
+      <div className="min-h-0 flex-1 p-1 sm:p-2">
         <TerminalView onData={handleData} onResize={handleResize} writeRef={writeRef} />
       </div>
     </div>
diff --git a/apps/web/src/routes/_authed/traffic/index.tsx b/apps/web/src/routes/_authed/traffic/index.tsx
index 044ccd7f..1531dbc4 100644
--- a/apps/web/src/routes/_authed/traffic/index.tsx
+++ b/apps/web/src/routes/_authed/traffic/index.tsx
@@ -265,7 +265,7 @@ export function TrafficPage() {
   }
 
   return (
-    <div>
+    <div className="min-w-0">
       <h1 className="mb-6 font-bold text-2xl">{t('traffic_overview_title')}</h1>
 
       {hasOverviewData ? (
@@ -283,7 +283,7 @@ export function TrafficPage() {
           </div>
 
           {/* Server traffic ranking table */}
-          <div className="mb-6 rounded-lg border">
+          <div className="mb-6 min-w-0 overflow-hidden rounded-lg border">
             <Table>
               <TableHeader>
                 <TableRow>
diff --git a/apps/web/src/routes/login.tsx b/apps/web/src/routes/login.tsx
index 7375d325..ad329d85 100644
--- a/apps/web/src/routes/login.tsx
+++ b/apps/web/src/routes/login.tsx
@@ -167,7 +167,7 @@ function OAuthButtons() {
         </div>
       </div>
 
-      <div className={`grid gap-2 ${providers.length === 1 ? 'grid-cols-1' : 'grid-cols-2'}`}>
+      <div className={`grid gap-2 ${providers.length === 1 ? 'grid-cols-1' : 'sm:grid-cols-2'}`}>
         {providers.map((provider) => {
           const config = providerConfig[provider]
           if (!config) {

From 25216fe729df97af60beff5c7d86f09d289f22ab Mon Sep 17 00:00:00 2001
From: ZingerLittleBee <6970999@gmail.com>
Date: Sat, 16 May 2026 19:19:30 +0800
Subject: [PATCH 2/3] test(web): colocate mobile-view test with its module

Move mobile-view.test.ts into the components/ directory so it sits
beside mobile-view.ts, matching the index-cells test layout.
---
 .../routes/_authed/servers/{ => components}/mobile-view.test.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)
 rename apps/web/src/routes/_authed/servers/{ => components}/mobile-view.test.ts (92%)

diff --git a/apps/web/src/routes/_authed/servers/mobile-view.test.ts b/apps/web/src/routes/_authed/servers/components/mobile-view.test.ts
similarity index 92%
rename from apps/web/src/routes/_authed/servers/mobile-view.test.ts
rename to apps/web/src/routes/_authed/servers/components/mobile-view.test.ts
index 27458b76..1d6c2ac6 100644
--- a/apps/web/src/routes/_authed/servers/mobile-view.test.ts
+++ b/apps/web/src/routes/_authed/servers/components/mobile-view.test.ts
@@ -1,5 +1,5 @@
 import { describe, expect, it } from 'vitest'
-import { resolveInitialServersView } from './components/mobile-view'
+import { resolveInitialServersView } from './mobile-view'
 
 describe('resolveInitialServersView', () => {
   it('uses grid as the mobile default when there is no saved preference', () => {

From 5fc7ae13b38558b40cb76a0ce6149eed63f95f7a Mon Sep 17 00:00:00 2001
From: ZingerLittleBee <6970999@gmail.com>
Date: Sat, 16 May 2026 19:35:25 +0800
Subject: [PATCH 3/3] fix(web): clamp table page width so mobile tables scroll
 horizontally

The servers table view and traffic ranking table were missing the
max-w-[calc(100vw-1.5rem)] page-root constraint that other table
pages already use. Without a definite width ceiling the table-fixed
+ min-w-max intrinsic width propagated up through main, so the
ScrollArea viewport equalled the table width and columns were
clipped unreachably at 375px instead of scrolling. Add the
established page-root clamp and mirror the ui/data-table max-w-full
wrapper on the shared DataTable.
---
 apps/web/src/components/data-table/data-table.tsx | 2 +-
 apps/web/src/routes/_authed/servers/index.tsx     | 2 +-
 apps/web/src/routes/_authed/traffic/index.tsx     | 4 ++--
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/apps/web/src/components/data-table/data-table.tsx b/apps/web/src/components/data-table/data-table.tsx
index 0b9030eb..cc906db8 100644
--- a/apps/web/src/components/data-table/data-table.tsx
+++ b/apps/web/src/components/data-table/data-table.tsx
@@ -14,7 +14,7 @@ export function DataTable<TData>({ table, actionBar, children, className, ...pro
   return (
     <div className={cn('flex w-full min-w-0 flex-col gap-2.5 overflow-hidden', className)} {...props}>
       {children}
-      <div className="min-w-0 overflow-hidden rounded-md border" data-testid="data-table-scroll">
+      <div className="min-w-0 max-w-full overflow-hidden rounded-md border" data-testid="data-table-scroll">
         <Table className="table-fixed [&_td]:px-3 [&_th]:px-3">
           <TableHeader>
             {table.getHeaderGroups().map((headerGroup) => (
diff --git a/apps/web/src/routes/_authed/servers/index.tsx b/apps/web/src/routes/_authed/servers/index.tsx
index 8cf94e4d..fe1e3740 100644
--- a/apps/web/src/routes/_authed/servers/index.tsx
+++ b/apps/web/src/routes/_authed/servers/index.tsx
@@ -333,7 +333,7 @@ function ServersListPage() {
   }
 
   return (
-    <div className="min-w-0">
+    <div className="w-full min-w-0 max-w-[calc(100vw-1.5rem)] overflow-hidden sm:max-w-full">
       <div className="mb-6 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
         <div className="min-w-0">
           <h1 className="font-bold text-2xl">{t('title')}</h1>
diff --git a/apps/web/src/routes/_authed/traffic/index.tsx b/apps/web/src/routes/_authed/traffic/index.tsx
index 1531dbc4..e02e3b80 100644
--- a/apps/web/src/routes/_authed/traffic/index.tsx
+++ b/apps/web/src/routes/_authed/traffic/index.tsx
@@ -265,7 +265,7 @@ export function TrafficPage() {
   }
 
   return (
-    <div className="min-w-0">
+    <div className="w-full min-w-0 max-w-[calc(100vw-1.5rem)] overflow-hidden sm:max-w-full">
       <h1 className="mb-6 font-bold text-2xl">{t('traffic_overview_title')}</h1>
 
       {hasOverviewData ? (
@@ -283,7 +283,7 @@ export function TrafficPage() {
           </div>
 
           {/* Server traffic ranking table */}
-          <div className="mb-6 min-w-0 overflow-hidden rounded-lg border">
+          <div className="mb-6 min-w-0 max-w-full overflow-hidden rounded-lg border">
             <Table>
               <TableHeader>
                 <TableRow>