From 8fcbe45d360e4335ebe7937663d7254fc6d0920b Mon Sep 17 00:00:00 2001
From: Matt <matt@letsbe.solutions>
Date: Thu, 21 May 2026 18:31:32 +0200
Subject: [PATCH] =?UTF-8?q?feat(uat-batch-17):=20layout=20polish=20?=
 =?UTF-8?q?=E2=80=94=20DocumentsHub=20flush-left,=20breadcrumb=20wrap=20fi?=
 =?UTF-8?q?x,=20viewport-centered=20topbar=20search?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- DocumentsHub root container gains `sm:-mx-6 sm:-mt-3 sm:-mb-6` to
  escape the AppShell main padding (`px-6 pt-3 pb-6`). The folder
  column now sits flush against the global app sidebar, reading as an
  extension of navigation rather than a card-inside-a-page. Mobile
  layout retains the AppShell padding.
- Breadcrumbs: each crumb + its trailing separator now share a single
  `<BreadcrumbItem>` instead of being separate `<li>`s. Flex-wrap can
  no longer strand an orphan separator at end-of-line above a wrapped
  child crumb. Drops the standalone `<BreadcrumbSeparator>` usage from
  the consumer; the primitive is still exported for backcompat.
- Topbar search visually centered against the full viewport via a
  `translate-x:calc(-var(--width-sidebar)/2)` shift. Grid middle slot
  bumped from `minmax(360px, 640px)` → `minmax(420px, 800px)` and the
  search wrapper from `max-w-md` → `max-w-2xl` so reps actually have
  room to read long results.

tsc clean. 1419/1419 vitest pass.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/components/documents/documents-hub.tsx |  7 ++++-
 src/components/layout/breadcrumbs.tsx      | 35 +++++++++++-----------
 src/components/layout/topbar.tsx           | 13 ++++----
 3 files changed, 32 insertions(+), 23 deletions(-)

diff --git a/src/components/documents/documents-hub.tsx b/src/components/documents/documents-hub.tsx
index 25e1cb61..b1be5495 100644
--- a/src/components/documents/documents-hub.tsx
+++ b/src/components/documents/documents-hub.tsx
@@ -243,7 +243,12 @@ export function DocumentsHub({ portSlug }: DocumentsHubProps) {
   );
 
   return (
-    <div className="h-full">
+    // Escape the AppShell's desktop main padding (px-6 pt-3 pb-6) so the
+    // folder column sits flush against the global app sidebar — reads
+    // as an extension of navigation rather than a card-inside-a-page.
+    // Inner content keeps its own padding so the right pane doesn't
+    // run flush with the viewport edge.
+    <div className="h-full sm:-mx-6 sm:-mt-3 sm:-mb-6">
       {/* Mobile: stacked, with a Sheet drawer for folders. */}
       <div className="flex flex-col h-full sm:hidden">
         <FolderTreeSidebar
diff --git a/src/components/layout/breadcrumbs.tsx b/src/components/layout/breadcrumbs.tsx
index 668f3163..698807bb 100644
--- a/src/components/layout/breadcrumbs.tsx
+++ b/src/components/layout/breadcrumbs.tsx
@@ -2,7 +2,6 @@
 
 import Link from 'next/link';
 import { usePathname } from 'next/navigation';
-import { Fragment } from 'react';
 import { ChevronRight } from 'lucide-react';
 
 import {
@@ -11,7 +10,6 @@ import {
   BreadcrumbLink,
   BreadcrumbList,
   BreadcrumbPage,
-  BreadcrumbSeparator,
 } from '@/components/ui/breadcrumb';
 import { useUIStore } from '@/stores/ui-store';
 import { useBreadcrumbStore } from '@/stores/breadcrumb-store';
@@ -102,14 +100,17 @@ export function Breadcrumbs() {
   return (
     <Breadcrumb>
       <BreadcrumbList className="text-sm gap-1.5">
-        {crumbs.map((crumb, _index) => (
-          <Fragment key={crumb.href}>
-            <BreadcrumbItem>
-              {crumb.isLast ? (
-                <BreadcrumbPage className="font-medium text-foreground truncate max-w-[160px]">
-                  {crumb.label}
-                </BreadcrumbPage>
-              ) : (
+        {crumbs.map((crumb) => (
+          // Each crumb + its trailing separator share a single
+          // inline-flex `<li>` so flex-wrap can't strand the
+          // separator at end-of-line above the wrapped child crumb.
+          <BreadcrumbItem key={crumb.href}>
+            {crumb.isLast ? (
+              <BreadcrumbPage className="font-medium text-foreground truncate max-w-[160px]">
+                {crumb.label}
+              </BreadcrumbPage>
+            ) : (
+              <>
                 <BreadcrumbLink asChild>
                   <Link
                     // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -119,14 +120,14 @@ export function Breadcrumbs() {
                     {crumb.label}
                   </Link>
                 </BreadcrumbLink>
-              )}
-            </BreadcrumbItem>
-            {!crumb.isLast && (
-              <BreadcrumbSeparator className="text-muted-foreground/40">
-                <ChevronRight className="w-3 h-3" aria-hidden />
-              </BreadcrumbSeparator>
+                <ChevronRight
+                  className="w-3 h-3 text-muted-foreground/40"
+                  aria-hidden
+                  role="presentation"
+                />
+              </>
             )}
-          </Fragment>
+          </BreadcrumbItem>
         ))}
       </BreadcrumbList>
     </Breadcrumb>
diff --git a/src/components/layout/topbar.tsx b/src/components/layout/topbar.tsx
index 9ca5066a..dff2adaa 100644
--- a/src/components/layout/topbar.tsx
+++ b/src/components/layout/topbar.tsx
@@ -54,7 +54,7 @@ export function Topbar({ ports, user }: TopbarProps) {
     // Three-column grid: breadcrumbs left, search center, actions right.
     // The brand logo lives in the sidebar header (per design feedback) so the
     // topbar center is dedicated to the global search bar.
-    <header className="grid h-14 grid-cols-[minmax(0,1fr)_minmax(360px,640px)_minmax(0,1fr)] items-center border-b border-border bg-background gap-3 px-4 shrink-0">
+    <header className="grid h-14 grid-cols-[minmax(0,1fr)_minmax(420px,800px)_minmax(0,1fr)] items-center border-b border-border bg-background gap-3 px-4 shrink-0">
       {/* LEFT: optional back button + breadcrumbs / page title */}
       <div className="min-w-0 flex items-center gap-1.5">
         {showBackButton && (
@@ -74,11 +74,14 @@ export function Topbar({ ports, user }: TopbarProps) {
         <Breadcrumbs />
       </div>
 
-      {/* CENTER: global search - capped width and horizontally centered
-          inside its grid slot so it sits visually in the middle of the
-          topbar regardless of breadcrumb / action-row width. */}
+      {/* CENTER: global search - capped width and visually centered
+          against the FULL viewport (not the post-sidebar area) via a
+          translate-X that shifts left by half the sidebar width.
+          Without the translate the topbar's grid centers inside the
+          area-after-the-sidebar, so the search visually drifts right
+          by half the sidebar width. */}
       <div className="flex items-center justify-center min-w-0">
-        <div className="w-full max-w-md mx-auto min-w-0">
+        <div className="w-full max-w-2xl mx-auto min-w-0 sm:-translate-x-[calc(var(--width-sidebar)/2)]">
           <CommandSearch />
         </div>
       </div>