Scroll active application settings sections with buttons instead of Livewire navigation, persist sidebar collapse even with auto-collapse, drop the unused modal id, and right-align destination status.
Auto-collapse the main sidebar on pages that have a settings rail (follows
the page when enabled; expanded elsewhere), with an animated slide and a
profile-menu toggle (localStorage) to disable it.
Rework the settings rail to position:fixed like the main sidebar: full
height (3rem -> viewport bottom), left tracks the sidebar's collapsing
width via --sidebar-w, content pinned to grid column 2. Fixes the sticky
scroll crop and top/bottom gaps.
Introduce theme-controls and theme-controls/picker Blade components
housing the theme/page-width/custom-color logic previously duplicated
in top-user-menu and profile/appearance, and fix custom theme surface
colors to use oklch mixes instead of raw white/black/hex for correct
contrast.
- Settings rail (application-settings-navigation) is now white in light mode
instead of a gray fill; separation comes from the hairline ring + soft lift.
- Mobile slide-over: replace the heavy shadow-modal with a soft left-casting
shadow (scrim handles content dimming, shadcn-style) + rounded-l corners.
- Unify scattered shadow-lg usages onto the shadow-dropdown / shadow-modal
tokens across dropdowns, tooltips, popups and slide-over.
- Light-mode semantic text + tertiary/nav contrast tuning for WCAG AA.
- status-summary: support right-aligned dropdown; use it on the app heading.
- Add reusable <x-section-heading> (title, muted subtitle, optional action)
with a compact contained "View all" button; migrate dashboard Projects/
Servers/Deployments and shared-variables environment headers to it.
- Dashboard: hide the empty active-deployments node so it no longer adds a
gap above the first section; align section actions with the title row.
- Mobile: use the panel-left sidebar-toggle icon (matching desktop) as the
drawer trigger instead of a hamburger.
Design tokens
- Fix WCAG AA text failures: darken light muted text and lighten dark
tertiary text so 13-14px copy clears 4.5:1 on every surface.
- Rebuild the dark surface ladder in correct values (oklch compresses to
near-black below ~15%), giving visible steps: content, chrome, cards.
- Establish a 3-layer shell (deep content, lighter sidebar/topbar chrome,
lifted cards) with crisp hairline rings and a restrained card shadow.
- Unify every surface to one neutral temperature (pure gray); neutralize
the cool-tinted sidebar text and legacy surface tokens.
- Convert all color tokens to oklch (neutrals + brand).
- Unify inputs to the recessed token; fix invisible dark placeholders.
- One shared --shadow-dropdown for all menus/listboxes/command palette.
Settings sidebar
- Sticky contained-card rail with subtle scrollbar; collapsible sub-section
groups (active open by default), cross-page section links.
- Mobile: collapsible disclosure with animated open, outside/Escape dismiss,
press feedback, and reduced-motion support.
Mobile
- Consolidate the resource header (title + status + links on one row).
- Tighten settings-page vertical rhythm.
- Rebuild the main sidebar as an animated shadcn-style sheet (slide/fade,
Escape, scroll lock, in-panel close, close-on-navigate).
Fixes
- #11532: selected server invisible in the light-mode terminal toolbar.
Docs: update DESIGN.md tokens, shell layering, and temperature rules.
Use the warning accent for dark-mode loading indicators and simplify desktop navigation chrome by removing sidebar and top-bar separator borders. Add regression coverage for loading contrast and checkpoint spinner markup.
Add full-width and centered layout preferences across the app shell and workspaces.
Replace page-size selects with dropdowns and add searchable breadcrumb switching.
Add project icon storage and serving with local/S3 support, prevent deletion of compose-managed volumes, and optimize volume backups. Refine project and backup UI components with consistent styling and coverage.
Introduce x-table toolbar/search/filter/sort/loading components and
multi-select deployment history filters with OR within groups and AND
across groups. Add live database/service status for breadcrumbs, shared
variables layout controls, logs viewer toolbar polish, and infrastructure
list filter consistency. Document patterns in UI_REDESIGN.md and cover
with feature tests.
Group service domain tables with inline redirect controls, live-save
redirects without full refreshes, and only auto-pair www hosts when a
www redirect is active. Align helper tooltips, server-timing HUD, and
loading spinners with dark-theme accents; default theme-color to dark.
Move email verification and team invitation into x-auth.shell with
shared guidance/alert patterns. Truncate long team names in the mobile
header switcher so actions stay visible. Cover both with markup tests.
Add an application Internal access section that loads the running
container hostname (skipped for Compose apps), densify configuration
diff and popup-small defaults, dock the server-timing HUD into the
mobile top bar, restyle the 2FA challenge with the auth shell, and
enforce 16px mobile form fonts to prevent iOS zoom.
Teleport application/database/service heading actions into a fixed
#resource-action-hud-slot so they no longer overlay page content.
Render the account menu in the sidebar footer (with collapse-aware
layout) instead of the header, and drop the project card hover arrow.
Store deployment configuration snapshots on application deployment queues and compare them against the current application state. Surface grouped pending changes in the configuration checker and use build-impact diffs to decide when an existing image can skip the build step.
Move the deployments indicator inside the app layout state scope so it can react to the sidebar collapsed state, and add a layout test covering the responsive positioning.
Sidebar collapses to icon-only mode on lg breakpoint. State persists
in localStorage. Collapsed state shows logo icon, team initial button
with flyout menu, and hover tooltips for nav items.
- Adjusted CSS styles in the navbar for improved readability and responsiveness.
- Updated the layout of the sidebar and navbar components to enhance user experience on different screen sizes.
- Ensured consistent alignment and spacing for elements within the navbar and sidebar.
- Moved global search component from navbar to main app layout
- Fixed issue where navbar was included twice (mobile & desktop)
- Created single instance that handles all keyboard shortcuts
- Added search button in navbar that triggers global search modal
- Resolves issue where two modals opened when using Ctrl+K, Cmd+K, Ctrl+/, Cmd+/
Fixes#6715
Co-authored-by: Andras Bacsai <andrasbacsai@users.noreply.github.com>
Especially in full width and mobile view, the navbar looked cramped
because there was very little padding to the left end of the screen.
This commit adds horizontal padding to the navbar
and increases its width from 48 to 56 tailwind units.
