fix: toolbar does not collapse when used inside flex containers (#963)

* fix: add width 100% to toolbar container to enable overflow detection

* fix: add min-width: 0 to HeaderLeftContainer for proper flex shrinking

* chore: update the toolbar story

Author: hamed-musallam

src/components/header/PanelHeader.tsx

@@ -23,6 +23,7 @@ const HeaderLeftContainer = styled.div`
   display: flex;
   flex-direction: row;
   flex: 1;
+  min-width: 0;
 
   '& > button:' {
     padding: 0 5px;

src/components/toolbar/Toolbar.tsx

@@ -88,6 +88,7 @@ const Container = styled.div<ContainerProps>`
     return placement === 'start' ? 'row-reverse' : 'row';
   }};
   overflow: hidden;
+  width: 100%;
 `;
 
 export const ToolbarButton = styled(Button)`

stories/components/toolbar.stories.tsx

@@ -13,6 +13,8 @@ import type {
   TooltipItem,
 } from '../../src/components/index.js';
 import {
+  Accordion,
+  PanelHeader,
   SplitPane,
   Toolbar,
   TooltipHelpContent,
@@ -435,40 +437,46 @@ export function HorizontalMore() {
         )}
       </div>
       <div style={{ width: '100%' }}>
-        <Toolbar intent="primary" disabled={false} overflow="collapse">
-          {itemsBlueprintIcons.map((item) => (
-            <Toolbar.Item
-              key={item.id}
-              id={item.id}
-              tooltip={item.tooltip}
-              active={selected === item.id}
-              onClick={() => {
-                setSelected(item.id);
-              }}
-              icon={item.icon}
-              intent={item.id === 'test5' ? 'danger' : undefined}
-              disabled={item.disabled ?? undefined}
-            />
-          ))}
-          {itemsPopover.map(({ content, ...itemProps }) => (
-            <Toolbar.PopoverItem
-              key={itemProps.id}
-              content={content}
-              itemProps={{
-                ...itemProps,
-                active: selected === itemProps.id,
-                onClick: () => {
-                  setSelected(itemProps.id);
-                },
-                tag: itemProps.id.startsWith('credit-card')
-                  ? 1
-                  : itemProps.id.startsWith('clipboard')
-                    ? 15
-                    : undefined,
-              }}
-            />
-          ))}
-        </Toolbar>
+        <Accordion>
+          <Accordion.Item title="test" id="test" open>
+            <PanelHeader total={10}>
+              <Toolbar intent="primary" overflow="collapse">
+                {itemsBlueprintIcons.map((item) => (
+                  <Toolbar.Item
+                    key={item.id}
+                    id={item.id}
+                    tooltip={item.tooltip}
+                    active={selected === item.id}
+                    onClick={() => {
+                      setSelected(item.id);
+                    }}
+                    icon={item.icon}
+                    intent={item.id === 'test5' ? 'danger' : undefined}
+                    disabled={item.disabled ?? undefined}
+                  />
+                ))}
+                {itemsPopover.map(({ content, ...itemProps }) => (
+                  <Toolbar.PopoverItem
+                    key={itemProps.id}
+                    content={content}
+                    itemProps={{
+                      ...itemProps,
+                      active: selected === itemProps.id,
+                      onClick: () => {
+                        setSelected(itemProps.id);
+                      },
+                      tag: itemProps.id.startsWith('credit-card')
+                        ? 1
+                        : itemProps.id.startsWith('clipboard')
+                          ? 15
+                          : undefined,
+                    }}
+                  />
+                ))}
+              </Toolbar>
+            </PanelHeader>
+          </Accordion.Item>
+        </Accordion>
       </div>
     </SplitPane>
   );