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/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>
   );
 }