Date: 2026-04-09
On the document detail view, reclaim horizontal space for the data panel by:
All other pages keep their current 300px (or responsive 220/60px) sidebar and the current 50/50 pdf/data split.
The document detail view is where users spend the most time reading extracted data — matches, validation, line items, payment summary. The current 50/50 split between PDF and data panel wastes horizontal space on wide monitors: the PDF is already legible well below half-width, while the data panel has to wrap or scroll.
Collapsing the sidebar on this view also reduces visual noise during deep-focus review. The user explicitly does not want an expansion affordance — clicking a sidebar icon navigates away from the detail view anyway, so the icon rail with title tooltips is sufficient.
src/com/getorcha/app/ui/layout.clj)base wraps content in .app-container → .sidebar + <main.content>.:show-sidebar? (default true).title attributes (lines 50, 54, 58, 62) that show on hover when labels are hidden.super-admin-mode) via a single :class attribute.resources/app/public/css/style.css):root { --sidebar-width: 300px; } (line 5).sidebar is position: fixed; width: var(--sidebar-width); z-index: 100; with a transition on width (line 34)..content uses margin-left: var(--sidebar-width); (line 259).@media (max-width: 1366px) → --sidebar-width: 220px (compact phase).@media (max-width: 1023px) → --sidebar-width: 60px plus a block of rules that hide .logo-full / show .logo-icon, hide .nav-items li a span, hide .user-name / .user-chevron / .user-menu, and set .content { margin-left: 60px; } (icon rail phase, lines 294–346).title tooltips as the only label hint..detail-container (line 1518): display: flex; gap: 16px; height: calc(100vh - 120px);.pdf-panel (line 1523): flex: 1; min-width: 300px; max-width: 100%; resize: horizontal;.data-panel (line 1696): flex: 1; overflow-y: auto;src/com/getorcha/app/http/documents/view/shared.clj::detail-page (line 748) calls app.ui.layout/base with :title, :active-nav, :tenants, :current-tenant-name.Add a :compact-sidebar? option to app.ui.layout/base (default false). When truthy:
<body> element gets an additional CSS class compact-sidebar-mode, composed with the existing super-admin-mode class (if applicable).nav function renders the same DOM. All visual differences are driven by CSS scoped to body.compact-sidebar-mode.The sidebar remains in the DOM and stays navigable; the user can still click any icon to leave the detail view.
Add a new CSS rule block scoped to body.compact-sidebar-mode that mirrors the current @media (max-width: 1023px) sidebar-collapse rules:
--sidebar-width: 60px;.sidebar { width: 60px; padding-bottom: 12px; overflow: visible; }.logo { display: flex; justify-content: center; padding: 16px 0 10px; }.logo-full { display: none; }.logo-icon { display: block; width: 28px; height: 28px; }.nav-items li a { justify-content: center; padding: 12px 0; gap: 0; }.nav-items li a span { display: none; }.nav-items li a iconify-icon { font-size: 20px; }.nav-items li.active a { padding-left: 0; border-left: 2px solid #58a6ff; }.sidebar-user { padding: 8px 0; }.user-trigger { justify-content: center; padding: 8px; }.user-name, .user-chevron { display: none; }.user-menu { display: none; }.content { margin-left: 60px; }The existing @media (max-width: 1023px) block stays untouched. The duplication is intentional: it keeps viewport-based and page-based triggers independent, and avoids having one rule silently depend on the other.
No hover, no click-to-expand, no JS. The sidebar is a static 60px icon rail on the detail view.
In .pdf-panel (style.css:1523), change:
max-width: 100%;
to:
max-width: 720px;
Leave flex: 1, min-width: 300px, and resize: horizontal as-is.
.data-panel stays flex: 1 with no changes. Flexbox redistribution means that once the PDF hits its 720px cap, the remaining horizontal space flows to the data panel automatically.
Behavior by viewport width (accounting for the 60px compact sidebar, 24+24px .content padding, and 16px flex gap between the two panels):
flex: 1, PDF stays below 720px.The 1564px crossover is where half of the flex inner width hits 720px. Above that, every extra pixel of viewport flows into the data panel.
In src/com/getorcha/app/http/documents/view/shared.clj::detail-page (line 766), add :compact-sidebar? true to the options map passed to app.ui.layout/base.
@media block stays untouched)..data-panel.Manual verification on the document detail view at several viewport widths:
compact-sidebar-mode and super-admin-mode classes composed correctly.src/com/getorcha/app/ui/layout.clj — add :compact-sidebar? option and body class composition.src/com/getorcha/app/http/documents/view/shared.clj — pass :compact-sidebar? true in detail-page.resources/app/public/css/style.css — new body.compact-sidebar-mode rule block; change .pdf-panel max-width.