Responsive (scroll) workspace header

src-web/components/SidebarActions.tsx

@@ -16,7 +16,7 @@ export const SidebarActions = memo(function SidebarActions() {
   const { hidden, show, hide } = useSidebarHidden();
 
   return (
-    <HStack>
+    <HStack className="h-full" alignItems="center">
       <IconButton
         onClick={async () => {
           trackEvent('Sidebar', 'Toggle');

src-web/components/Workspace.tsx

@@ -15,7 +15,6 @@ import { useSidebarHidden } from '../hooks/useSidebarHidden';
 import { useSidebarWidth } from '../hooks/useSidebarWidth';
 import { Button } from './core/Button';
 import { HotKeyList } from './core/HotKeyList';
-import { HStack } from './core/Stacks';
 import { GrpcConnectionLayout } from './GrpcConnectionLayout';
 import { HttpRequestLayout } from './HttpRequestLayout';
 import { Overlay } from './Overlay';
@@ -137,9 +136,7 @@ export default function Workspace() {
             )}
           >
             <HeaderSize className="border-transparent">
-              <HStack space={0.5}>
-                <SidebarActions />
-              </HStack>
+              <SidebarActions />
             </HeaderSize>
             <Sidebar />
           </motion.div>
@@ -159,11 +156,7 @@ export default function Workspace() {
           />
         </>
       )}
-      <HeaderSize
-        data-tauri-drag-region
-        className="w-full bg-gray-50 border-b border-b-highlight text-gray-900"
-        style={head}
-      >
+      <HeaderSize data-tauri-drag-region style={head}>
         <WorkspaceHeader className="pointer-events-none" />
       </HeaderSize>
       {activeRequest == null ? (
@@ -181,18 +174,21 @@ interface HeaderSizeProps extends HTMLAttributes<HTMLDivElement> {
   children: ReactNode;
 }
 
-function HeaderSize({ className, ...props }: HeaderSizeProps) {
+function HeaderSize({ className, style, ...props }: HeaderSizeProps) {
   const platform = useOsInfo();
   const fullscreen = useIsFullscreen();
   const stoplightsVisible = platform?.osType === 'Darwin' && !fullscreen;
   return (
     <div
+      style={style}
       className={classNames(
         className,
-        'h-md pt-[1px] flex items-center w-full border-b',
+        'h-md pt-[1px] w-full border-b min-w-0',
         stoplightsVisible ? 'pl-20 pr-1' : 'pl-1',
       )}
-      {...props}
-    />
+    >
+      {/* NOTE: This needs display:grid or else the element shrinks (even though scrollable) */}
+      <div className="h-full w-full overflow-x-auto hide-scrollbars grid" {...props} />
+    </div>
   );
 }