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

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