fix(Toolbar): improve numberOfAlwaysVisibleItems behavior with spacers (#5367)

Author: Lukas742

packages/main/src/components/DynamicPageTitle/ActionsSpacer.tsx

@@ -12,6 +12,7 @@ export const ActionsSpacer = ({ onClick, noHover }: ActionsSpacerProps) => {
       style={{ flexGrow: 1, height: '100%', cursor: noHover ? 'auto' : 'pointer' }}
       className="spacer"
       onClick={onClick}
+      data-component-name="ToolbarSpacer"
     />
   );
 };

packages/main/src/components/Toolbar/index.tsx

@@ -123,6 +123,18 @@ export interface ToolbarPropTypes extends Omit<CommonProps, 'onClick' | 'childre
   }) => void;
 }
 
+function getSpacerWidths(ref) {
+  if (!ref) {
+    return 0;
+  }
+
+  let spacerWidths = 0;
+  if (ref.dataset.componentName === 'ToolbarSpacer') {
+    spacerWidths += ref.offsetWidth;
+  }
+  return spacerWidths + getSpacerWidths(ref.previousElementSibling);
+}
+
 const OVERFLOW_BUTTON_WIDTH = 36 + 8 + 8; // width + padding end + spacing start
 
 /**
@@ -218,10 +230,17 @@ const Toolbar = forwardRef<HTMLDivElement, ToolbarPropTypes>((props, ref) => {
     let lastElementResizeObserver;
     const lastElement = contentRef.current.children[numberOfAlwaysVisibleItems - 1];
     const debouncedObserverFn = debounce(() => {
+      const spacerWidth = getSpacerWidths(lastElement);
       if (isRtl) {
-        setMinWidth(`${lastElement.offsetParent.offsetWidth - lastElement.offsetLeft + OVERFLOW_BUTTON_WIDTH}px`);
+        setMinWidth(
+          `${lastElement.offsetParent.offsetWidth - lastElement.offsetLeft + OVERFLOW_BUTTON_WIDTH - spacerWidth}px`
+        );
       } else {
-        setMinWidth(`${lastElement.offsetLeft + lastElement.getBoundingClientRect().width + OVERFLOW_BUTTON_WIDTH}px`);
+        setMinWidth(
+          `${
+            lastElement.offsetLeft + lastElement.getBoundingClientRect().width + OVERFLOW_BUTTON_WIDTH - spacerWidth
+          }px`
+        );
       }
     }, 200);
     if (numberOfAlwaysVisibleItems && overflowNeeded && lastElement) {

packages/main/src/components/ToolbarSpacer/index.tsx

@@ -8,7 +8,7 @@ export type ToolbarSpacerPropTypes = CommonProps;
  * __Note:__ This component is only compatible with the `Toolbar` component and __not__ with `ToolbarV2`. If you're using `ToolbarV2`, please use `ToolbarSpacerV2` instead.
  */
 const ToolbarSpacer = forwardRef<HTMLSpanElement, ToolbarSpacerPropTypes>((props, ref) => {
-  return <span ref={ref} style={{ flexGrow: 1 }} className="spacer" {...props} />;
+  return <span ref={ref} style={{ flexGrow: 1 }} className="spacer" {...props} data-component-name="ToolbarSpacer" />;
 });
 
 ToolbarSpacer.displayName = 'ToolbarSpacer';