Animate sidebar transition

src-web/components/RequestResponse.tsx

@@ -1,9 +1,8 @@
+import useResizeObserver from '@react-hook/resize-observer';
 import classnames from 'classnames';
 import type { CSSProperties, MouseEvent as ReactMouseEvent } from 'react';
-import React, { memo, useCallback, useLayoutEffect, useMemo, useRef, useState } from 'react';
-import { useWindowSize } from 'react-use';
+import React, { memo, useCallback, useMemo, useRef, useState } from 'react';
 import { useKeyValue } from '../hooks/useKeyValue';
-import { useSidebarDisplay } from '../hooks/useSidebarDisplay';
 import { clamp } from '../lib/clamp';
 import { RequestPane } from './RequestPane';
 import { ResizeHandle } from './ResizeHandle';
@@ -19,7 +18,7 @@ const drag = { gridArea: 'drag' };
 
 const DEFAULT = 0.5;
 const MIN_WIDTH_PX = 10;
-const MIN_HEIGHT_PX = 100;
+const MIN_HEIGHT_PX = 30;
 const STACK_VERTICAL_WIDTH = 600;
 
 export const RequestResponse = memo(function RequestResponse({ style }: Props) {
@@ -34,13 +33,9 @@ export const RequestResponse = memo(function RequestResponse({ style }: Props) {
     null,
   );
 
-  const windowSize = useWindowSize();
-  const sidebar = useSidebarDisplay();
-  useLayoutEffect(() => {
-    if (!containerRef.current) return;
-    const { width } = containerRef.current.getBoundingClientRect();
-    setVertical(width < STACK_VERTICAL_WIDTH);
-  }, [containerRef.current, windowSize, sidebar.width, sidebar.hidden]);
+  useResizeObserver(containerRef, ({ contentRect }) => {
+    setVertical(contentRect.width < STACK_VERTICAL_WIDTH);
+  });
 
   const styles = useMemo<CSSProperties>(
     () => ({

src-web/components/Workspace.tsx

@@ -64,7 +64,15 @@ export default function Workspace() {
   );
 
   return (
-    <div className="grid w-full h-full" style={styles}>
+    <div
+      className={classnames(
+        'grid w-full h-full',
+        // Animate sidebar width changes but only when not resizing
+        // because it's too slow to animate on mouse move
+        !isResizing && 'transition-all',
+      )}
+      style={styles}
+    >
       <div
         data-tauri-drag-region
         className="h-md px-3 w-full pl-20 bg-gray-50 border-b border-b-highlight text-gray-900 pt-[1px]"

src-web/components/core/Tabs/Tabs.tsx

@@ -64,9 +64,9 @@ export function Tabs<T>({
     >
       <div
         aria-label={label}
-        className={classnames(tabListClassName, 'h-auto flex items-center overflow-auto pb-0.5')}
+        className={classnames(tabListClassName, 'h-md flex items-center overflow-x-auto pb-0.5')}
       >
-        <HStack space={1}>
+        <HStack space={1} className="flex-shrink-0">
           {tabs.map((t) => {
             const isActive = t.value === value;
             const btnClassName = classnames(