fix(visual): visualisation bar sizing/overflow

libs/shared/lib/vis/components/bar.tsx

@@ -33,13 +33,44 @@ export default function VisualizationBar({ manager, fullSize }: Props) {
       <div className="flex items-center">
         <h1 className="text-xs font-semibold text-secondary-600 px-2 truncate">Visualization</h1>
       </div>
-      <div className="flex items-stretch divide-x divide-secondary-200 border-x border-secondary-200">
+      <div className="items-center shrink-0 px-0.5">
+        <DropdownMenu.Root>
+          <DropdownMenu.Trigger>
+            <TooltipProvider delayDuration={0}>
+              <Tooltip>
+                <TooltipTrigger>
+                  <Button type="secondary" variant="ghost" size="xs" iconComponent={<Add />} onClick={() => {}} />
+                </TooltipTrigger>
+                <TooltipContent side={'top'}>
+                  <p>Add visualization</p>
+                </TooltipContent>
+              </Tooltip>
+            </TooltipProvider>
+          </DropdownMenu.Trigger>
+          <DropdownMenu.Portal>
+            <DropdownMenu.Content className="bg-light p-1 rounded border">
+              {Object.keys(Visualizations).map((key) => (
+                <DropdownMenu.Item
+                  key={key}
+                  className="text-sm px-2 py-1 rounded cursor-pointer hover:bg-secondary-200"
+                  onClick={(e) => {
+                    manager.changeActive(key);
+                  }}
+                >
+                  {key}
+                </DropdownMenu.Item>
+              ))}
+            </DropdownMenu.Content>
+          </DropdownMenu.Portal>
+        </DropdownMenu.Root>
+      </div>
+      <div className="flex items-stretch divide-x divide-secondary-200 border-x border-secondary-200 overflow-x-auto -my-px">
         {manager.tabs.map((visId: string) => {
           const isActive = manager.active === visId;
           return (
             <div
               key={visId}
-              className={`flex items-center pl-2 pr-1 gap-1 cursor-pointer relative border-secondary-200 before:content-[''] before:absolute before:left-0 before:bottom-0 before:-mb-px before:h-[2px] before:w-full ${isActive && 'before:bg-primary-500'} ${!isActive && 'before:bg-transparent hover:before:bg-secondary-300 hover:bg-secondary-200'}`}
+              className={`flex items-center pl-2 pr-1 gap-1 cursor-pointer relative border-secondary-200 before:content-[''] before:absolute before:left-0 before:bottom-0 before:h-[2px] before:w-full ${isActive && 'before:bg-primary-500'} ${!isActive && 'before:bg-transparent hover:before:bg-secondary-300 hover:bg-secondary-200'}`}
               onClick={() => manager.changeActive(visId)}
               onDragStart={(e) => handleDragStart(e, visId)}
               onDragOver={(e) => handleDragOver(e)}
@@ -61,37 +92,6 @@ export default function VisualizationBar({ manager, fullSize }: Props) {
             </div>
           );
         })}
-        <div className="items-center px-0.5">
-          <DropdownMenu.Root>
-            <DropdownMenu.Trigger>
-              <TooltipProvider delayDuration={0}>
-                <Tooltip>
-                  <TooltipTrigger>
-                    <Button type="secondary" variant="ghost" size="xs" iconComponent={<Add />} onClick={() => {}} />
-                  </TooltipTrigger>
-                  <TooltipContent side={'top'}>
-                    <p>Add visualization</p>
-                  </TooltipContent>
-                </Tooltip>
-              </TooltipProvider>
-            </DropdownMenu.Trigger>
-            <DropdownMenu.Portal>
-              <DropdownMenu.Content className="bg-light p-1 rounded border">
-                {Object.keys(Visualizations).map((key) => (
-                  <DropdownMenu.Item
-                    key={key}
-                    className="text-sm px-2 py-1 rounded cursor-pointer hover:bg-secondary-200"
-                    onClick={(e) => {
-                      manager.changeActive(key);
-                    }}
-                  >
-                    {key}
-                  </DropdownMenu.Item>
-                ))}
-              </DropdownMenu.Content>
-            </DropdownMenu.Portal>
-          </DropdownMenu.Root>
-        </div>
       </div>
       <div className="shrink-0 sticky right-0 px-0.5 ml-auto items-center flex">
         <ControlContainer>