From 81529a391082bbe0c0b2fc8a2f107ed6652535a5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marc-Andr=C3=A9=20Bombeck?= <mbombeck@gmail.com>
Date: Sun, 2 Aug 2026 18:04:26 +0200
Subject: [PATCH] Give the shared-record banner the inline-action row shape
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The strip is new this release and had not been checked against the
design standards. It carried the shape §11 names as the anti-pattern: a
centred flex-wrap row whose gap-y drops the action onto its own line
once the name is long enough. The maintainership strip is the sibling
that already had an action and already had the right shape, so the two
now read the same — sentence on min-w-0 flex-1, way out on shrink-0,
beside it rather than under it.

The exit control was a 32px tap target. Leaving somebody else's record
on a phone is the one interaction in the whole banner stack, and it now
carries the standard's floor (min-h-11 sm:min-h-9).

The three strips also spell their icon size three ways for identical
CSS; they all use size-3.5 now.

Text tiers are unchanged and were already right: the person's name is
foreground because it is content, the read-only qualifier is muted
because it is meta.
---
 src/components/i18n/maintainership-banner.tsx |  4 +-
 src/components/layout/demo-banner.tsx         |  2 +-
 src/components/layout/offline-banner.tsx      |  2 +-
 .../layout/shared-record-banner.tsx           | 44 +++++++++++++------
 4 files changed, 34 insertions(+), 18 deletions(-)

