Summary

At viewports ≥ 1024px (lg breakpoint), cards in the main content area extend behind the sidebar — the leftmost portion of card content gets clipped by the translucent sidebar. Reproduces on the default Hermes Teal theme; visible on every built-in theme.

Root cause

The aside uses lg:sticky lg:top-0 to enter flex flow at lg+, but in this layout sticky behaves as out-of-flow:

• the aside's flex parent has overflow-hidden (App.tsx#L455), so there's no scrolling ancestor for sticky to attach to
• the same element carries top-0 left-0 z-50 from the mobile position: fixed mode and transform: translateX(0) from the slide-in animation; the combination ends up rendering as if still out of flow

So flex-1 main content takes full width and the sidebar visually overlays it.

Fix

Swap lg:sticky → lg:relative. The aside enters flex flow as an ordinary flex item — lg:shrink-0 w-64 already gives it an explicit 256px column, which now correctly pushes flex-1 main content to its right. top-0 left-0 resolve to 0px offset under position: relative, visually identical. lg:top-0 was only meaningful for sticky and is removed.

Mobile (< lg) behavior is unchanged: aside stays position: fixed with the existing slide-in overlay.

Test plan

• lg+ (≥ 1024px): cards no longer clipped by sidebar (locally rebuilt + verified on `hermes dashboard`, default theme)
• < 1024px: sidebar still hidden by default; menu button → slide-in overlay still works
• Worth reviewing on `cockpit` `layoutVariant` (Strike Freedom demo theme) — same selector, fix should generalize but I haven't switched themes to confirm