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..cc906db8 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 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/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.test.ts b/apps/web/src/routes/_authed/servers/components/mobile-view.test.ts
new file mode 100644
index 00000000..1d6c2ac6
--- /dev/null
+++ b/apps/web/src/routes/_authed/servers/components/mobile-view.test.ts
@@ -0,0 +1,20 @@
+import { describe, expect, it } from 'vitest'
+import { resolveInitialServersView } from './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/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..fe1e3740 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="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>
           <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/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..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>
+    <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 rounded-lg border">
+          <div className="mb-6 min-w-0 max-w-full 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) {