Repository navigation
style(portal): consistent dropdowns and Activity toolbars - #58
Merged
Merged
Conversation
This was the last native <select> on the member form, so it opened the operating system's list — grey rows, a blue selection bar, none of the app's typography, and unstyled in dark mode. Every other field on the page, Employment Type and Timezone beside it included, uses FormSelect. Same options and the same three stored values; only the control changes. It gains what FormSelect already provides: an icon, the accent colour on the active row, a tick beside it, and click-outside to dismiss. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
The member pill had no height, so it sized to its own text and came out about two pixels shorter than the date pill (h-10) and the refresh button (40px) either side of it. Three controls in a row, one of them not matching. Height only. The width still comes from the content, so the pill is the same size it was. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
FilterSelect puts `className` on its outer wrapper, not on the trigger, so the `border-none bg-transparent` this call site passed never reached the element painting the border. The trigger kept its own border and fill inside the panel's, which is the doubled, inset look on the Screenshots toolbar — one pill drawn twice. A `flush` prop drops the trigger's border and background for the case where a surrounding panel already provides them. Opt-in and defaulted off, so the four other FilterSelect call sites are untouched. Nothing about the size changes: the panel still supplies the same padding, border and height, and the trigger fills it. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
--primary is #FFD700 in dark mode, so isOpen ? "text-primary" turned the icon and chevron gold the moment the dropdown opened. The open pill read as a different control from the closed one sitting beside it. Both stay text-text-muted now. The chevron still rotates, which is what actually signals the open state. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
…frame The Screenshots member filter sat inside a wrapper panel that drew its own border, background and 4px of padding. FilterSelect then drew its pill inside that, so the wrapper's surface showed as a ring around it — the background visible behind the control. The wrapper is gone. FilterSelect draws the whole pill, as it already does on Timesheets, Reports and App & URLs, and h-10 keeps it level with the date pill and the refresh button. This also retires `flush`, added two commits ago to stop the doubled border from the other direction. With no wrapper there is nothing to be flush against, and nothing else used it. The pill is 8px narrower — that width was the wrapper's padding, which is the thing being removed. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
The two pages sit next to each other under Activity and had different controls. App Usage wrapped its member filter in a fixed min-w-[200px] box, left the icon uncoloured so it inherited rather than staying muted, and gave the date picker no way to step a day at a time — no arrows, so moving between days meant opening the calendar every time. Both controls are now the same markup as Screenshots: a bare FilterSelect at h-10, and the date pill with its previous/next arrows, the forward one disabled on today. Also renames "Every Member" to "All Members". It is the same option, and the two pages naming it differently read as two different filters. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
furqan-debug
approved these changes
Sep 17, 2026
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
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.
<select>, so the browser handed rendering to the operating system — grey rows, a blue selection bar, no dark-mode styling. It was the last one on the member form; every other field there usesFormSelect. Same three stored values (prompt/always/never), now with the app's own dropdown, an icon, the accent on the active row, and a tick beside it.<div>drew its own border, background, and 4px of padding, andFilterSelectdrew its pill inside that — so the wrapper's surface showed as a ring around the control. The wrapper is gone;FilterSelectdraws the whole pill, as on Timesheets and Reports. It is 8px narrower as a result, which was the wrapper's padding.isOpen ? "text-primary"on the icon and chevron, and--primaryis#FFD700in dark mode, so an open pill read as a different control from the closed one beside it. Both stay muted now; the chevron still rotates, which is what actually signals the state.min-w-[200px], left the icon uncoloured so it inherited rather than staying muted, and gave the date picker no previous/next arrows — stepping one day meant opening the calendar every time. Both toolbars are now the same markup, verified by diffing them.id, but the two pages naming it differently read as two different filters. This is the only non-visual change in the PR.