seb/hermes-agent
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(desktop): name the 600px sidebar collapse breakpoint

Browse Source 
Hoist the inline '(max-width: 600px)' literal into
SIDEBAR_COLLAPSE_BREAKPOINT_PX + SIDEBAR_COLLAPSE_MEDIA_QUERY in
layout-constants, so the responsive collapse point is a single named source
of truth instead of a magic string in the controller.
This commit is contained in:
Brooklyn Nicholson
2026-06-07 21:24:38 -05:00
parent 49579f355c
commit b5d668c69f
2 changed files with 11 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/desktop/src/app/desktop-controller.tsx
+5 -4
View File
@@ -78,6 +78,7 @@ import { CommandPalette } from './command-palette'
import { useGatewayBoot } from './gateway/hooks/use-gateway-boot'
import { useGatewayRequest } from './gateway/hooks/use-gateway-request'
import { useKeybinds } from './hooks/use-keybinds'
import { SIDEBAR_COLLAPSE_MEDIA_QUERY } from './layout-constants'
import { ModelPickerOverlay } from './model-picker-overlay'
import { ModelVisibilityOverlay } from './model-visibility-overlay'
import { RightSidebarPane } from './right-sidebar'
@@ -167,10 +168,10 @@ export function DesktopController() {
const terminalTakeover = useStore($terminalTakeover)
const panesFlipped = useStore($panesFlipped)
const profileScope = useStore($profileScope)
// Below 600px there's no room for a docked rail — collapse both sidebars
// (without touching their stored open state) so the hover-reveal overlay
// becomes the way in. Restores to the saved layout once it's wide again.
const narrowViewport = useMediaQuery('(max-width: 600px)')
// Below SIDEBAR_COLLAPSE_BREAKPOINT_PX there's no room for a docked rail —
// collapse both sidebars (without touching their stored open state) so the
// hover-reveal overlay becomes the way in. Restores once it's wide again.
const narrowViewport = useMediaQuery(SIDEBAR_COLLAPSE_MEDIA_QUERY)
const routedSessionId = routeSessionId(location.pathname)
const routeToken = `${location.pathname}:${location.search}:${location.hash}`
apps/desktop/src/app/layout-constants.ts
+6
View File
@@ -11,3 +11,9 @@ 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)]'
// 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 = 600
export const SIDEBAR_COLLAPSE_MEDIA_QUERY = `(max-width: ${SIDEBAR_COLLAPSE_BREAKPOINT_PX}px)`