Tweak appearance settings

src-web/components/core/Checkbox.tsx

@@ -27,7 +27,6 @@ export function Checkbox({
     <HStack
       as="label"
       space={2}
-      alignItems="center"
       className={classNames(className, 'text-fg', disabled && 'opacity-disabled')}
     >
       <div className={classNames(inputWrapperClassName, 'x-theme-input', 'relative flex')}>

src-web/components/core/Dropdown.tsx

@@ -224,7 +224,6 @@ const Menu = forwardRef<Omit<DropdownRef, 'open' | 'isOpen' | 'toggle'>, MenuPro
   );
   const [menuStyles, setMenuStyles] = useState<CSSProperties>({});
   const [filter, setFilter] = useState<string>('');
-  const [containerWidth, setContainerWidth] = useState<number | null>(null);
 
   // Calculate the max height so we can scroll
   const initMenu = useCallback((el: HTMLDivElement | null) => {
@@ -349,11 +348,6 @@ const Menu = forwardRef<Omit<DropdownRef, 'open' | 'isOpen' | 'toggle'>, MenuPro
     [handleClose, handleNext, handlePrev, handleSelect, items, selectedIndex],
   );
 
-  const initContainerRef = (n: HTMLDivElement | null) => {
-    if (n == null) return null;
-    setContainerWidth(n.offsetWidth);
-  };
-
   const { containerStyles, triangleStyles } = useMemo<{
     containerStyles: CSSProperties;
     triangleStyles: CSSProperties | null;
@@ -379,7 +373,7 @@ const Menu = forwardRef<Omit<DropdownRef, 'open' | 'isOpen' | 'toggle'>, MenuPro
       ? { right: width / 2, marginRight: '-0.2rem', ...size }
       : { left: width / 2, marginLeft: '-0.2rem', ...size };
     return { containerStyles, triangleStyles };
-  }, [triggerShape, containerWidth]);
+  }, [triggerShape]);
 
   const filteredItems = useMemo(
     () => items.filter((i) => getNodeText(i.label).toLowerCase().includes(filter.toLowerCase())),
@@ -422,7 +416,6 @@ const Menu = forwardRef<Omit<DropdownRef, 'open' | 'isOpen' | 'toggle'>, MenuPro
               role="menu"
               aria-orientation="vertical"
               dir="ltr"
-              ref={initContainerRef}
               style={containerStyles}
               className={classNames(className, 'outline-none my-1 pointer-events-auto fixed z-50')}
             >
@@ -446,7 +439,6 @@ const Menu = forwardRef<Omit<DropdownRef, 'open' | 'isOpen' | 'toggle'>, MenuPro
                   {filter && (
                     <HStack
                       space={2}
-                      alignItems="center"
                       className="pb-0.5 px-1.5 mb-2 text-sm border border-background-highlight-secondary mx-2 rounded font-mono h-xs"
                     >
                       <Icon icon="search" size="xs" className="text-fg-subtle" />

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

@@ -294,7 +294,6 @@ export const Editor = forwardRef<EditorView | undefined, EditorProps>(function E
       {decoratedActions && (
         <HStack
           space={1}
-          alignItems="center"
           justifyContent="end"
           className={classNames(
             'absolute bottom-2 left-0 right-0',

src-web/components/core/Input.tsx

@@ -153,7 +153,6 @@ export const Input = forwardRef<EditorView | undefined, InputProps>(function Inp
       >
         {leftSlot}
         <HStack
-          alignItems="center"
           className={classNames(
             'w-full min-w-0',
             leftSlot && 'pl-0.5 -ml-2',

src-web/components/core/PlainInput.tsx

@@ -105,7 +105,6 @@ export const PlainInput = forwardRef<HTMLInputElement, PlainInputProps>(function
       >
         {leftSlot}
         <HStack
-          alignItems="center"
           className={classNames(
             'w-full min-w-0',
             leftSlot && 'pl-0.5 -ml-2',

src-web/components/core/Select.tsx

@@ -11,7 +11,7 @@ interface Props<T extends string> {
   hideLabel?: boolean;
   value: T;
   leftSlot?: ReactNode;
-  options: SelectOption<T>[];
+  options: SelectOption<T>[] | SelectOptionGroup<T>[];
   onChange: (value: T) => void;
   size?: 'xs' | 'sm' | 'md' | 'lg';
   className?: string;
@@ -22,6 +22,11 @@ export interface SelectOption<T extends string> {
   value: T;
 }
 
+export interface SelectOptionGroup<T extends string> {
+  label: string;
+  options: SelectOption<T>[];
+}
+
 export function Select<T extends string>({
   labelPosition = 'top',
   name,
@@ -56,7 +61,6 @@ export function Select<T extends string>({
       </label>
       <HStack
         space={2}
-        alignItems="center"
         className={classNames(
           'w-full rounded-md text-fg text-sm font-mono',
           'pl-2',
@@ -77,11 +81,21 @@ export function Select<T extends string>({
           onBlur={() => setFocused(false)}
           className={classNames('pr-7 w-full outline-none bg-transparent')}
         >
-          {options.map(({ label, value }) => (
-            <option key={label} value={value}>
-              {label}
-            </option>
-          ))}
+          {options.map((o) =>
+            'options' in o ? (
+              <optgroup key={o.label} label={o.label}>
+                {o.options.map(({ label, value }) => (
+                  <option key={label} value={value}>
+                    {label}
+                  </option>
+                ))}
+              </optgroup>
+            ) : (
+              <option key={o.label} value={o.value}>
+                {o.label}
+              </option>
+            ),
+          )}
         </select>
       </HStack>
     </div>

src-web/components/core/Stacks.tsx

@@ -19,7 +19,7 @@ interface HStackProps extends BaseStackProps {
 }
 
 export const HStack = forwardRef(function HStack(
-  { className, space, children, ...props }: HStackProps,
+  { className, space, children, alignItems = 'center', ...props }: HStackProps,
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   ref: ForwardedRef<any>,
 ) {
@@ -27,6 +27,7 @@ export const HStack = forwardRef(function HStack(
     <BaseStack
       ref={ref}
       className={classNames(className, 'flex-row', space != null && gapClasses[space])}
+      alignItems={alignItems}
       {...props}
     >
       {children}