fix: webview layout, input contrast, and error-status visibility - #27
Merged
Merged
Conversation
Moving a request (or an ancestor folder) via the sidebar left any open request-editor panel pinned to the folderId it was opened with, so it kept using the old collection's base URL, headers, and environment instead of the destination's. Track the panel's current folder separately and push a refresh whenever it moves. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
- The "set active" toggle was a plain circle that only changed fill color (read as a radio button, gave no feedback in the list itself). Replace it with an icon-only tick that's colored when active and only hinted on hover otherwise, plus an explicit "Active" badge in the list row. - The first environment created for a collection is now made active automatically; later ones leave the current active environment alone. - Restructure the variables table into the same two-column (checkbox+key | value+delete) row layout used elsewhere, collapsing to one column on a narrow panel via a container query. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
- Headers/Query Parameters rows in the settings editor were cramped on
a narrow panel: the key/value fields (and their checkbox/delete
button) shrank together instead of ever wrapping, and a plain
<input> sibling next to a wrapped AutocompleteInput/EnvVarInput
never sized evenly with it since the wrapper div, not the class on
the inner textarea, is the actual flex item. Restructure each row
into two explicit column-groups (checkbox+name | value+delete) that
collapse to a single column via a container query.
- The `{{variable}}` completion popup rendered inside a fieldset with
`position: relative`, which creates its own stacking context — a
later sibling fieldset (e.g. "Headers") painted over the popup
regardless of its z-index. Portal it to <body> with a live computed
position instead, matching how AutocompleteInput already avoids this.
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
- Headers/Params/Cookies/Form Data rows were cramped and never wrapped
on a narrow panel, for the same reasons as the Collection/Folder
settings equivalent: no min-width/wrap on the flex row, and a plain
<input> next to a wrapped AutocompleteInput/VarInput never sized
evenly with it since the wrapper div is the real flex item, not the
class on the inner textarea. Restructure each row into two explicit
column-groups (checkbox+name | value+buttons) that collapse to a
single column via a container query.
- .header-key/.header-value/.form-data-key/.form-data-value had zero
vertical padding, which is invisible on a native <input> (browsers
auto-center it) but leaves an auto-growing <textarea> flush against
its own border since textareas don't auto-center. Give them real
vertical padding.
- The `{{variable}}` completion popup rendered inside a fieldset with
`position: relative`, creating its own stacking context — a later
sibling fieldset (e.g. the Auth tab's) painted over the popup
regardless of z-index. Portal it to <body> with a live computed
position instead, matching AutocompleteInput's existing approach.
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Text fields, selects, and the JSON body editor were bordered with either --vscode-panel-border (meant for subtle panel/divider lines) or a decorative ~8%-opacity "glass" token, both chosen for soft card edges rather than field affordance — making it hard to tell where an editable box starts and ends. Use the theme's dedicated --vscode-input-border where available, falling back to the previous value on themes that don't define it, so there's no regression. Left buttons, card/fieldset containers, and dropdown menus on their existing borders — this is scoped to controls a user actually types into (URL bar, method select, header/param/cookie/form-data rows, Auth fields, content-type select, JSON editor). Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Headers/Params/Cookies/Form-data rows, and the Environment Variables table, put a subtle border-right on the name column (checkbox+key) rather than on either field's own box, so it reads as a row divider sitting in the column gap instead of a third competing border. Removed again by the same container query that collapses each row to a single stacked column on a narrow panel, since a vertical divider makes no sense once the columns aren't side by side. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
The vertical divider between key/value columns (previous commit) wasn't actually what was wanted — a horizontal line between consecutive rows helps identify each key/value pair, including once a row's value wraps to multiple lines or the row stacks into a single column on a narrow panel, neither of which a vertical column divider addresses. Applied to Headers/Params/Cookies/Form-data rows and the Environment Variables table (as a border-bottom with no divider after the last row in each list). Left Collection/Folder settings' Headers/Params rows alone — those already have their own full box border per row. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
A 404 (or any error) response still returns a body, and the only signal it wasn't a success was a status badge styled as a soft ~20% opacity tint — similar enough to the success/redirect badges next to it that it was easy to read the returned body as normal data and miss the status entirely. Client and server error statuses (and the network-error fallback) now share one solid red badge with white text and a red glow, instead of color-only differentiation between amber (4xx) and muted red (5xx). Applied in both request/styles.css and history/styles.css since the history components are shared between the standalone History view and the Request editor's own History tab, each with its own bundled CSS. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
slverma
pushed a commit
that referenced
this pull request
Sep 13, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
{{variable}}autocomplete popup rendering behind a later sibling section — it lived inside aposition: relativefieldset's own stacking context, so z-index couldn't save it; now portaled to<body>like the header-suggestion dropdown already was.--vscode-input-borderinstead of a low-contrast panel/glass-border token, so field boundaries are identifiable; buttons, cards, and menus are untouched.Test plan
{{near a field close to a section boundary (e.g. Base URL, just above Headers); confirm the suggestion popup isn't clippednpx tsc --noEmitpasses🤖 Generated with Claude Code