Repository navigation
style(portal): align page headings and rework the Timesheets toolbar - #60
Merged
Merged
Conversation
PageLayout sets p-4 md:px-10 md:py-12, so a page using it plainly — Reports and Screenshots — puts its <h1> 48px down and 40px in. Three pages sat elsewhere: - Team Overview carried an eyebrow above the title. Nothing else in the screenshots has one, and it pushed the heading a line lower. - Edit Project carried a back button above the title, which pushed it lower again by a different amount. - Timesheets does not use PageLayout at all. Its own header was px-8 py-6, so the title sat 24px higher and 8px further left than every other page. Its toolbar was px-8 too and has been brought to the same left edge. Removing the back button also removes the "Back to Projects" text, which was asked for separately. Projects is still reachable from the sidebar and from browser Back, but that page now has no back affordance of its own. Profile, Projects, Security and Change Plan have the same eyebrow and back-button offsets. They were not in scope here and are unchanged, so they still sit lower than the rest. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Applies the same rule to the four pages left over: Profile, Projects and Security each carried an eyebrow above the title, and Change Plan carried a back button. Both push the <h1> below where Reports and Screenshots put it. No page passes `eyebrow` or `backButton` now, so every PageLayout page starts its heading in the same place. The props stay on the component — nothing uses them, but they are a reasonable thing for a page to want. Change Plan loses its "Back to Billing" affordance, as Edit Project lost "Back to Projects". Billing is still reachable from Settings and from browser Back. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
The previous commits aligned the headings by deleting the eyebrow from the four pages that had one. The text was wanted; only its effect on the heading's position was not. The eyebrow now renders above the title without occupying layout space, so a page carrying one puts its <h1> at exactly the same height as one that does not. WORKSPACE ANALYTICS & INSIGHTS, ACCOUNT & IDENTITY, PORTFOLIO & ASSETS and ACCOUNT SECURITY are all back, unchanged. It stays in flow below md, where the container's 16px of padding leaves no room to sit above the title. The back buttons are not restored — those were removed on request, not as a side effect of alignment. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Daily/Weekly/Calendar moves to the left of the toolbar; the date, timezone, member filter, Filter and Add time move to the right. The three groups used to be siblings of a wrapping flex row, which is why the switcher ended up alongside the date while the member controls wrapped underneath. The two filter rows are now one group, stacked and aligned to the right edge, so the switcher can hold the left on its own. flex-wrap is gone with it — two children, no wrapping to do — and the row aligns to the top rather than the centre, since the right side is two rows tall and the left is one. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
24px of header bottom padding plus 16px of toolbar top padding sat between the description and the date control. PageLayout bottom-aligns its actions against the heading block with nothing but pb-1, so every page using it put its date control 40px higher than this one. Both paddings drop to match, which moves the whole toolbar up by 40px. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
The toolbar row aligns its two groups to the top, so the date, timezone, member filter, Filter and Add time started level with the view switcher on the left. This lifts that group 24px above that line. A negative margin rather than a different alignment: the two groups are different heights, so aligning them by any rule ties this group's position to the switcher's. The header's right side is empty, so the group rises into it without meeting the heading, which sits on the left. Desktop only. Below 900px the toolbar is a single column and there is nothing to raise it past. 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.
md, where the container's 16px of padding leaves no room above.PageLayout. Its header waspx-8 py-6, putting the title 24px higher and 8px further left than every other page; its toolbar waspx-8too. Both match now.flex-wrapis gone and the row aligns to the top rather than the centre.PageLayoutputs its actions.