Skip to content

Center the ticker box and show validity as ✅/❌ beside it - #15

Merged
HRLoveFun merged 1 commit into
mainfrom
worktree-ticker-header-move
Sep 11, 2026
Merged

HRLoveFun merged 1 commit into
mainfrom
worktree-ticker-header-move

Conversation

@HRLoveFun

Copy link
Copy Markdown
Owner

Summary

Follow-up to #13 (merged), same header ticker bar.

  • .header-inner is now a 3-column grid (brand / parameters-bar / actions) so the ticker input is genuinely centered on the header row, not just left-packed next to the brand.
  • Ticker validity feedback is a single ✅/❌ glyph per ticker (title tooltip carries the ticker + price), rendered immediately to the right of the input via #ticker-badges — replacing both the old colored pill badges (which, turns out, never actually rendered: main.js was querying a #ticker-badges id no element had) and the "N ticker(s) valid" sentence that used to sit below the input. That sentence and its dead CSS are removed.
  • .parameters-bar-main is flex-wrap: nowrap on desktop specifically: a wrapping flex container's intrinsic width is only its widest single child (not the sum), which was starving the grid's auto column and wrapping the Run button onto its own line. Wrap comes back under the 768px breakpoint, where the row is stretched to the header's full width instead of being intrinsically sized, so wrapping there is safe.

Test plan

  • npx vitest run — 15 files / 189 tests pass
  • pytest -m "not network" --ignore=tests/e2e --maxfail=0 — full suite passes (one test_readiness.py failure on the first run was a pre-existing thread-timing flake, confirmed by re-running it in isolation; unrelated file, not touched here)
  • pytest tests/test_frontend_api.py — passes
  • python scripts/doc_guard.py / python scripts/arch_metrics.py --check — clean
  • Manual check with a local dev server + Playwright: screenshots confirming centering at desktop/narrow-desktop/mobile widths, and both ✅ (valid) and ❌ (invalid / no-valid-symbols) icon states rendering correctly with tooltips

🤖 Generated with Claude Code

.header-inner becomes a 3-column grid (brand / parameters-bar / actions)
instead of a 2-child flexbox, so the ticker input is genuinely centered
on the header row rather than left-packed next to the brand. The
Parameters bar's row is flex-wrap: nowrap on desktop specifically
because a wrapping flex container's intrinsic width is only its widest
single child, not the sum — that was starving the grid's auto column
and wrapping Run onto its own line; wrap comes back under the 768px
breakpoint, where the row is stretched to the header's full width
instead of being intrinsically sized.

Ticker validity feedback is now a single ✅/❌ glyph per ticker (with
the ticker + price as its title tooltip), rendered immediately right of
the input via #ticker-badges, replacing both the old (never-rendered —
main.js was querying a #ticker-badges id no element had) colored pill
badges and the "N ticker(s) valid" sentence that used to sit below the
input. The corresponding dead CSS (.ticker-validation*, the old
.ticker-badge pill styles) is removed.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
@HRLoveFun
HRLoveFun merged commit e9abc5c into main Sep 11, 2026
2 of 3 checks passed
@HRLoveFun
HRLoveFun deleted the worktree-ticker-header-move branch September 11, 2026 13:38
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.

1 participant