Minor style tweaks

src-web/components/core/Button.tsx

@@ -17,7 +17,7 @@ const colorStyles = {
 export type ButtonProps = HTMLAttributes<HTMLElement> & {
   to?: string;
   color?: keyof typeof colorStyles;
-  size?: 'sm' | 'md';
+  size?: 'sm' | 'md' | 'xs';
   justify?: 'start' | 'center';
   type?: 'button' | 'submit';
   forDropdown?: boolean;
@@ -51,6 +51,7 @@ const _Button = forwardRef<any, ButtonProps>(function Button(
         justify === 'center' && 'justify-center',
         size === 'md' && 'h-md px-3',
         size === 'sm' && 'h-sm px-2.5 text-sm',
+        size === 'xs' && 'h-xs px-2 text-sm',
       ),
     [color, size, justify, className],
   );

src-web/components/core/PairEditor.tsx

@@ -125,9 +125,9 @@ export const PairEditor = memo(function PairEditor({
       className={classnames(
         className,
         '@container',
-        'pb-6 grid',
+        'pb-2 grid',
         // NOTE: Add padding to top so overflow doesn't hide drop marker
-        'py-1',
+        'pt-1',
       )}
     >
       {pairs.map((p, i) => {
@@ -137,6 +137,7 @@ export const PairEditor = memo(function PairEditor({
             {hoveredIndex === i && <DropMarker />}
             <FormRow
               pairContainer={p}
+              className="py-1"
               isLast={isLast}
               nameAutocomplete={nameAutocomplete}
               valueAutocomplete={valueAutocomplete}
@@ -162,6 +163,7 @@ enum ItemTypes {
 }
 
 type FormRowProps = {
+  className?: string;
   pairContainer: PairContainer;
   onMove: (id: string, side: 'above' | 'below') => void;
   onEnd: (id: string) => void;
@@ -180,6 +182,7 @@ type FormRowProps = {
 >;
 
 const FormRow = memo(function FormRow({
+  className,
   pairContainer,
   onChange,
   onDelete,
@@ -247,7 +250,8 @@ const FormRow = memo(function FormRow({
     <div
       ref={ref}
       className={classnames(
-        'pb-2 group grid grid-cols-[auto_auto_minmax(0,1fr)_auto]',
+        className,
+        'group grid grid-cols-[auto_auto_minmax(0,1fr)_auto]',
         'grid-rows-1 items-center',
         !pairContainer.pair.enabled && 'opacity-60',
       )}

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

@@ -64,7 +64,7 @@ export function Tabs<T>({
     >
       <div
         aria-label={label}
-        className={classnames(tabListClassName, 'h-auto flex items-center pb-1')}
+        className={classnames(tabListClassName, 'h-auto flex items-center overflow-auto pb-0.5')}
       >
         <HStack space={1}>
           {tabs.map((t) => {