Skip to content

feat(ui): make topbar a sticky sidebar-styled container - #5155

Open
logical-tech wants to merge 1 commit into
Dokploy:canaryfrom
logical-tech:feat/sticky-topbar-container
Open

feat(ui): make topbar a sticky sidebar-styled container#5155
logical-tech wants to merge 1 commit into
Dokploy:canaryfrom
logical-tech:feat/sticky-topbar-container

Conversation

@logical-tech

@logical-tech logical-tech commented Aug 21, 2026

Copy link
Copy Markdown

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

  • The topbar now sits in a card with the same background, radius, ring and shadow as the floating sidebar.
  • Removed the vertical separator next to the sidebar toggle.
  • The topbar stays put on scroll and the content passes under it. The header background reaches the edges of the inset, so nothing shows up beside the bar while scrolling.
  • The gap between the sidebar and the main container is now 8px, matching the gap between the topbar and the content below it. It was 24px before.
  • SidebarInset gets h-svh. It only had min-h-svh with overflow-auto, so it grew instead of scrolling, the page scrolled instead, and position: sticky had nothing to stick to.
  • The topbar moves to z-20 and the sidebar to z-30. Service cards place their status dot and selection button at z-10, and those were painting over the bar.

Three files are touched: layouts/side.tsx, shared/advance-breadcrumb.tsx and shared/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-50 or higher and still render above the bar.

Screenshots

Before / after:
Scrolling with the topbar pinned:

Testing

Tested locally with pnpm run dokploy:dev:

  • Projects list, at rest and scrolled
  • Project and environment view
  • Service pages (application, compose, database)
  • Sidebar expanded and collapsed to icons
  • Light and dark theme
  • Mobile width, where the sidebar is a sheet
Screenshot

Greptile Summary

The PR restyles the dashboard topbar as a floating card and makes it sticky within a viewport-height scrolling inset.

  • Aligns topbar styling and spacing with the floating sidebar.
  • Makes SidebarInset the viewport-height scroll container.
  • Adjusts sidebar and topbar stacking levels to prevent service-card controls from painting above the header.
  • Applies the same sticky header treatment across project, environment, service, and non-project dashboard views.

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 SidebarInset scroll 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

- 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
@dosubot dosubot Bot added the size:M This PR changes 30-99 lines, ignoring generated files. label Aug 21, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

size:M This PR changes 30-99 lines, ignoring generated files.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant