feat(uat-batch-17): layout polish — DocumentsHub flush-left, breadcrumb wrap fix, viewport-centered topbar search

- 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/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>