Tweaks

src-web/components/Dropdown.tsx

@@ -1,18 +1,10 @@
 import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
 import { DropdownMenuRadioGroup } from '@radix-ui/react-dropdown-menu';
-import { motion } from 'framer-motion';
 import { CheckIcon } from '@radix-ui/react-icons';
-import {
-  ForwardedRef,
-  forwardRef,
-  HTMLAttributes,
-  ReactNode,
-  useEffect,
-  useImperativeHandle,
-  useMemo,
-  useRef,
-} from 'react';
 import classnames from 'classnames';
+import { motion } from 'framer-motion';
+import type { ForwardedRef, HTMLAttributes, ReactNode } from 'react';
+import { forwardRef, useImperativeHandle, useLayoutEffect, useState } from 'react';
 
 interface DropdownMenuRadioProps {
   children: ReactNode;
@@ -120,20 +112,30 @@ const DropdownMenuContent = forwardRef<HTMLDivElement, DropdownMenu.DropdownMenu
     { className, children, ...props }: DropdownMenu.DropdownMenuContentProps,
     ref: ForwardedRef<HTMLDivElement>,
   ) {
-    const divRef = useRef<HTMLDivElement>(null);
+    const [styles, setStyles] = useState<{ maxHeight: number }>();
-    useImperativeHandle<HTMLDivElement | null, HTMLDivElement | null>(ref, () => divRef.current);
+    const [divRef, setDivRef] = useState<HTMLDivElement | null>(null);
+    useImperativeHandle<HTMLDivElement | null, HTMLDivElement | null>(ref, () => divRef);
+
+    const initDivRef = (ref: HTMLDivElement | null) => {
+      setDivRef(ref);
+    };
 
     // Calculate the max height so we can scroll
-    const styles = useMemo(() => {
+    useLayoutEffect(() => {
-      if (divRef.current === null) return;
+      if (divRef === null) return;
-      const windowBox = document.documentElement.getBoundingClientRect();
+      // Needs to be in a setTimeout because the ref is not positioned yet
-      const menuBox = divRef.current.getBoundingClientRect();
+      // TODO: Make this better?
-      return { maxHeight: windowBox.height - menuBox.top - 5 };
+      setTimeout(() => {
-    }, [divRef.current]);
+        const windowBox = document.documentElement.getBoundingClientRect();
+        const menuBox = divRef.getBoundingClientRect();
+        const styles = { maxHeight: windowBox.height - menuBox.top - 5 - 45 };
+        setStyles(styles);
+      });
+    }, [divRef]);
 
     return (
       <DropdownMenu.Content
-        ref={divRef}
+        ref={initDivRef}
         align="start"
         className={classnames(className, dropdownMenuClasses, 'overflow-auto m-1')}
         style={styles}

src-web/components/ResponsePane.tsx

@@ -58,7 +58,7 @@ export function ResponsePane({ requestId, error }: Props) {
               disabled: responses.data.length === 0,
             },
             '-----',
-            ...responses.data.map((r) => ({
+            ...responses.data.slice(0, 10).map((r) => ({
               label: r.status + ' - ' + r.elapsed,
               leftSlot: response?.id === r.id ? <Icon icon="check" /> : <></>,
               onSelect: () => setActiveResponseId(r.id),

src-web/components/Sidebar.tsx

@@ -1,13 +1,14 @@
-import React, { HTMLAttributes } from 'react';
 import classnames from 'classnames';
-import { IconButton } from './IconButton';
+import type { HTMLAttributes } from 'react';
-import { Button } from './Button';
+import React from 'react';
-import useTheme from '../hooks/useTheme';
-import { HStack, VStack } from './Stacks';
-import { WindowDragRegion } from './WindowDragRegion';
-import { HttpRequest } from '../lib/models';
 import { Link } from 'react-router-dom';
 import { useRequestCreate } from '../hooks/useRequest';
+import useTheme from '../hooks/useTheme';
+import type { HttpRequest } from '../lib/models';
+import { Button } from './Button';
+import { IconButton } from './IconButton';
+import { HStack, VStack } from './Stacks';
+import { WindowDragRegion } from './WindowDragRegion';
 
 interface Props extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
   workspaceId: string;