Minor style updates

src-web/components/core/Icon.tsx

@@ -23,6 +23,7 @@ import {
   UpdateIcon,
   RowsIcon,
   MagicWandIcon,
+  MagnifyingGlassIcon,
 } from '@radix-ui/react-icons';
 import classnames from 'classnames';
 
@@ -50,7 +51,9 @@ const icons = {
   triangleRight: TriangleRightIcon,
   update: UpdateIcon,
   magicWand: MagicWandIcon,
+  magnifyingGlass: MagnifyingGlassIcon,
   x: Cross2Icon,
+  empty: () => <span />,
 };
 
 export interface IconProps {

src-web/components/core/IconButton.tsx

@@ -22,6 +22,7 @@ export const IconButton = forwardRef<HTMLButtonElement, Props>(function IconButt
     onClick,
     className,
     iconClassName,
+    tabIndex,
     size = 'md',
     iconSize,
     ...props
@@ -32,6 +33,9 @@ export const IconButton = forwardRef<HTMLButtonElement, Props>(function IconButt
   return (
     <Button
       ref={ref}
+      aria-hidden={icon === 'empty'}
+      disabled={icon === 'empty'}
+      tabIndex={tabIndex ?? icon === 'empty' ? -1 : undefined}
       onClick={(e) => {
         if (showConfirm) setConfirmed();
         onClick?.(e);

src-web/components/core/PairEditor.tsx

@@ -95,7 +95,7 @@ function FormRow({
 }) {
   const { id } = pairContainer;
   return (
-    <div className="group grid grid-cols-[1fr_1fr_2.5rem] grid-rows-1 gap-2 items-center">
+    <div className="group grid grid-cols-[1fr_1fr_auto] grid-rows-1 gap-2 items-center">
       <Input
         hideLabel
         containerClassName={classnames(isLast && 'border-dashed')}
@@ -118,7 +118,7 @@ function FormRow({
         placeholder={isLast ? 'new value' : 'value'}
         useEditor={{ useTemplating: true, contentType: 'text/plain' }}
       />
-      {onDelete && (
+      {onDelete ? (
         <IconButton
           icon="trash"
           title="Delete header"
@@ -126,6 +126,8 @@ function FormRow({
           tabIndex={-1}
           className={classnames('opacity-0 group-hover:opacity-100')}
         />
+      ) : (
+        <IconButton title="" icon="empty" />
       )}
     </div>
   );