From 2d1b50745a2f219144a917a9d1c4e2d8fbbd5065 Mon Sep 17 00:00:00 2001
From: Matt Ciaccio <matt@mac.home>
Date: Tue, 28 Apr 2026 12:10:21 +0200
Subject: [PATCH] style(mobile): responsive tabs + table overflow + hub
 flex-wrap (Phase A)

Adds <ResponsiveTabs> primitive that swaps the TabsList for a native Select on
phone-sized viewports (<640px). DetailLayout now routes its tab strip through it,
so every tabbed detail page gets the collapse for free. DataTable wraps the
Table in overflow-x-auto so wide column sets scroll horizontally instead of
breaking the layout under 768px. Documents-hub row swaps the fixed
grid-cols-[auto_1fr_auto_auto_auto_auto] for flex-wrap below sm: so signers /
status / dates stack instead of clipping.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/components/documents/documents-hub.tsx |  2 +-
 src/components/shared/data-table.tsx       | 15 +++--
 src/components/shared/detail-layout.tsx    | 42 ++----------
 src/components/shared/responsive-tabs.tsx  | 77 ++++++++++++++++++++++
 4 files changed, 92 insertions(+), 44 deletions(-)
 create mode 100644 src/components/shared/responsive-tabs.tsx

diff --git a/src/components/documents/documents-hub.tsx b/src/components/documents/documents-hub.tsx
index 9fd0914..76e6f70 100644
--- a/src/components/documents/documents-hub.tsx
+++ b/src/components/documents/documents-hub.tsx
@@ -142,7 +142,7 @@ export function DocumentsHub({ portSlug }: DocumentsHubProps) {
         key={doc.id}
         className="border-b last:border-b-0 transition-colors hover:bg-gradient-brand-soft/40"
       >
-        <div className="grid grid-cols-[auto_1fr_auto_auto_auto_auto] items-center gap-3 px-4 py-3 text-sm">
+        <div className="flex flex-wrap items-center gap-x-3 gap-y-1 px-4 py-3 text-sm sm:grid sm:grid-cols-[auto_1fr_auto_auto_auto_auto] sm:gap-3">
           <button
             type="button"
             aria-label={expanded ? 'Collapse signers' : 'Expand signers'}
diff --git a/src/components/shared/data-table.tsx b/src/components/shared/data-table.tsx
index bf56de4..747e574 100644
--- a/src/components/shared/data-table.tsx
+++ b/src/components/shared/data-table.tsx
@@ -115,17 +115,14 @@ export function DataTable<TData>({
         : undefined,
     },
     onRowSelectionChange: (updater) => {
-      const newSelection =
-        typeof updater === 'function' ? updater(rowSelectionState) : updater;
+      const newSelection = typeof updater === 'function' ? updater(rowSelectionState) : updater;
       setRowSelection(newSelection);
     },
     getRowId: getRowId as (row: TData, index: number) => string,
     enableRowSelection: !!bulkActions?.length,
   });
 
