From f035abb8dfd21775c48280618af432dc4f2d067c Mon Sep 17 00:00:00 2001
From: Ryan Willis <ryan.willis@konghq.com>
Date: Wed, 10 Jun 2026 14:38:24 -0700
Subject: [PATCH] fix(ui): align header editors using grid (#10061)

---
 .../key-value-editor/key-value-editor.tsx     | 53 ++++++++++---------
 1 file changed, 27 insertions(+), 26 deletions(-)

diff --git a/packages/insomnia/src/ui/components/key-value-editor/key-value-editor.tsx b/packages/insomnia/src/ui/components/key-value-editor/key-value-editor.tsx
index 9e1e656951..0e4b48cb98 100644
--- a/packages/insomnia/src/ui/components/key-value-editor/key-value-editor.tsx
+++ b/packages/insomnia/src/ui/components/key-value-editor/key-value-editor.tsx
@@ -297,16 +297,14 @@ export const KeyValueEditor: FC<Props> = ({
             const isPairDisabled = !!readOnlyDisabledByName?.[lowerName];
 
             let valueEditor = (
-              <div className="relative flex h-full w-full flex-1 px-2">
-                <OneLineEditor
-                  id={'key-value-editor__value' + pair.id}
-                  placeholder={valuePlaceholder || 'Value'}
-                  defaultValue={pair.value}
-                  readOnly
-                  getAutocompleteConstants={() => handleGetAutocompleteValueConstants?.(pair) || []}
-                  onChange={() => {}}
-                />
-              </div>
+              <OneLineEditor
+                id={'key-value-editor__value' + pair.id}
+                placeholder={valuePlaceholder || 'Value'}
+                defaultValue={pair.value}
+                readOnly
+                getAutocompleteConstants={() => handleGetAutocompleteValueConstants?.(pair) || []}
+                onChange={() => {}}
+              />
             );
 
             if (isFile) {
@@ -337,7 +335,8 @@ export const KeyValueEditor: FC<Props> = ({
             return (
               <ListBoxItem
                 textValue={pair.name + '-' + pair.value}
-                className="flex h-(--line-height-sm) shrink-0 items-center gap-2 bg-(--color-bg) px-2 outline-hidden"
+                style={{ opacity: isPairDisabled ? '0.4' : '1' }}
+                className={`relative grid h-(--line-height-sm) shrink-0 gap-2 bg-(--color-bg) px-2 outline-hidden ${showDescription ? 'grid-cols-[max-content_1fr_1fr_1fr_max-content]' : 'grid-cols-[max-content_1fr_1fr_max-content]'}`}
               >
                 <div
                   slot="drag"
@@ -345,7 +344,7 @@ export const KeyValueEditor: FC<Props> = ({
                 >
                   <Icon icon="grip-vertical" className="w-2 text-(--hl)" />
                 </div>
-                <div className="relative flex h-full w-full flex-1 px-2">
+                <div>
                   <OneLineEditor
                     id={'key-value-editor__name' + pair.id}
                     placeholder={namePlaceholder || 'Name'}
@@ -354,20 +353,9 @@ export const KeyValueEditor: FC<Props> = ({
                     onChange={() => {}}
                   />
                 </div>
-                {valueEditor}
-                {pair.canDisable && onReadOnlyDisabledChange ? (
-                  <ToggleButton
-                    className="flex aspect-square h-7 items-center justify-center rounded-xs text-sm text-(--color-font) ring-1 ring-transparent transition-all hover:bg-(--hl-xs) focus:ring-(--hl-md) focus:ring-inset"
-                    onChange={isSelected => onReadOnlyDisabledChange(lowerName, !isSelected)}
-                    isSelected={!isPairDisabled}
-                  >
-                    <Icon icon={isPairDisabled ? 'square' : 'check-square'} />
-                  </ToggleButton>
-                ) : (
-                  <div aria-hidden="true" className="aspect-square h-7" />
-                )}
+                <div>{valueEditor}</div>
                 {showDescription && (
-                  <div className="relative flex h-full w-full flex-1 px-2">
+                  <div>
                     <OneLineEditor
                       id={'key-value-editor__description' + pair.id}
                       placeholder={descriptionPlaceholder || 'Description'}
@@ -377,7 +365,20 @@ export const KeyValueEditor: FC<Props> = ({
                     />
                   </div>
                 )}
-                <div className="flex w-23 shrink-0 items-center gap-2" />
+                <Toolbar className="flex items-center gap-1">
+                  {pair.canDisable && onReadOnlyDisabledChange ? (
+                    <ToggleButton
+                      className="flex aspect-square h-7 items-center justify-center rounded-xs text-sm text-(--color-font) ring-1 ring-transparent transition-all hover:bg-(--hl-xs) focus:ring-(--hl-md) focus:ring-inset"
+                      onChange={isSelected => onReadOnlyDisabledChange(lowerName, !isSelected)}
+                      isSelected={!isPairDisabled}
+                    >
+                      <Icon icon={isPairDisabled ? 'square' : 'check-square'} />
+                    </ToggleButton>
+                  ) : (
+                    <div aria-hidden="true" className="aspect-square h-7" />
+                  )}
+                  <div aria-hidden="true" className="aspect-square h-7" />
+                </Toolbar>
               </ListBoxItem>
             );
           }}