fix(#470): render a Dashboard filter diagnostic in place, not a second row - #491
Merged
Merged
Conversation
…d row The no-inferred-control marker for Array/Tuple/Map/Nested variables used to be a sibling element (icon + a repeat of the declared type) appended beside the input; since both it and the input's wrapper were pinned to the same CSS grid column, the layout pushed it into a second visible row that read as a duplicate control. It now adorns the SAME input in place — a warning class mirroring the existing is-invalid/is-conflict affordances, a decorative icon absolutely positioned over the input, and the full diagnostic reachable on hover (title, folded into baseTitle so it survives every later keystroke/commit) and keyboard focus (aria-describedby) — with no change to the input's rendered width. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_011sMwR4BHM85MExSBYXzTYj
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
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.
What & why
Closes #470.
A Dashboard filter's "no inferred control" diagnostic (shown for
container-typed variables —
Array/Tuple/Map/Nested— with no option SQLconfigured, e.g.
Array(Int32)) used to render as a second elementappended beside the input. Since that element and the input's own wrapper were
both pinned to the same CSS grid column (
.var-field's 2-column grid), gridauto-placement pushed it into a visible second row — reading as a duplicate
control repeating the declared type text, rather than an error/warning state
on the existing filter.
The diagnostic now adorns the same
.var-inputin place, mirroring theexisting
is-invalid/is-conflictaffordances already established invar-field.ts:is-unsupportedclass carries the yellow/dashed warning styling onthe input itself;
technique the inline clear (×) button already uses), so it can never add a
new grid row;
title— folded intobaseTitleitself (not assigned once after build) so it survives everylater keystroke/commit, which reset
titlefrombaseTitleviaapplyFieldStateand would otherwise silently revert to the plain typetooltip the moment the user typed;
aria-describedby, pointing at a visually-hidden.sr-onlysibling.The input's rendered width is unchanged (verified pixel-identical, 102.3px,
between diagnostic and non-diagnostic fields in a real browser check) — the
extra
padding-rightfor the icon eats into the box via the project's globalbox-sizing: border-box, it doesn't grow it.Verified visually in a real browser (grid layout is invisible to the
happy-dom unit suite): before the fix, the marker lands in its own row below
the input; after the fix, one row, aligned with any other filter in the same
strip.
Checklist
npm testpasses (the per-file coverage gate is non-negotiable)npm run buildsucceeds (single-filedist/sql.html)src/core/, network insrc/net/(injected fetch), DOM insrc/ui/CHANGELOG.md([Unreleased]) updated