From 476b20176ec1b95e8b19a875759ab66eeb5dbf1d Mon Sep 17 00:00:00 2001
From: Bryan Helmkamp <bryan@brynary.com>
Date: Sun, 19 Apr 2026 16:44:37 -0400
Subject: [PATCH] style(app-shell): tighten header and nav surface treatment

- drop the semi-transparent bg-panel/50 on the top nav so the page
  background stops bleeding through
- simplify the header separator to after:border-b with a single
  bottom inset
- raise the page title from text-lg/6 to text-xl for room to breathe
- add isolate to the root so Headless UI portals don't fight the
  header's stacking context

Leaves the demo-mode beaker toggle visible in real mode as a
follow-up; gating it cleanly needs a new feature flag.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 apps/fabro-web/app/layouts/app-shell.tsx | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/apps/fabro-web/app/layouts/app-shell.tsx b/apps/fabro-web/app/layouts/app-shell.tsx
index d46784581..8c9e74070 100644
--- a/apps/fabro-web/app/layouts/app-shell.tsx
+++ b/apps/fabro-web/app/layouts/app-shell.tsx
@@ -70,8 +70,8 @@ export default function AppShell({ loaderData }: any) {
 
   return (
     <DemoModeProvider value={demoMode}>
-    <div className="min-h-full">
-      <Disclosure as="nav" className="bg-panel/50">
+    <div className="isolate min-h-full">
+      <Disclosure as="nav" className="bg-panel">
         <div className="px-4 sm:px-6 lg:px-8">
           <div className="flex h-16 items-center justify-between">
             <div className="flex items-center">
@@ -255,10 +255,12 @@ export default function AppShell({ loaderData }: any) {
       </Disclosure>
 
       {!hideHeader && (
-        <header className="relative bg-panel after:pointer-events-none after:absolute after:inset-x-0 after:inset-y-0 after:bottom-0 after:border-y after:border-line-strong">
+        <header className="relative bg-panel after:pointer-events-none after:absolute after:inset-x-0 after:bottom-0 after:border-b after:border-line-strong">
           <div className={`mx-auto ${maxWidth} px-4 py-4 sm:px-6 lg:px-8`}>
             <div className="flex items-center">
-              <h1 className="text-lg/6 font-semibold text-fg">{title}</h1>
+              <h1 className="text-xl font-semibold tracking-tight text-fg">
+                {title}
+              </h1>
               {headerExtra && <div className="ml-auto">{headerExtra}</div>}
             </div>
           </div>