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/admin/users/user-permission-matrix.tsx

@@ -12,6 +12,8 @@ import { Button } from '@/components/ui/button';
 import { Label } from '@/components/ui/label';
 import { ScrollArea } from '@/components/ui/scroll-area';
 import { apiFetch } from '@/lib/api/client';
+import { formatEnum } from '@/lib/constants';
+import { WarningCallout } from '@/components/ui/warning-callout';
 import { cn } from '@/lib/utils';
 
 /**
@@ -103,7 +105,7 @@ const PERMISSION_LEAVES: Record<string, string[]> = {
 };
 
 function formatAction(action: string): string {
-  return action.replace(/_/g, ' ').replace(/\b\w/g, (c) => c.toUpperCase());
+  return formatEnum(action);
 }
 
 type Overrides = Record<string, Record<string, boolean>>;
@@ -223,13 +225,13 @@ export function UserPermissionMatrix({ userId }: UserPermissionMatrixProps) {
 
   return (
     <div className="space-y-3">
-      <div className="rounded-md border border-amber-200 bg-amber-50 px-3 py-2 text-xs text-amber-900">
-        <p>
+      <WarningCallout icon={false}>
+        <span className="text-xs">
           Permission overrides save <strong>on the button below</strong>, separately from the
-          Profile &amp; role tab. Switching tabs or closing the drawer without clicking
-          <strong> Save overrides</strong> drops your changes.
-        </p>
-      </div>
+          Profile &amp; role tab. Switching tabs or closing the drawer without clicking{' '}
+          <strong>Save overrides</strong> drops your changes.
+        </span>
+      </WarningCallout>
       <p className="text-xs text-muted-foreground">
         Each toggle defaults to <strong>Inherit</strong> (role + port override decide). Switch to
         <strong> Grant</strong> or <strong>Deny</strong> to force the value for this user only.