Make skeleton widths caller-controlled and sized

TextSkeleton and HeadingSkeleton baked w-full into their shared base.
Under tailwind-variants/lite (no tailwind-merge) that collided with the
caller's width class and won by stylesheet order, so every skeleton
ignored its width: bars stretched full in column contexts and collapsed
in flex rows.

Drop w-full from the base so the single caller width applies, matching
ButtonSkeleton/AvatarSkeleton. Size the compliance-portal TopBar and
Hero skeleton bars to roughly match their English copy, and add a rule
so skeleton widths are revisited when en-US strings change.

Signed-off-by: Émile Ré <emile@probo.com>

apps/compliance-portal/src/components/Hero/HeroSkeleton.tsx

@@ -19,7 +19,13 @@ import { HeaderBand } from "#/components/HeaderBand/HeaderBand";
 
 import { hero, organizationContactInfo } from "./variants";
 
-const CONTACT_ITEM_KEYS = ["website", "email", "location"] as const;
+// Width per contact item, roughly sized to its typical content (hostname /
+// email / address). See .cursor/rules/skeleton-width-sync.mdc.
+const CONTACT_ITEMS = [
+  { key: "website", width: "w-28" },
+  { key: "email", width: "w-40" },
+  { key: "location", width: "w-36" },
+] as const;
 
 // Loading placeholder paired with Hero: reuses the same layout slots with
 // skeleton primitives. Imports no Relay, so it renders instantly.
@@ -31,13 +37,13 @@ export function HeroSkeleton() {
     <HeaderBand>
       <div className={content()}>
         <div className={section()}>
-          <HeadingSkeleton size={8} className="w-96" />
+          <HeadingSkeleton size={8} className="w-80" />
           <TextSkeleton size={2} className="w-full max-w-2xl" />
         </div>
         <div className={root()}>
-          {CONTACT_ITEM_KEYS.map(key => (
-            <div key={key} className={item()}>
-              <TextSkeleton size={2} className="w-28" />
+          {CONTACT_ITEMS.map(contact => (
+            <div key={contact.key} className={item()}>
+              <TextSkeleton size={2} className={contact.width} />
             </div>
           ))}
         </div>

apps/compliance-portal/src/components/TopBar/TopBarSkeleton.tsx

@@ -18,7 +18,14 @@ import { TextSkeleton } from "@probo/ui/src/v2/typography/TextSkeleton";
 
 import { topBar } from "./variants";
 
-const NAV_ITEM_KEYS = ["documents", "subprocessors", "updates", "requests"] as const;
+// Width per nav item, sized to its English label so the placeholder row reads
+// like the real nav. See .cursor/rules/skeleton-width-sync.mdc.
+const NAV_ITEMS = [
+  { key: "documents", width: "w-16" },
+  { key: "subprocessors", width: "w-24" },
+  { key: "updates", width: "w-12" },
+  { key: "requests", width: "w-14" },
+] as const;
 
 // Loading placeholder paired with TopBar: reuses the same layout slots with
 // skeleton primitives. Imports no Relay / Base UI, so it renders instantly.
@@ -30,14 +37,14 @@ export function TopBarSkeleton() {
       <div className={slots.inner()}>
         <div className={slots.brand()}>
           <AvatarSkeleton size={1} radius="small" />
-          <TextSkeleton size={2} className="w-20" />
+          <TextSkeleton size={2} className="w-24" />
         </div>
 
         <div className={slots.spacer()} />
 
         <nav className={slots.nav()}>
-          {NAV_ITEM_KEYS.map(key => (
-            <TextSkeleton key={key} size={2} className="mx-3 w-16" />
+          {NAV_ITEMS.map(item => (
+            <TextSkeleton key={item.key} size={2} className={`mx-3 ${item.width}`} />
           ))}
           <ButtonSkeleton size={2} />
         </nav>