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>