Repository navigation
View toolbars: each labelled section a tinted box, its label in ink - #44
Merged
Merged
Conversation
A view's toolbar sections (DATA, MODEL, VIEW, …) were hard to tell apart:
the section label was small grey uppercase text much like the field
labels beside it ("genes", "penalty"), the divider between sections a
faint 1px rule, and a section that wrapped to a new line lost its divider
altogether.
In a toolbar organised into labelled sections (`.viewtb` with a `.tbz`
holding a `.tbl`), every section holding more than a lone control is now
a box tinted --code-bg with a --line border, and the section label is
semibold --ink. A lone control (the oncoprint's "…") stays plain, with no
divider beside the boxes. The column gap and box padding are tightened so
a boxed toolbar is no wider than the old one: the plot toolbar that fit
on one line still does. Toolbars with no section labels — a table's
pager, the patient navigator, the timeline's track controls — have no
sections to tell apart and keep their plain dividers. `.tbl` elsewhere
(the Cox view's covariate rows, axis labels inside a section) is
unchanged. CSS only.
Verified with npm run visual against a baseline recorded from master on
this folder's dev server (156 shots, light and dark): 61 differ, each
accounted for — 51 are the toolbar band plus an 8px shift below it
(checked row by row: every other row matches the baseline at a shift of
0/8/16/24px), the plot views' two-line toolbars likewise, example 49 is
scatter-render noise inside its figure, and campaign-index and
lab-examples are environment noise (a database error's wording; 877
anti-aliasing pixels on a 12,000px page with no toolbar). Light and dark
crops of the risk model, oncoprint, genome, enrichment and plot toolbars
read before and after.
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01UCpBeF9VMrjXyddFKUfiSX
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
This branch was successfully deployed
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.
The sections of a view's toolbar (DATA, MODEL, VIEW, …) were hard to tell apart: the section label was small grey uppercase text much like the field labels beside it, the divider between sections a faint 1px rule, and a section that wrapped to a new line lost its divider. CSS only (
app/globals.css, 12 lines).Preview
Open the gallery's risk model or oncoprint example on the PR's preview deployment, e.g. the NSCLC risk model:
/lab?tab=analysis&doc=eyJkc2wiOiIyLjYiLCJzdHVkeSI6Im1za19jaG9yZF8yMDI0IiwiY29ob3J0cyI6eyJOU0NMQyI6eyJhbGwiOlt7ImtpbmQiOiJjbGluaWNhbCIsImF0dHJpYnV0ZSI6IkNBTkNFUl9UWVBFIiwidmFsdWVzIjpbIk5vbi1TbWFsbCBDZWxsIEx1bmcgQ2FuY2VyIl0sInBlciI6InNhbXBsZSJ9XX19LCJ2aWV3cyI6W3sia2luZCI6InJpc2ttb2RlbCIsImNvaG9ydHMiOlsiTlNDTEMiXSwicnVucyI6NX1dfQWhat changes
.viewtbwith a.tbzholding a.tbl), every section holding more than a lone control is a box tinted--code-bgwith a--lineborder, and its label is semibold--ink..tblused elsewhere (the Cox view's covariate rows, axis labels inside a section), every control's height and alignment.How it was verified
npm run visualagainst a baseline recorded from master on a dev server (156 shots, light and dark). 61 differ, each accounted for:scripts/gate.sh) green on the commit before rebasing onto Cold /api/studies: one routing build instead of 551 (28–40 s → 1.5 s over MCP) #42/Examples tab: accurate features and tags, and a search #43 (which merged cleanly; Examples tab: accurate features and tags, and a search #43's three stylesheet lines touch no toolbar), including e2e'smisalignedControlson the risk model, its dialogs, the timeline and the alterations view. CI runs the gate on this PR as rebased.🤖 Generated with Claude Code
https://claude.ai/code/session_01UCpBeF9VMrjXyddFKUfiSX