Container queries!

src-web/components/core/Button.tsx

@@ -43,14 +43,14 @@ const _Button = forwardRef<any, ButtonProps>(function Button(
     () =>
       classnames(
         className,
-        'outline-none',
+        'outline-none whitespace-nowrap',
         'border border-transparent focus-visible:border-blue-300',
         'rounded-md flex items-center',
         colorStyles[color || 'default'],
         justify === 'start' && 'justify-start',
         justify === 'center' && 'justify-center',
-        size === 'md' && 'h-9 px-3',
-        size === 'sm' && 'h-7 px-2.5 text-sm',
+        size === 'md' && 'h-md px-3',
+        size === 'sm' && 'h-sm px-2.5 text-sm',
       ),
     [color, size, justify, className],
   );

src-web/components/core/Checkbox.tsx

@@ -18,7 +18,7 @@ export function Checkbox({ checked, onChange, className, disabled }: Props) {
       onCheckedChange={onChange}
       className={classnames(
         className,
-        'flex-shrink-0 w-5 h-5 border border-gray-200 rounded',
+        'flex-shrink-0 w-4 h-4 border border-gray-200 rounded',
         'focus:border-focus',
         'disabled:opacity-disabled',
         'outline-none',
@@ -28,7 +28,7 @@ export function Checkbox({ checked, onChange, className, disabled }: Props) {
     >
       <CB.Indicator className="flex items-center justify-center">
         {checked === 'indeterminate' && <Icon icon="dividerH" />}
-        {checked === true && <Icon icon="check" />}
+        {checked === true && <Icon size="sm" icon="check" />}
       </CB.Indicator>
     </CB.Root>
   );

src-web/components/core/Input.tsx

@@ -81,8 +81,8 @@ export function Input({
           'relative w-full rounded-md text-gray-900',
           'border border-gray-200 focus-within:border-focus',
           !isValid && 'border-invalid',
-          size === 'md' && 'h-9',
-          size === 'sm' && 'h-7',
+          size === 'md' && 'h-md',
+          size === 'sm' && 'h-sm',
         )}
       >
         {leftSlot}

src-web/components/core/PairEditor.tsx

@@ -1,4 +1,5 @@
 import type { CheckedState } from '@radix-ui/react-checkbox';
+import classNames from 'classnames';
 import classnames from 'classnames';
 import React, { Fragment, memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import type { XYCoord } from 'react-dnd';
@@ -121,6 +122,7 @@ export const PairEditor = memo(function PairEditor({
     <div
       className={classnames(
         className,
+        '@container',
         'pb-6 grid',
         // NOTE: Add padding to top so overflow doesn't hide drop marker
         'py-1',
@@ -236,7 +238,7 @@ const FormRow = memo(function FormRow({
     <div
       ref={ref}
       className={classnames(
-        'pb-2 group grid grid-cols-[auto_minmax(0,1fr)_auto]',
+        'pb-2 group grid grid-cols-[auto_auto_minmax(0,1fr)_auto]',
         'grid-rows-1 items-center',
         !pairContainer.pair.enabled && 'opacity-60',
       )}
@@ -244,7 +246,7 @@ const FormRow = memo(function FormRow({
       {!isLast ? (
         <div
           className={classnames(
-            'py-2 h-9 w-3 flex items-center',
+            'py-2 h-7 w-3 flex items-center',
             'justify-center opacity-0 hover:opacity-100',
           )}
         >
@@ -253,15 +255,16 @@ const FormRow = memo(function FormRow({
       ) : (
         <span className="w-3" />
       )}
-      <HStack space={2} alignItems="center">
-        <Checkbox
-          disabled={isLast}
-          checked={isLast ? false : !!pairContainer.pair.enabled}
-          className={classnames(isLast && '!opacity-disabled')}
-          onChange={handleChangeEnabled}
-        />
+      <Checkbox
+        disabled={isLast}
+        checked={isLast ? false : !!pairContainer.pair.enabled}
+        className={classnames('mr-2', isLast && '!opacity-disabled')}
+        onChange={handleChangeEnabled}
+      />
+      <div className={classNames('flex flex-col @xs:flex-row gap-2 items-center')}>
         <Input
           hideLabel
+          size="sm"
           require={!isLast && !!pairContainer.pair.enabled && !!pairContainer.pair.value}
           useTemplating
           containerClassName={classnames(isLast && 'border-dashed')}
@@ -275,6 +278,7 @@ const FormRow = memo(function FormRow({
         />
         <Input
           hideLabel
+          size="sm"
           containerClassName={classnames(isLast && 'border-dashed')}
           defaultValue={pairContainer.pair.value}
           label="Value"
@@ -285,7 +289,7 @@ const FormRow = memo(function FormRow({
           useTemplating
           autocomplete={valueAutocomplete?.(pairContainer.pair.name)}
         />
-      </HStack>
+      </div>
       <IconButton
         aria-hidden={!onDelete}
         disabled={!onDelete}

src-web/components/core/Stacks.tsx

@@ -17,7 +17,11 @@ interface HStackProps extends BaseStackProps {
 
 export function HStack({ className, space, children, ...props }: HStackProps) {
   return (
-    <BaseStack className={classnames(className, 'flex-row', space && gapClasses[space])} {...props}>
+    <BaseStack
+      direction="row"
+      className={classnames(className, 'flex-row', space && gapClasses[space])}
+      {...props}
+    >
       {children}
     </BaseStack>
   );
@@ -30,7 +34,8 @@ export type VStackProps = BaseStackProps & {
 export function VStack({ className, space, children, ...props }: VStackProps) {
   return (
     <BaseStack
-      className={classnames(className, 'w-full h-full flex-col', space && gapClasses[space])}
+      direction="col"
+      className={classnames(className, 'w-full h-full', space && gapClasses[space])}
       {...props}
     >
       {children}
@@ -43,15 +48,25 @@ type BaseStackProps = HTMLAttributes<HTMLElement> & {
   space?: keyof typeof gapClasses;
   alignItems?: 'start' | 'center';
   justifyContent?: 'start' | 'center' | 'end';
+  direction?: 'row' | 'col';
 };
 
-function BaseStack({ className, alignItems, justifyContent, children, as }: BaseStackProps) {
+function BaseStack({
+  className,
+  direction,
+  alignItems,
+  justifyContent,
+  children,
+  as,
+}: BaseStackProps) {
   const Component = as ?? 'div';
   return (
     <Component
       className={classnames(
         className,
         'flex',
+        direction === 'row' && 'flex-row',
+        direction === 'col' && 'flex-col',
         alignItems === 'center' && 'items-center',
         alignItems === 'start' && 'items-start',
         justifyContent === 'start' && 'justify-start',

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

@@ -128,6 +128,7 @@ export const TabContent = memo(function TabContent({
 }: TabContentProps) {
   return (
     <T.Content
+      tabIndex={-1}
       forceMount
       value={value}
       className={classnames(className, 'tab-content', 'w-full h-full overflow-auto')}