Standard buttons now capitalize each word in their labels. Movement and
depth-shadow changes use an 80ms duration while color transitions stay
at 120ms.
Neutral buttons in dark mode now use a white 8% depth edge so it matches
the regular border. Highlighted buttons keep the accent-mixed edge.
Document the behavior and assert the dark-mode selector in CSS tests.
Standard .button controls now use a compact 2px bottom edge, lift 1px on
hover, and press down with the depth removed. Highlighted buttons mix the
accent with black for a matching edge, and focus-visible keeps the accent
ring. Other button-like controls still use the lighter scale press.
Replace inline modal-shadow styles on toasts, popups, and warning
banners with a shared `surface-popover` utility that uses the lighter
dropdown shadow instead of the heavier modal shadow. Apply the same
`shadow-dropdown` swap to the deployments indicator pill and the
server/deployment log floating menus. Remove now-unused console
header and error-contact-link rules from app.css, and add a test
asserting these surfaces consistently use the dropdown shadow.
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.
Turn the floating card settings rail into a flat, full-height rail welded
to the main sidebar (3rem -> bottom), surface bled across main's gutter.
Unify the application config grid to the canonical 210px/gap-8 (was the
lone 236px/gap-4 outlier). Affects all shared settings rails.
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.
Give the connected terminal (System theme) the same construction as the
target-picker card: an attached elevated header band holding the target and
theme selectors, a hairline frame, and a body panel whose ring forms the
divider and rounds into the header at the corners. The rounded-corner notch
now shows the elevated (header) surface while the terminal keeps a base fill.
Colorful console themes are unchanged.
- 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 shared easing curves and press/focus transitions for buttons, inputs,
and form controls in app.css. Refine dropdown, modal, tooltip, and
slide-over enter/leave transitions to use consistent easing and durations,
and remove the focus-visible box-shadow ring on inputs/selects in favor of
border-color transitions.
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.
Show routing summaries on domain tables below 600px instead of squeezing desktop columns. Scope preview add/edit Livewire events by preview id, authorize preview domain actions, and add search plus unsaved-edit handling.
Preserve in-progress domain edits and redirects across Livewire
refreshes, copy www port overrides for service redirect pairs, and
relocate preview deployment toggles from Advanced to Previews.
Unsaved bars can stay dirty via Alpine while a modal is closed, and
service domain tables stack at narrow widths.
Unify service backup history with pagination, schedule settings actions, S3 destination details, and team-safe access checks. Display server built-ins as read-only variables and add loading and empty states for searchable resources.
Add configurable development QEMU profiles, host setup, VM lifecycle management,
and commands to seed managed VMs as Coolify servers. Improve installation dialog
logs with responsive mobile presentation.
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 the subscription link for cloud team admins, anchor the mobile account menu below its trigger, and protect the subscription modal from Livewire morphing.
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.
Add responsive overflow handling and dedicated action menus for application,
service, database, and server headings, while improving upgrade and email
settings flows and returning 404s for missing deployment environments.
Limit enter/space deploy handlers to the card root with .self so nested focusable content no longer triggers deploy. Hide the environments table resource count on mobile via a stable class instead of nth-child.
Target selection now renders as a full-width layer card instead of a narrow
dialog floating in an empty full-height console canvas. The themed console
shell, its viewport height lock, and the console theme selector stay with an
open session, where they belong.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Preserve optimistic listbox selections during Livewire saves, refresh service domains after updates, and align application, service, and server navigation layouts.
Add keyboard-aware terminal controls, refine terminal layouts and navigation, surface proxy and Sentinel health warnings, and make avatar uploads update only after successful persistence.
Add reusable domain URL parsing and input components, expose per-domain
redirect and indexing controls, and improve application and service domain
layouts across responsive breakpoints.
List service database schedules with volume backups, add a database
picker when creating scheduled DB backups from the service page, and
cover the unified table and create flow in tests.
Replace min-h-screen with min-height: 100dvh on body for correct
mobile viewport height, and point the auth shell radial glow at
--color-coollabs instead of --color-accent. Add branding CSS tests.