-  const selectedIds = Object.keys(rowSelectionState).filter(
-    (k) => rowSelectionState[k],
-  );
+  const selectedIds = Object.keys(rowSelectionState).filter((k) => rowSelectionState[k]);
 
   function handleSort(columnId: string) {
     if (!onSortChange) return;
@@ -147,7 +144,7 @@ export function DataTable<TData>({
 
   return (
     <div className="space-y-2">
-      <div className="rounded-md border">
+      <div className="rounded-md border overflow-x-auto">
         <Table>
           <TableHeader className="sticky top-0 z-10 bg-muted/50">
             {table.getHeaderGroups().map((headerGroup) => (
@@ -160,7 +157,11 @@ export function DataTable<TData>({
                       header.column.getCanSort() && onSortChange && 'cursor-pointer select-none',
                     )}
                     onClick={() => {
-                      if (header.column.getCanSort() && onSortChange && header.column.id !== 'select') {
+                      if (
+                        header.column.getCanSort() &&
+                        onSortChange &&
+                        header.column.id !== 'select'
+                      ) {
                         handleSort(header.column.id);
                       }
                     }}
diff --git a/src/components/shared/detail-layout.tsx b/src/components/shared/detail-layout.tsx
index d17b8cb..6eafc13 100644
--- a/src/components/shared/detail-layout.tsx
+++ b/src/components/shared/detail-layout.tsx
@@ -3,15 +3,9 @@
 import { useSearchParams, useRouter, usePathname } from 'next/navigation';
 import { Loader2 } from 'lucide-react';
 
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
-import { Badge } from '@/components/ui/badge';
+import { ResponsiveTabs, type ResponsiveTab } from '@/components/shared/responsive-tabs';
 
-export interface DetailTab {
-  id: string;
-  label: string;
-  content: React.ReactNode;
-  badge?: string | number;
-}
+export type DetailTab = ResponsiveTab;
 
 interface DetailLayoutProps {
   header: React.ReactNode;
@@ -21,18 +15,12 @@ interface DetailLayoutProps {
   actions?: React.ReactNode;
 }
 
-export function DetailLayout({
-  header,
-  tabs,
-  defaultTab,
-  isLoading,
-  actions,
-}: DetailLayoutProps) {
+export function DetailLayout({ header, tabs, defaultTab, isLoading, actions }: DetailLayoutProps) {
   const searchParams = useSearchParams();
   const router = useRouter();
   const pathname = usePathname();
 
-  const activeTab = searchParams.get('tab') ?? defaultTab ?? tabs[0]?.id;
+  const activeTab = searchParams.get('tab') ?? defaultTab ?? tabs[0]?.id ?? '';
 
   function handleTabChange(tabId: string) {
     const params = new URLSearchParams(searchParams.toString());
@@ -51,30 +39,12 @@ export function DetailLayout({
 
   return (
     <div className="space-y-6">
-      <div className="flex items-start justify-between gap-4">
+      <div className="flex items-start justify-between gap-4 flex-wrap">
         <div className="min-w-0 flex-1">{header}</div>
         {actions && <div className="flex items-center gap-2 shrink-0">{actions}</div>}
       </div>
 
-      <Tabs value={activeTab} onValueChange={handleTabChange}>
-        <TabsList>
-          {tabs.map((tab) => (
-            <TabsTrigger key={tab.id} value={tab.id} className="gap-1.5">
-              {tab.label}
-              {tab.badge !== undefined && tab.badge !== null && (
-                <Badge variant="secondary" className="px-1.5 py-0 text-xs">
-                  {tab.badge}
-                </Badge>
-              )}
-            </TabsTrigger>
-          ))}
-        </TabsList>
-        {tabs.map((tab) => (
-          <TabsContent key={tab.id} value={tab.id} className="mt-4">
-            {tab.content}
-          </TabsContent>
-        ))}
-      </Tabs>
+      <ResponsiveTabs tabs={tabs} value={activeTab} onValueChange={handleTabChange} />
     </div>
   );
 }
diff --git a/src/components/shared/responsive-tabs.tsx b/src/components/shared/responsive-tabs.tsx
new file mode 100644
index 0000000..802e100
--- /dev/null
+++ b/src/components/shared/responsive-tabs.tsx
@@ -0,0 +1,77 @@
+'use client';
+
+import { type ReactNode } from 'react';
+
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { Badge } from '@/components/ui/badge';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+
+export interface ResponsiveTab {
+  id: string;
+  label: string;
+  content: ReactNode;
+  badge?: string | number;
+}
+
+interface ResponsiveTabsProps {
+  tabs: ResponsiveTab[];
+  value: string;
+  onValueChange: (value: string) => void;
+}
+
+/**
+ * Tabs that collapse to a native <Select> on phone-sized viewports.
+ * Above sm: TabsList renders. At/below sm: a Select dropdown replaces the tab strip.
+ */
+export function ResponsiveTabs({ tabs, value, onValueChange }: ResponsiveTabsProps) {
+  return (
+    <Tabs value={value} onValueChange={onValueChange}>
+      {/* Mobile: select dropdown */}
+      <div className="sm:hidden">
+        <Select value={value} onValueChange={onValueChange}>
+          <SelectTrigger>
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            {tabs.map((tab) => (
+              <SelectItem key={tab.id} value={tab.id}>
+                <span className="flex items-center gap-1.5">
+                  {tab.label}
+                  {tab.badge !== undefined && tab.badge !== null && (
+                    <span className="text-xs text-muted-foreground">({tab.badge})</span>
+                  )}
+                </span>
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+      </div>
+
+      {/* Desktop / tablet: tab strip */}
+      <TabsList className="hidden sm:flex">
+        {tabs.map((tab) => (
+          <TabsTrigger key={tab.id} value={tab.id} className="gap-1.5">
+            {tab.label}
+            {tab.badge !== undefined && tab.badge !== null && (
+              <Badge variant="secondary" className="px-1.5 py-0 text-xs">
+                {tab.badge}
+              </Badge>
+            )}
+          </TabsTrigger>
+        ))}
+      </TabsList>
+
+      {tabs.map((tab) => (
+        <TabsContent key={tab.id} value={tab.id} className="mt-4">
+          {tab.content}
+        </TabsContent>
+      ))}
+    </Tabs>
+  );
+}