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_BUFFER_RATIO = 0.99;
-export const WIDTH_CHANGE_TOLERANCE = 0.25;
+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 ? (
-    <BreadcrumbTrail
+    <div className="panel-header__breadcrumbs-wrapper">
-      entries={breadcrumbTrailEntries}
+      <BreadcrumbTrail
-      separator="/"
+        entries={breadcrumbTrailEntries}
-      className="panel-header__breadcrumbs"
+        separator="/"
-      truncateFromStart={isSidebarVariant}
+        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;
@@ -148,4 +154,4 @@ button.breadcrumb-trail__link,
 .panel-section__body--scrollable,
 .panel-section__body.scrollable {
   overflow-y: auto;
-}
+}

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;
@@ -297,20 +297,20 @@ const BreadcrumbTrail = ({
 
           const content = !entry.onClick || isLast
             ? (
-                <span key={`${entry.id}-label`} {...commonProps}>
+              <span key={`${entry.id}-label`} {...commonProps}>
-                  {entry.label}
+                {entry.label}
-                </span>
+              </span>
-              )
+            )
             : (
-                <button
+              <button
-                  key={`${entry.id}-button`}
+                key={`${entry.id}-button`}
-                  type="button"
+                type="button"
-                  {...commonProps}
+                {...commonProps}
-                  onClick={() => entry.onClick?.(entry.raw ?? entry)}
+                onClick={() => entry.onClick?.(entry.raw ?? entry)}
-                >
+              >
-                  {entry.label}
+                {entry.label}
-                </button>
+              </button>
-              );
+            );
 
           return (
             <React.Fragment key={entry.id || index}>
@@ -371,33 +371,33 @@ const BreadcrumbTrail = ({
         && hasHiddenEntries
         && ellipsisMenuStyle
         ? createPortal(
-            <div
+          <div
-              className="menu menu--floating"
+            className="menu menu--floating"
-              role="menu"
+            role="menu"
-              ref={ellipsisMenuRef}
+            ref={ellipsisMenuRef}
-              style={ellipsisMenuStyle}
+            style={ellipsisMenuStyle}
-              data-floating-position
+            data-floating-position
-            >
+          >
-              <div className="menu__list">
+            <div className="menu__list">
-                {hiddenEntries.map((hiddenEntry) => (
+              {hiddenEntries.map((hiddenEntry) => (
-                  <button
+                <button
-                    key={hiddenEntry.id}
+                  key={hiddenEntry.id}
-                    type="button"
+                  type="button"
-                    className="menu__item"
+                  className="menu__item"
-                    role="menuitem"
+                  role="menuitem"
-                    onClick={() => {
+                  onClick={() => {
-                      closeEllipsisMenu();
+                    closeEllipsisMenu();
-                      hiddenEntry.onClick?.(hiddenEntry.raw ?? hiddenEntry);
+                    hiddenEntry.onClick?.(hiddenEntry.raw ?? hiddenEntry);
-                    }}
+                  }}
-                    disabled={!hiddenEntry.onClick}
+                  disabled={!hiddenEntry.onClick}
-                  >
+                >
-                    <span className="menu__label">{hiddenEntry.label}</span>
+                  <span className="menu__label">{hiddenEntry.label}</span>
-                  </button>
+                </button>
-                ))}
+              ))}
-              </div>
+            </div>
-            </div>,
+          </div>,
-            document.body,
+          document.body,
-          )
+        )
         : null}
     </>
   );