fix(audit-wave-9): standardize on Sheet for previews; doctrine in CLAUDE.md

Swap the one outlier (client-interests-tab.tsx) from Vaul Drawer to
Sheet side=right so every detail-preview surface uses the same
primitive. Document the doctrine: Sheet for side panels on both desktop
and mobile; Vaul Drawer reserved for mobile-only bottom-sheet UX
(currently just MoreSheet).

Closes ui/ux M11.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

src/components/clients/client-interests-tab.tsx

@@ -11,7 +11,7 @@ import { ArrowRight, CheckCircle2, ChevronRight, Circle, Plus } from 'lucide-rea
 import { Button } from '@/components/ui/button';
 import { EmptyState } from '@/components/shared/empty-state';
 import { Skeleton } from '@/components/ui/skeleton';
-import { Drawer, DrawerContent, DrawerHeader, DrawerTitle } from '@/components/shared/drawer';
+import { Sheet, SheetContent, SheetHeader, SheetTitle } from '@/components/ui/sheet';
 import { apiFetch } from '@/lib/api/client';
 import { PIPELINE_STAGES, type PipelineStage } from '@/lib/constants';
 import { cn } from '@/lib/utils';
@@ -46,10 +46,10 @@ function InterestRowItem({
   const yachtLabel = interest.yachtName ?? null;
 
   return (
-    // Tap opens a bottom-sheet preview drawer rather than navigating to the
-    // full interest page. The drawer covers ~80% of mobile interactions
-    // ("what stage is this at, when did we last touch it"). For deeper
-    // edits the drawer has an "Open full page" CTA.
+    // Tap opens a right-side Sheet preview rather than navigating to the
+    // full interest page. The sheet covers ~80% of interactions ("what
+    // stage is this at, when did we last touch it"). For deeper edits
+    // the sheet has an "Open full page" CTA.
     <button
       type="button"
       onClick={() => onOpen(interest)}
@@ -214,17 +214,17 @@ function InterestPreviewDrawer({
   const notesPreview = fullDetail?.notes?.trim() || null;
 
   return (
-    <Drawer
+    <Sheet
       open={open}
       onOpenChange={(next) => {
         if (!next) onClose();
       }}
     >
-      <DrawerContent className="max-h-[85vh]">
-        <DrawerHeader>
-          <div className="flex items-start justify-between gap-3">
+      <SheetContent side="right" className="w-full overflow-y-auto sm:max-w-md">
+        <SheetHeader>
+          <div className="flex items-start justify-between gap-3 pr-8">
             <div className="min-w-0 flex-1">
-              <DrawerTitle className="truncate">{berthLabel}</DrawerTitle>
+              <SheetTitle className="truncate text-left">{berthLabel}</SheetTitle>
               {yachtLabel ? (
                 <p className="mt-0.5 truncate text-sm text-muted-foreground">{yachtLabel}</p>
               ) : null}
@@ -240,9 +240,9 @@ function InterestPreviewDrawer({
               </span>
             ) : null}
           </div>
-        </DrawerHeader>
+        </SheetHeader>
 
-        <div className="space-y-5 overflow-y-auto px-4 pb-4">
+        <div className="mt-5 space-y-5">
           {/* Pipeline-stepper segmented bar - the same primitive used on the
               row card, so the at-a-glance progress hint is consistent
               across surfaces. */}
@@ -357,8 +357,8 @@ function InterestPreviewDrawer({
             </Link>
           </Button>
         </div>
-      </DrawerContent>
-    </Drawer>
+      </SheetContent>
+    </Sheet>
   );
 }