fix(portal): toolbar alignment, chart tooltip, and a dark-mode selection regression - #66
Merged
Merged
Conversation
My own regression. The selected row used to be bg-slate-900, so its contents were written as text-white. Making selected states invert — so they could be seen in dark mode — turned the row near-white there, and the name, role and avatar initial kept their hard-coded white. They take the same inverting token as the row now, so they flip with it instead of against it. Checked the three other files that got the inverted selection: none has a hard-coded white inside one. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
It was hard-coded #ffffff with #000000 text — a light-mode tooltip that stayed white in dark mode. Recharts also colours the value after the slice it came from, so on a pale slice the number was light text on a light card. All three styles take theme tokens now: the card is the surface colour, and the label and value are both forced to text-main rather than inheriting the slice's. The other chart on this page already did this; the donut was the one left behind. The value also runs through formatDuration, so it reads "8h 01m" rather than 481 — the raw minutes meant nothing next to a ring measured in hours. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
The "206h HOURS" overlay sits in the middle of the ring as an absolutely positioned sibling, after the chart in the DOM and with no stacking order of its own — so it drew on top of the tooltip, and the two sets of text landed on each other. The tooltip gets z-50 and the overlay z-0, so the tooltip wins while it is open. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
The date control and the buttons were one flex row; the member filter and the timezone were another. Each sized itself and right-aligned independently, with different gaps — gap-6 above, gap-4 below — so the boundary between the first and second item never lined up between the rows. They are four children of a two-column grid now. Both rows draw their column widths from the same track, so the edges meet by construction rather than by matching numbers that would drift the next time something changed. Nothing shrinks: the columns size to their content, and the member filter's min-width still applies. Below 900px it is a single column, as before. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Both items in the grid's first column carried min-[900px]:w-auto, so each sized to its own content instead of taking the column. The date control and the member filter came out different widths and their left edges missed each other. Both are w-full now, so they take the shared column — which is as wide as the wider of the two, so neither gets smaller. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Filling the grid column stretched it to the width of the date control above. It sizes to its own content again — a 220px minimum — and ml-auto pushes it to the column's right edge, so it loses the width from the left and still finishes where the date control finishes. The date control keeps the full column, so the two right edges meet. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Collaborator
Author
|
furqan-debug
approved these changes
Sep 21, 2026
Repository owner
locked and limited conversation to collaborators
Sep 21, 2026
furqan-debug
left a comment
furqan-debug
left a comment
Owner
There was a problem hiding this comment.
Review has been completed
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 subscribe to this conversation on GitHub.
Already have an account?
Sign in.
2 participants
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.
gap-6above,gap-4below), so the boundary between the first and second item never matched between rows. They're four children of a two-column grid now, drawing their widths from the same track — the edges meet by construction rather than by matching numbers that drift.ml-autopinning it to the column's right edge, so it's narrower than the date control above and finishes where that finishes.text-whitewritten for the oldbg-slate-900. Name, role and avatar initial now take the same inverting token as the row. Checked the three other files that got the inverted selection — none has the same problem.#ffffffwith#000000text: a light-mode tooltip that stayed white in dark mode. Recharts also colours the value after the slice it came from, so on a pale slice it was light text on a light card. All three styles take theme tokens now.z-50, overlayz-0.formatDuration, so it reads8h 01mrather than481— raw minutes meant nothing beside a ring labelled in hours.