mirror/insomnia
1
0
Fork 0
mirror of https://github.com/Kong/insomnia.git synced 2026-08-04 03:42:20 -04:00
Code Issues Packages Projects Releases Wiki Activity

fix(ui): align header editors using grid (#10061)

Browse Source
This commit is contained in:
Ryan Willis
2026-06-10 14:38:24 -07:00
committed by GitHub
parent 0705350a89
commit f035abb8df
1 changed files with 27 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
packages/insomnia/src/ui/components/key-value-editor/key-value-editor.tsx
View File

@@ -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>
);
}}