mirror of
https://github.com/NousResearch/hermes-agent.git
synced 2026-07-21 16:18:55 +00:00
66c3d595d1
Add a shared PAGE_MAX_W (1200px) and center OverlayMain within its pane so settings and command center bodies stay readable instead of sprawling on wide/ultrawide displays.
25 lines
1.4 KiB
TypeScript
25 lines
1.4 KiB
TypeScript
// Responsive horizontal gutter for primary content bodies (settings right side,
|
|
// skills, artifacts, command center / sessions). Ratio-based so it scales with
|
|
// the window, but clamped so it never collapses on narrow widths or runs away
|
|
// on ultrawide displays. Headers/tabs intentionally keep their own tighter
|
|
// padding.
|
|
//
|
|
// NOTE: these must stay literal strings — Tailwind's scanner only picks up
|
|
// complete class names, so do not build them via template interpolation.
|
|
export const PAGE_INSET_X = 'px-[clamp(1.25rem,4vw,4rem)]'
|
|
|
|
// Matching negative inline-margin to bleed an element (e.g. a sticky header bar)
|
|
// out to the gutter edges before re-applying PAGE_INSET_X.
|
|
export const PAGE_INSET_NEG_X = '-mx-[clamp(1.25rem,4vw,4rem)]'
|
|
|
|
// Readable cap for overlay "inner page" bodies (settings, command center). Wide
|
|
// enough to breathe, tight enough that content doesn't sprawl on ultrawide
|
|
// displays. Pair with `mx-auto w-full` to center within the pane. Literal string
|
|
// for Tailwind's scanner (see PAGE_INSET_X note).
|
|
export const PAGE_MAX_W = 'max-w-[75rem]'
|
|
|
|
// Below this viewport width a docked sidebar leaves no room for content, so both
|
|
// rails auto-collapse into the hover-reveal overlay. Single source of truth for
|
|
// the responsive collapse point.
|
|
export const SIDEBAR_COLLAPSE_BREAKPOINT_PX = 768
|
|
export const SIDEBAR_COLLAPSE_MEDIA_QUERY = `(max-width: ${SIDEBAR_COLLAPSE_BREAKPOINT_PX}px)`
|