Skip to content

fix(#470): render a Dashboard filter diagnostic in place, not a second row - #491

Merged
BorisTyshkevich merged 1 commit into
mainfrom
fix/filter-diagnostic-row-470
Jul 27, 2026
Merged

fix(#470): render a Dashboard filter diagnostic in place, not a second row#491
BorisTyshkevich merged 1 commit into
mainfrom
fix/filter-diagnostic-row-470

Conversation

@BorisTyshkevich

Copy link
Copy Markdown
Collaborator

What & why

Closes #470.

A Dashboard filter's "no inferred control" diagnostic (shown for
container-typed variables — Array/Tuple/Map/Nested — with no option SQL
configured, e.g. Array(Int32)) used to render as a second element
appended 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), grid
auto-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-input in place, mirroring the
existing is-invalid/is-conflict affordances already established in
var-field.ts:

  • a new is-unsupported class carries the yellow/dashed warning styling on
    the input itself;
  • a decorative warning icon is absolutely positioned over the input (the same
    technique the inline clear (×) button already uses), so it can never add a
    new grid row;
  • the full diagnostic message reaches pointer hover via title — folded into
    baseTitle itself (not assigned once after build) so it survives every
    later keystroke/commit, which reset title from baseTitle via
    applyFieldState and would otherwise silently revert to the plain type
    tooltip the moment the user typed;
  • the full diagnostic also reaches keyboard focus/screen readers via
    aria-describedby, pointing at a visually-hidden .sr-only sibling.

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-right for the icon eats into the box via the project's global
box-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 test passes (the per-file coverage gate is non-negotiable)
  • Tests added/updated in the same change as the code
  • npm run build succeeds (single-file dist/sql.html)
  • Layers kept honest: pure logic in src/core/, network in src/net/ (injected fetch), DOM in src/ui/
  • No new runtime dependency
  • CHANGELOG.md ([Unreleased]) updated
  • No tracked roadmap work reshaped (standalone bug fix, not part of a phased issue)

…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
@BorisTyshkevich
BorisTyshkevich merged commit 30f8550 into main Jul 27, 2026
7 checks passed
@BorisTyshkevich
BorisTyshkevich deleted the fix/filter-diagnostic-row-470 branch August 6, 2026 15:28
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Render filter validation errors on the original control instead of a duplicate second row

1 participant