/* * components.css — layered on top of base.css (the desktop-first legacy copy, * kept unforked per ADR 0012). This file makes the shared kit FLUID BY * CONSTRUCTION: a screen built on these classes is responsive with no extra * per-screen work (ADR 0013 / 0020). TOKEN-BASED ONLY (spacing/type/colour from * tokens.css; no one-off hex or off-scale px). * * The #1 responsive bug is a flex/grid child with the default `min-width: auto`, * which refuses to shrink below its content and pushes the layout past the * viewport → horizontal PAGE scroll. So every child that holds text or a table * gets `min-width: 0`, and wide tables scroll inside `.table-scroll`, never the * . We deliberately do NOT `overflow-x: hidden` the body (that masks bugs). */ /* ── App frame: nothing sets a fixed width; the body never scrolls sideways ── */ .console__main, .masterdetail__aside, .masterdetail__main, .table-scroll { min-width: 0; /* load-bearing: lets these flex/grid children shrink */ } /* ── Full-height shell (ADR 0013/0020) — the sidebar reaches the bottom at ANY * content height. The console is a flex row that is min-height:100vh AND grows * with content; the navy sidebar is a STRETCHING child (align-items:stretch), so * its background reaches the true bottom. The version footer lives INSIDE the * content column (console__main flex-column, footer margin-top:auto) so no * non-navy strip appears below the sidebar. NEVER put a fixed height / * align-self / height:100vh on the sidebar column. */ .console { min-height: 100vh; align-items: stretch; } .console__main { display: flex; flex-direction: column; /* Shared cap for a record view's header + form so the deactivate button (in the * header, top-right) lines up exactly with the form's right edge below it. */ --record-width: 1120px; } .console__footer { margin-top: auto; padding: var(--space-8) 0 0; text-align: left; } /* ── Fixed app-shell (desktop console) — the viewport is the frame (like the legacy * desktop app / Linear / Gmail). On ≥769px (sidebar is a side column) the console * fills 100dvh and the DOCUMENT does not scroll: the navy sidebar (its own scroll), * the breadcrumb, and the page header stay fixed; ONLY `.console__scroll` scrolls. * Panes/grids inside size to that region (flex:1; min-height:0) instead of fighting a * scrolling document. Mobile (≤768, stacked nav) keeps the normal document scroll. */ @media (min-width: 769px) { .has-console { height: 100dvh; overflow: hidden; } .has-console main.page { height: 100dvh; overflow: hidden; } .has-console .console { height: 100dvh; min-height: 0; overflow: hidden; } .has-console .console__nav { overflow-y: auto; /* sidebar scrolls itself if the menu is long */ } .has-console .console__main { flex: 1 1 auto; min-width: 0; min-height: 0; overflow: hidden; /* becomes the scroll frame: fixed crumb/header + one scroll region */ /* .console__scroll adds --space-2 clip-protection inline padding; keep the NET * inline gutter at 16px (--space-2 here + --space-2 there = --space-4). */ padding-inline: var(--space-2); } .has-console .console__scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; /* the ONLY scrolling region */ /* overflow-y:auto forces overflow-x to `auto` too, which CLIPS anything flush at the content * edge — the leftmost filter input's left border/focus-ring got shaved. A small inline gutter * keeps content off the clip edge (and off the sidebar/scrollbar) so borders show in full. */ padding-inline: var(--space-2); display: flex; flex-direction: column; } /* The merged toolbar (breadcrumb + title + actions, ADR 0045) stays put while the content below * scrolls. A hairline + tight block padding read it as a bar and separate it from the rows that * scroll under it; the reduced margin below reclaims vertical space for data. */ .has-console .console__scroll .page-header { position: sticky; top: 0; z-index: 5; background: var(--color-bg-base); padding-block: var(--space-3); margin-bottom: var(--space-4); border-bottom: 1px solid var(--color-border-subtle); } } /* Fixed app-shell for the MAIN ERP layout (top-nav + page) — the same "viewport is the frame" model * as the console above, for the pages that carry the sticky top-nav (dashboard, etc.). On ≥769px the * body fills 100dvh and the DOCUMENT does not scroll: the top-nav stays fixed at the top and ONLY the * content region (main.page) scrolls; the footer sits at the bottom. Mobile (≤768) keeps normal scroll. */ @media (min-width: 769px) { .app-shell { height: 100dvh; overflow: hidden; display: flex; flex-direction: column; } .app-shell .topnav { flex: 0 0 auto; /* stays at the top, outside the scroll region */ } .app-shell main.page { flex: 1 1 auto; min-height: 0; /* override .page's min-height so it shrinks + scrolls inside the frame */ overflow-y: auto; /* the ONLY scrolling region */ } .app-shell .site-footer { flex: 0 0 auto; } /* Slim, fade-when-idle scrollbars on the app-shell scroll regions (content + sidebar) — the same * treatment as the grids (Linear/Notion): a 10px track with an inset content-box thumb that is * transparent at rest and fades in on hover. Firefox uses scrollbar-width/color. Content regions get * a muted (--color-border) thumb; the navy sidebar gets a translucent light thumb. */ .has-console .console__scroll, .app-shell main.page { scrollbar-width: thin; scrollbar-color: transparent transparent; /* idle: invisible (Firefox) */ } .has-console .console__scroll:hover, .has-console .console__scroll:focus-within, .app-shell main.page:hover, .app-shell main.page:focus-within { scrollbar-color: var(--color-border) transparent; } .has-console .console__scroll::-webkit-scrollbar, .app-shell main.page::-webkit-scrollbar { width: 10px; height: 10px; } .has-console .console__scroll::-webkit-scrollbar-track, .app-shell main.page::-webkit-scrollbar-track { background: transparent; } .has-console .console__scroll::-webkit-scrollbar-thumb, .app-shell main.page::-webkit-scrollbar-thumb { border-radius: 5px; border: 2px solid transparent; /* inset → a slim rounded bar */ background-color: transparent; /* idle: invisible */ background-clip: content-box; transition: background-color 0.2s ease; } .has-console .console__scroll:hover::-webkit-scrollbar-thumb, .has-console .console__scroll:focus-within::-webkit-scrollbar-thumb, .app-shell main.page:hover::-webkit-scrollbar-thumb, .app-shell main.page:focus-within::-webkit-scrollbar-thumb { background-color: var(--color-border); /* fades in on hover */ } /* Navy sidebar — same slim treatment, translucent LIGHT thumb (it's on a dark surface). */ .has-console .console__nav { scrollbar-width: thin; scrollbar-color: transparent transparent; } .has-console .console__nav:hover, .has-console .console__nav:focus-within { scrollbar-color: rgba(255, 255, 255, 0.3) transparent; } .has-console .console__nav::-webkit-scrollbar { width: 10px; } .has-console .console__nav::-webkit-scrollbar-track { background: transparent; } .has-console .console__nav::-webkit-scrollbar-thumb { border-radius: 5px; border: 2px solid transparent; background-color: transparent; background-clip: content-box; transition: background-color 0.2s ease; } .has-console .console__nav:hover::-webkit-scrollbar-thumb, .has-console .console__nav:focus-within::-webkit-scrollbar-thumb { background-color: rgba(255, 255, 255, 0.3); } /* BOUNDED grids that FLEX-FILL the remaining console height (wide + can-be-tall data grids), so * the grid scrolls its rows internally + keeps its h-scrollbar in view instead of an autoHeight * card that runs it below the fold. */ .has-console .console__scroll .closing-detail, .has-console .console__scroll .bom-fill { display: flex; flex-direction: column; flex: 1 1 auto; } /* 소요량 BOM — pure fill: shrinks freely to whatever height is left. */ .has-console .console__scroll .bom-fill { min-height: 0; } .has-console .console__scroll .bom-fill #bom-grid { flex: 1 1 auto; min-height: 0; } /* 마감 정산 상세 — fill that GROWS on a big screen (both tables fit, no scroll) but never starves * the 미마감 grid below a usable ~6-row FLOOR. The section keeps min-height:auto (won't shrink past * its content), so on a short 13" the content region nudges just enough to reveal the full detail — * the top nav + sidebar stay fixed (app-shell untouched). */ .has-console .console__scroll .closing-detail #unclosed-grid { flex: 1 1 auto; min-height: 18rem; /* ~6 rows (36px rows + header + h-scrollbar) */ } } /* Mobile / no fixed-shell fallback: these bounded grids keep a sensible fixed height. */ #unclosed-grid { min-height: 18rem; } #bom-grid { min-height: 240px; } /* ── 자재 picker modal (BOM 소요량) — native