diff --git a/src/components/i18n/maintainership-banner.tsx b/src/components/i18n/maintainership-banner.tsx
index 9e092a944..d4f3f9dc1 100644
--- a/src/components/i18n/maintainership-banner.tsx
+++ b/src/components/i18n/maintainership-banner.tsx
@@ -97,7 +97,7 @@ export function MaintainershipBanner() {
       data-testid="maintainership-banner"
       className="border-border bg-muted/40 text-muted-foreground flex items-start gap-2 border-b px-4 py-2 text-xs sm:items-center"
     >
-      <Languages className="mt-0.5 h-3.5 w-3.5 shrink-0 sm:mt-0" aria-hidden />
+      <Languages className="mt-0.5 size-3.5 shrink-0 sm:mt-0" aria-hidden />
       <p className="flex-1 leading-snug">
         {t("i18n.maintainershipBanner.notice")}{" "}
         <a
@@ -118,7 +118,7 @@ export function MaintainershipBanner() {
         // the surrounding hit area is what the user actually taps.
         className="hover:text-foreground focus-visible:ring-ring/50 -mr-2 inline-flex h-11 w-11 shrink-0 items-center justify-center rounded-sm transition-colors focus-visible:ring-2 focus-visible:outline-none"
       >
-        <X className="h-3.5 w-3.5" aria-hidden />
+        <X className="size-3.5" aria-hidden />
       </button>
     </div>
   );
diff --git a/src/components/layout/demo-banner.tsx b/src/components/layout/demo-banner.tsx
index af0b3f123..302854a86 100644
--- a/src/components/layout/demo-banner.tsx
+++ b/src/components/layout/demo-banner.tsx
@@ -31,7 +31,7 @@ export function DemoBanner() {
       data-slot="demo-banner"
       className="bg-primary/10 border-primary/30 text-foreground flex items-center justify-center gap-2 border-b px-3 py-2 text-xs"
     >
-      <FlaskConical className="h-3.5 w-3.5 shrink-0" aria-hidden="true" />
+      <FlaskConical className="size-3.5 shrink-0" aria-hidden="true" />
       <span className="text-center">{t("demoBanner.message")}</span>
     </div>
   );
diff --git a/src/components/layout/offline-banner.tsx b/src/components/layout/offline-banner.tsx
index e32319279..c6d0d7a87 100644
--- a/src/components/layout/offline-banner.tsx
+++ b/src/components/layout/offline-banner.tsx
@@ -83,7 +83,7 @@ export function OfflineBanner() {
       data-slot="offline-banner"
       className="bg-warning/15 border-warning/40 text-foreground flex items-center justify-center gap-2 border-b px-3 py-2 text-xs"
     >
-      <WifiOff className="h-3.5 w-3.5 shrink-0" aria-hidden="true" />
+      <WifiOff className="size-3.5 shrink-0" aria-hidden="true" />
       <span className="text-center">
         {t("offlineBanner.message")}
         {hasCachedData ? ` ${t("offlineBanner.showingCached")}` : ""}
diff --git a/src/components/layout/shared-record-banner.tsx b/src/components/layout/shared-record-banner.tsx
index ca31f12d1..610a11144 100644
--- a/src/components/layout/shared-record-banner.tsx
+++ b/src/components/layout/shared-record-banner.tsx
@@ -30,7 +30,18 @@ import { accountLabel } from "@/lib/sharing/account-access-view";
  *
  * The name is `text-foreground` and the qualifier `text-muted-foreground`, per
  * the two-tier text rule — the person's name is content, the read-only note is
- * meta. Mounted for every authenticated route inside `<AuthShell>` (the
+ * meta.
+ *
+ * The row is the inline-action shape from UI-STANDARDS §11 rather than a
+ * centred wrapping stack: sentence `min-w-0 flex-1`, action `shrink-0`, so the
+ * way out stays beside the sentence instead of dropping onto its own line once
+ * the name is long. `<MaintainershipBanner>` is the sibling that already had an
+ * action and already had this shape; the two now read the same. The tap target
+ * carries the standard's floor (`min-h-11 sm:min-h-9`) — a person leaving
+ * somebody else's record on a phone is the one interaction in the stack, and it
+ * was a 32px target.
+ *
+ * Mounted for every authenticated route inside `<AuthShell>` (the
  * `<DemoBanner>` pattern) so no page can forget it, and rendered from
  * `accountAccess.active`, which the server resolves: the banner appears exactly
  * when the server says the session is inside a record, never on a client guess.
@@ -54,25 +65,30 @@ export function SharedRecordBanner() {
       role="status"
       data-slot="shared-record-banner"
       data-account-id={active.accountId}
-      className="bg-warning/15 border-warning/40 flex flex-wrap items-center justify-center gap-x-3 gap-y-1 border-b px-3 py-2 text-xs"
+      className="bg-warning/15 border-warning/40 flex items-start gap-3 border-b px-3 py-2 text-xs sm:items-center"
     >
-      <Eye className="text-foreground size-3.5 shrink-0" aria-hidden="true" />
-      <span className="text-foreground text-center font-medium">
-        {t("recordSharing.banner.viewing", { name })}
-      </span>
-      {/* Resolved server-side. `canWrite` is false for every grant in v1, and
-          the day it is not, this line stops claiming otherwise on its own. */}
-      {!active.canWrite && (
-        <span className="text-muted-foreground text-center">
-          {t("recordSharing.banner.readOnly")}
-        </span>
-      )}
+      <Eye
+        className="text-foreground mt-0.5 size-3.5 shrink-0 sm:mt-0"
+        aria-hidden="true"
+      />
+      <p className="min-w-0 flex-1 leading-snug">
+        <span className="text-foreground font-medium">
+          {t("recordSharing.banner.viewing", { name })}
+        </span>{" "}
+        {/* Resolved server-side. `canWrite` is false for every grant in v1, and
+            the day it is not, this line stops claiming otherwise on its own. */}
+        {!active.canWrite && (
+          <span className="text-muted-foreground">
+            {t("recordSharing.banner.readOnly")}
+          </span>
+        )}
+      </p>
       <button
         type="button"
         data-slot="shared-record-banner-exit"
         onClick={() => switchAccount.mutate(null)}
         disabled={switchAccount.isPending}
-        className="text-foreground hover:bg-warning/25 focus-visible:ring-ring inline-flex min-h-8 shrink-0 items-center gap-1.5 rounded-md px-2 py-1 font-medium underline underline-offset-2 focus-visible:ring-2 focus-visible:outline-none disabled:opacity-50"
+        className="text-foreground hover:bg-warning/25 focus-visible:ring-ring inline-flex min-h-11 shrink-0 items-center gap-1.5 rounded-md px-2 py-1 font-medium underline underline-offset-2 focus-visible:ring-2 focus-visible:outline-none disabled:opacity-50 sm:min-h-9"
       >
         {switchAccount.isPending ? (
           <Loader2