From 9f053a4e300123bde3bed6e2dfb88b4521821e6d Mon Sep 17 00:00:00 2001
From: Fable Integrator <fable@helm.local>
Date: Fri, 17 Jul 2026 00:17:10 -0400
Subject: [PATCH] fix(baseball): mobile bottom-nav clip at 320/390px + clearer
 unhandledRejection reporting
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Every baseball coach route failed e2e mobile-viewport checks with
'"Home" [left -2]': FairwayBottomNav's five flex-1 tab columns lacked
min-w-0, so truncate never engaged, the row's content minimum exceeded
the viewport, and justify-around's negative-free-space fallback centered
the overflowing row — pushing the first tab 2px off-screen. Added
min-w-0 to each li and Link (the More button already had it, masking
the bug for one of five items).

Also: unhandledRejection handler now logs the raw reason before
synthesizing an Error (name 'UnhandledRejection', reason threaded into
Bridge metadata) so Next dev code frames stop blaming instrumentation.ts
for every non-Error rejection.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01MMdviLDsAg2YYJ8adsM6fg
---
 .../fairway/app-shell/FairwayBottomNav.tsx    | 22 +++++++++--
 src/instrumentation.ts                        | 39 +++++++++++++++++--
 2 files changed, 53 insertions(+), 8 deletions(-)

diff --git a/src/components/fairway/app-shell/FairwayBottomNav.tsx b/src/components/fairway/app-shell/FairwayBottomNav.tsx
index 61d4b193f..4cad236cd 100644
--- a/src/components/fairway/app-shell/FairwayBottomNav.tsx
+++ b/src/components/fairway/app-shell/FairwayBottomNav.tsx
@@ -134,14 +134,28 @@ export const FairwayBottomNav = memo(function FairwayBottomNav({
               : matchActive(item.href, pathname));
           const Icon = item.icon;
           return (
-            <li key={item.href} className="flex-1">
+            <li key={item.href} className="min-w-0 flex-1">
               <Link
                 href={item.href}
                 aria-current={active ? 'page' : undefined}
                 aria-label={item.label}
                 className={cn(
-                  // Full-height column ≥44px tall touch target.
-                  'group relative flex min-h-[56px] flex-col items-center justify-center gap-0.5 px-1 py-1.5',
+                  // Full-height column ≥44px tall touch target. `min-w-0`
+                  // overrides the flex item's default `min-width: auto` floor
+                  // (the browser default lets a flex item refuse to shrink
+                  // below its unbreakable content's natural width even with
+                  // `flex: 1 1 0%` on the parent `<li>`) — without it, a long
+                  // label (e.g. "Development", "Messages", or a mode's
+                  // exposureNoun) can force this column past its 1/5 share of
+                  // a 320/390px bar, overflowing the row by a few px. Tailwind's
+                  // `justify-around` (space-around) falls back to `center` per
+                  // the CSS Box Alignment spec whenever the line's free space
+                  // is negative, and centering an overflowing row shifts its
+                  // start point negative — the exact -2px left overhang on the
+                  // first ("Home") tab this fixes. `min-w-0` here (mirroring
+                  // the `min-w-0` already on the More button below) lets the
+                  // label's own `truncate` class actually engage instead.
+                  'group relative flex min-h-[56px] min-w-0 flex-col items-center justify-center gap-0.5 px-1 py-1.5',
                   'outline-none transition-colors [transition-duration:var(--fw-dur-fast)] motion-reduce:transition-none',
                   'focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-border-focus',
                   active ? 'text-accent-700' : 'text-text-tertiary hover:text-text-secondary',
@@ -178,7 +192,7 @@ export const FairwayBottomNav = memo(function FairwayBottomNav({
           );
         })}
         {onMoreOpen && (
-          <li className="flex-1">
+          <li className="min-w-0 flex-1">
             <Button
               type="button"
               variant="ghost"
diff --git a/src/instrumentation.ts b/src/instrumentation.ts
index a00dbb79c..87d460fa2 100644
--- a/src/instrumentation.ts
+++ b/src/instrumentation.ts
@@ -320,10 +320,16 @@ function allowBridgeProcessWrite(): boolean {
   return bridgeProcessWriteCount <= BRIDGE_PROCESS_WRITE_LIMIT;
 }
 
-function logProcessErrorToBridge(action: string, error: Error): void {
+function logProcessErrorToBridge(action: string, error: Error, metadata?: Record<string, unknown>): void {
   if (!allowBridgeProcessWrite()) return;
   void import('@/lib/server-error-logger')
-    .then((m) => m.logServerException(error, { action, source: 'background_job', handled: false }, 'error'))
+    .then((m) =>
+      m.logServerException(
+        error,
+        { action, source: 'background_job', handled: false, ...(metadata ? { metadata } : {}) },
+        'error'
+      )
+    )
     .catch(() => {});
 }
 
@@ -332,9 +338,34 @@ function registerProcessErrorHandlers(): void {
   processHandlersRegistered = true;
 
   process.on('unhandledRejection', (reason) => {
-    const error = reason instanceof Error ? reason : new Error(String(reason));
+    let error: Error;
+    if (reason instanceof Error) {
+      error = reason;
+    } else {
+      // Non-Error rejection reasons (a promise rejected with a string,
+      // plain object, number, etc.) used to become `new Error(String(reason))`
+      // — that Error's OWN stack always points at THIS handler, so Next dev's
+      // code-frame overlay blamed instrumentation.ts for every such
+      // rejection instead of the real throw site. console.error the RAW
+      // reason FIRST (before any synthesis) so the true payload is never
+      // masked, then build a clearly-labeled synthetic Error: `name` marks
+      // it as synthetic (not a real thrown Error) rather than masquerading
+      // as one, the message is PREFIXED with the stringified reason so it
+      // still reads naturally in Sentry/logs, and the untouched original
+      // reason is preserved in the Bridge metadata for anyone triaging the
+      // admin_events row (a stringified reason alone can lose structure —
+      // e.g. a plain `{ code, message }` rejection collapses to
+      // "[object Object]").
+      console.error('[instrumentation] unhandledRejection: non-Error reason', reason);
+      error = new Error(`${String(reason)} (unhandled promise rejection with a non-Error reason)`);
+      error.name = 'UnhandledRejection';
+    }
     Sentry.captureException(error);
-    logProcessErrorToBridge('process.unhandledRejection', error);
+    logProcessErrorToBridge(
+      'process.unhandledRejection',
+      error,
+      reason instanceof Error ? undefined : { reason }
+    );
   });
 
   process.on('uncaughtException', (error) => {