feat(ui): make topbar a sticky sidebar-styled container - #5155
Open
logical-tech wants to merge 1 commit into
Open
feat(ui): make topbar a sticky sidebar-styled container#5155logical-tech wants to merge 1 commit into
logical-tech wants to merge 1 commit into
Conversation
- Wrap the topbar in the same floating card style as the sidebar - Remove the vertical separator next to the sidebar trigger - Keep the topbar pinned while the content scrolls underneath - Tighten the gap between the sidebar and the main container
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
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 topbar had no container of its own, so it read as loose controls sitting next to the sidebar card. This gives it the same floating card as the sidebar and keeps it in place while the page scrolls.
What changed
SidebarInsetgetsh-svh. It only hadmin-h-svhwithoverflow-auto, so it grew instead of scrolling, the page scrolled instead, andposition: stickyhad nothing to stick to.z-20and the sidebar toz-30. Service cards place their status dot and selection button atz-10, and those were painting over the bar.Three files are touched:
layouts/side.tsx,shared/advance-breadcrumb.tsxandshared/breadcrumb-sidebar.tsx. All four headers get the same treatment, so the projects list, the environment view and the service pages behave the same way.No behaviour outside the layout shell changes. Tooltips, popovers and dialogs are portaled at
z-50or higher and still render above the bar.Screenshots
Before / after:
Scrolling with the topbar pinned:
Testing
Tested locally with
pnpm run dokploy:dev:Greptile Summary
The PR restyles the dashboard topbar as a floating card and makes it sticky within a viewport-height scrolling inset.
SidebarInsetthe viewport-height scroll container.Confidence Score: 5/5
The PR appears safe to merge, with no concrete blocking or independently actionable non-blocking issue identified.
The changed headers remain within the intended
SidebarInsetscroll container, route gating prevents duplicate topbars, responsive margin and padding adjustments align, and mobile sheets and portaled overlays remain above the updated sidebar and header stacking levels.Reviews (1): Last reviewed commit: "feat(ui): make topbar a sticky sidebar-s..." | Re-trigger Greptile