fix: improve BreadcrumbTrail truncation and layout within flexible panel headers by adjusting CSS and width calculation constants.

frontend/src/constants/ui.ts

@@ -3,5 +3,5 @@ export const DEFAULT_VIEWPORT_MARGIN = 8;
 
 export const ELLIPSIS = { id: '__breadcrumbs_ellipsis__', label: '…', onClick: null, raw: null } as const;
 export const WIDTH_TOLERANCE = 1;
-export const WIDTH_BUFFER_RATIO = 0.95;
-export const WIDTH_CHANGE_TOLERANCE = 0.25;
+export const WIDTH_BUFFER_RATIO = 0.99;
+export const WIDTH_CHANGE_TOLERANCE = 0.02;

frontend/src/preview/DocumentViewerPanel.tsx

@@ -437,12 +437,14 @@ const DocumentViewerPanel: React.FC<DocumentViewerPanelProps> = ({
   ) : loadingSection;
 
   const headerTitle = breadcrumbTrailEntries.length ? (
+    <div className="panel-header__breadcrumbs-wrapper">
       <BreadcrumbTrail
         entries={breadcrumbTrailEntries}
         separator="/"
         className="panel-header__breadcrumbs"
         truncateFromStart={isSidebarVariant}
       />
+    </div>
   ) : (
     document?.title || 'Document preview'
   );

frontend/src/styles/documents/panel-sections.css

@@ -71,7 +71,7 @@
 }
 
 .breadcrumb-trail__link {
-  display: inline-flex;
+  display: block;
   align-items: center;
   max-width: 100%;
   white-space: nowrap;
@@ -83,6 +83,7 @@
   font: inherit;
   color: inherit;
   cursor: default;
+  min-width: 0;
 }
 
 .breadcrumb-trail--measure .breadcrumb-trail__link,
@@ -138,6 +139,11 @@ button.breadcrumb-trail__link,
   max-width: 22rem;
 }
 
+.panel-header__breadcrumbs-wrapper {
+  min-width: 0;
+  flex: 1 1 auto;
+}
+
 .panel-section__body {
   flex: 1;
   display: flex;

frontend/src/ui/BreadcrumbTrail.tsx

@@ -194,7 +194,7 @@ const BreadcrumbTrail = ({
     }
 
     // Reserve a tiny buffer so the live trail doesn't oscillate when the
-    // container width barely fits; shrink the measured allowance by 1%.
+    // container width barely fits; shrink the measured allowance a bit.
     const adjustedAvailable = available * WIDTH_BUFFER_RATIO;
 
     let nextStart = widths.length - 1;