as body's direct content child (no .shell-body wrapper) — let it grow too so the footer still pins. */ body > main { flex: 1 0 auto; } .shell-sidebar { width: 200px; flex: none; padding: 20px 12px; display: flex; flex-direction: column; gap: 8px; min-height: calc(100vh - 240px); } /* Canonical course-picker slot — ONE location, site-wide: the top of the left sidebar, above the sub-nav buttons. Never full width, never in the header or top navbar. If a page has no sub-nav items, this still renders alone in an otherwise-nav-less sidebar so the slot stays consistent. */ .shell-course-picker { padding-bottom: 12px; margin-bottom: 8px; border-bottom: 1px solid var(--ink-300); } .shell-course-picker label.shell-picker-label { display: block; font-family: var(--f-display); font-size: 0.72em; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--fog-400); margin-bottom: 6px; } .shell-course-picker select { width: 100%; padding: 7px 10px; background: var(--ink-100); border: 1px solid var(--ink-300); border-radius: var(--radius-sm); color: var(--fog-100); font-family: var(--f-body); font-size: 0.85em; } .shell-sidebar-nav { display: flex; flex-direction: column; gap: 8px; } .shell-sidebar button.side-btn { display: block; width: 100%; text-align: left; padding: 10px 14px; border-radius: var(--radius-sm); background: var(--ink-100); border: 1px solid var(--ink-300); color: var(--fog-200); font-family: var(--f-display); font-size: 0.88em; font-weight: 600; cursor: pointer; transition: background var(--transition), color var(--transition), border-color var(--transition); } .shell-sidebar button.side-btn:hover { border-color: var(--teal-500); color: var(--teal-400); } .shell-sidebar button.side-btn.active { background: rgba(79,209,197,0.14); border-color: var(--teal-400); color: var(--teal-400); } /* Main content column. squiddlr.css's base `main` rule caps width at 1280px and centers it with `margin: 0 auto`; inside the shell flex row that left a narrow column floating between big empty gutters. Override both so the main area fills all space between the sidebar and the page edge (keeping only the comfortable inner padding). This is THE systemic width fix — every shell page inherits it. */ .shell-main { flex: 1 1 auto; min-width: 0; max-width: none; margin: 0; padding: 24px 32px; } .shell-footer { position: relative; z-index: 1; flex-shrink: 0; border-top: 1px solid var(--ink-300); background: var(--ink-050); color: var(--fog-400); font-family: var(--f-display); font-size: 0.8em; padding: 14px 24px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; } .shell-footer a { color: var(--fog-300); text-decoration: none; } .shell-footer a:hover { color: var(--teal-400); text-decoration: underline; } .shell-footer nav { display: inline-flex; gap: 6px; } .shell-footer .footer-brand { display: flex; align-items: center; gap: 8px; text-decoration: none; } .shell-footer .footer-brand .wordmark-sm { font-family: var(--f-script); color: var(--teal-400); font-size: 1.15em; } /* Sidebar panel switching, mirrors .panel/.panel.active from squiddlr.css but scoped for shell-driven sub-pages inside shell-main */ .shell-panel { display: none; } .shell-panel.active { display: block; } /* --------------------------------------------------------------------- Shared modal dialog — the ONE canonical CRUD dialog chrome, site-wide. Any page needing an add/edit modal builds its own

markup and toggles .open via Shell.openModal/closeModal in shell.js. Styled once here so every dialog matches the ocean theme. --------------------------------------------------------------------- */ .modal-overlay { display: none; position: fixed; inset: 0; z-index: 300; align-items: center; justify-content: center; padding: 24px; background: rgba(6, 11, 20, 0.72); backdrop-filter: blur(4px); } .modal-overlay.open { display: flex; } .modal { background: linear-gradient(180deg, var(--ink-100), var(--ink-050)); border: 1px solid var(--teal-700); border-radius: var(--radius); box-shadow: var(--shadow-md); width: 100%; max-width: 560px; max-height: 88vh; display: flex; flex-direction: column; } .modal.modal-wide { max-width: 760px; } .modal-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--ink-300); } .modal-header h3 { margin: 0; color: var(--teal-400); font-family: var(--f-display); } .modal-close { background: transparent; border: none; color: var(--fog-300); font-size: 1.4em; line-height: 1; padding: 2px 8px; cursor: pointer; } .modal-close:hover { color: var(--teal-400); transform: none; } .modal-body { padding: 18px 20px; overflow-y: auto; } .modal-footer { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 20px; border-top: 1px solid var(--ink-300); } /* --------------------------------------------------------------------- Squiddlr D'Ink confirm dialog (Shell.confirm() in shell.js) -- the themed replacement for every window.confirm() across the app. A small squid-ink blot animates in behind the mascot each time the dialog opens, then the message + Cancel/OK buttons follow. Pure CSS/SVG, no external assets, reuses the existing modal-overlay/modal chrome and teal/ink palette so it matches every other dialog in the app. --------------------------------------------------------------------- */ .shell-confirm-modal { max-width: 420px; overflow: hidden; } .shell-confirm-ink { position: relative; height: 84px; display: flex; align-items: center; justify-content: center; overflow: hidden; background: linear-gradient(180deg, var(--ink-200), var(--ink-100)); border-bottom: 1px solid var(--ink-300); } .shell-confirm-ink svg { position: absolute; inset: 0; width: 100%; height: 100%; } .ink-blot { fill: var(--teal-700); opacity: 0; transform-origin: center; transform: scale(0); } .shell-confirm-mascot { position: relative; z-index: 1; height: 46px; opacity: 0; transform: scale(0.6); filter: drop-shadow(0 2px 6px rgba(0,0,0,0.4)); } /* Animation only plays while .inking is present on the overlay (added right before Shell.openModal, removed on close) so re-opening always replays it instead of the dialog looking half-finished. */ .shell-confirm-overlay.inking .ink-blot { animation: shellInkBlot 0.62s cubic-bezier(0.22, 1, 0.36, 1) forwards; } .shell-confirm-overlay.inking .ink-blot-1 { animation-delay: 0s; } .shell-confirm-overlay.inking .ink-blot-2 { animation-delay: 0.06s; } .shell-confirm-overlay.inking .ink-blot-3 { animation-delay: 0.11s; } .shell-confirm-overlay.inking .ink-blot-4 { animation-delay: 0.16s; } .shell-confirm-overlay.inking .ink-blot-5 { animation-delay: 0.2s; } .shell-confirm-overlay.inking .shell-confirm-mascot { animation: shellInkMascot 0.4s ease-out 0.28s forwards; } @keyframes shellInkBlot { 0% { opacity: 0; transform: scale(0); } 55% { opacity: 0.9; transform: scale(1.08); } 100% { opacity: 0.85; transform: scale(1); } } @keyframes shellInkMascot { 0% { opacity: 0; transform: scale(0.6) translateY(6px); } 100% { opacity: 1; transform: scale(1) translateY(0); } } .shell-confirm-body { text-align: center; padding: 20px 22px; } .shell-confirm-message { margin: 0; color: var(--fog-100); font-size: 1em; line-height: 1.5; white-space: pre-line; } .shell-confirm-modal .modal-footer { justify-content: center; } @media (prefers-reduced-motion: reduce) { .shell-confirm-overlay.inking .ink-blot, .shell-confirm-overlay.inking .shell-confirm-mascot { animation: none; opacity: 1; transform: none; } } /* --------------------------------------------------------------------- Card grid — the course-picker card grid on the Build a Class home and any future "pick one of many" surface. Reusable, theme-consistent. --------------------------------------------------------------------- */ .card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; margin-top: 6px; } .grid-card { background: linear-gradient(180deg, var(--ink-100), var(--ink-050)); border: 1px solid var(--ink-300); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow-sm); cursor: pointer; text-align: left; transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition); display: flex; flex-direction: column; gap: 6px; min-height: 120px; } .grid-card:hover { border-color: var(--teal-500); transform: translateY(-2px); box-shadow: var(--shadow); } .grid-card .grid-card-title { font-family: var(--f-display); font-weight: 700; color: var(--teal-400); font-size: 1.05em; } .grid-card .grid-card-meta { font-size: 0.85em; color: var(--fog-300); } .grid-card.add-new { align-items: center; justify-content: center; text-align: center; border-style: dashed; border-color: var(--teal-600, var(--teal-700)); color: var(--teal-400); background: rgba(79, 209, 197, 0.06); } .grid-card.add-new .grid-card-title { font-size: 1.1em; } .grid-card.add-new .add-plus { font-size: 2em; line-height: 1; color: var(--teal-400); } /* --------------------------------------------------------------------- Compact card variant — for lists of many small click-to-edit items (World Builder characters/arcs/episodes, References Library, Lecture Studio, Communications). Denser than the course-picker .grid-card: smaller min width, tighter padding, a leading icon-glyph chip plus a small color-coded type dot so a dense grid still reads at a glance. Reuse .card-grid for the container; add .card-grid-compact for tighter packing. Reuse .grid-card and add .grid-card-compact for the item. --------------------------------------------------------------------- */ .card-grid-compact { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; margin-top: 6px; } .grid-card-compact { padding: 12px 14px; min-height: 0; gap: 4px; position: relative; } .grid-card-compact .grid-card-head { display: flex; align-items: center; gap: 8px; } .grid-card-compact .grid-card-glyph { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 1.1em; line-height: 1; background: var(--ink-200); } .grid-card-compact .grid-card-title { font-size: 0.95em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .grid-card-compact .grid-card-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .grid-card-compact .type-dot { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: var(--fog-300); } .grid-card-compact .grid-card-remove { position: absolute; top: 8px; right: 8px; background: none; border: none; color: var(--fog-400); font-size: 1em; line-height: 1; cursor: pointer; padding: 2px 4px; } .grid-card-compact .grid-card-remove:hover { color: var(--error); transform: none; } .grid-card-compact.card-add-mini { align-items: center; justify-content: center; text-align: center; min-height: 64px; border-style: dashed; border-color: var(--teal-600, var(--teal-700)); color: var(--teal-400); background: rgba(79, 209, 197, 0.06); flex-direction: row; gap: 8px; } /* Per-type accent colors for the glyph chip + dot. Reused across World Builder (character/arc/episode) and future card lists (resource/lecture). */ .grid-card-glyph.type-character { background: rgba(79, 209, 197, 0.16); color: var(--teal-400); } .grid-card-glyph.type-arc { background: rgba(244, 184, 96, 0.16); color: var(--amber-400); } .grid-card-glyph.type-episode { background: rgba(52, 211, 153, 0.16); color: var(--success); } .type-dot.type-character { background: var(--teal-400); } .type-dot.type-arc { background: var(--amber-400); } .type-dot.type-episode { background: var(--success); } /* Resources Library type accents (reference/image/file/link/video/dataset). Two new hex accents (blue, violet) added here since the existing palette (teal/amber/success) is already spoken for by World Builder. */ .grid-card-glyph.type-reference { background: rgba(79, 209, 197, 0.16); color: var(--teal-400); } .grid-card-glyph.type-image { background: rgba(244, 184, 96, 0.16); color: var(--amber-400); } .grid-card-glyph.type-file { background: rgba(133, 148, 171, 0.18); color: var(--fog-200); } .grid-card-glyph.type-link { background: rgba(96, 165, 244, 0.16); color: #60A5F4; } .grid-card-glyph.type-video { background: rgba(52, 211, 153, 0.16); color: var(--success); } .grid-card-glyph.type-dataset { background: rgba(167, 139, 250, 0.16); color: #A78BFA; } .type-dot.type-reference { background: var(--teal-400); } .type-dot.type-image { background: var(--amber-400); } .type-dot.type-file { background: var(--fog-200); } .type-dot.type-link { background: #60A5F4; } .type-dot.type-video { background: var(--success); } .type-dot.type-dataset { background: #A78BFA; } /* Lecture Studio type accents — reuse the exact status-pill color ramp (squiddlr.css --status-*-fg tokens) so a card's glyph/dot always matches its own status pill, whatever the status. One vocabulary, two surfaces. */ .grid-card-glyph.type-contract { background: var(--status-contract-bg); color: var(--status-contract-fg); } .grid-card-glyph.type-draft { background: var(--status-draft-bg); color: var(--status-draft-fg); } .grid-card-glyph.type-in_progress { background: var(--status-progress-bg); color: var(--status-progress-fg); } .grid-card-glyph.type-approved { background: var(--status-approved-bg); color: var(--status-approved-fg); } .grid-card-glyph.type-published { background: var(--status-published-bg); color: var(--status-published-fg); } .type-dot.type-contract { background: var(--status-contract-fg); } .type-dot.type-draft { background: var(--status-draft-fg); } .type-dot.type-in_progress { background: var(--status-progress-fg); } .type-dot.type-approved { background: var(--status-approved-fg); } .type-dot.type-published { background: var(--status-published-fg); } /* status-generated shares the published ramp in squiddlr.css — mirror that alias here */ .grid-card-glyph.type-generated { background: var(--status-published-bg); color: var(--status-published-fg); } .type-dot.type-generated { background: var(--status-published-fg); } /* --------------------------------------------------------------------- Drag-deck split view — reusable lego pattern for any "drag library cards onto a drop target" surface (References pane; future Assignments builder). Two-column .day-split grid; each side is a .day-split-lib panel box. Library cards are .catalog-card (draggable via DragDeck); attached items reuse .catalog-card with .is-static (no grab cursor). Pairs with js/drag-deck.js (makeDraggable / registerDropTarget). --------------------------------------------------------------------- */ .day-split { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; margin-top: 12px; align-items: start; } .day-split-lib { background: var(--ink-050); border: 1px solid var(--ink-300); border-radius: var(--radius-sm); padding: 12px; display: flex; flex-direction: column; gap: 10px; } .day-split-lib > .toolbar { margin: 0; } /* library panel — type chips + search + draggable card list */ .catalog-chips { display: flex; flex-wrap: wrap; gap: 6px; } .catalog-chip { font-size: 0.78em; padding: 4px 10px; border-radius: 999px; cursor: pointer; background: transparent; border: 1px solid var(--ink-300); color: var(--fog-200); transition: border-color 0.15s, color 0.15s, background 0.15s; } .catalog-chip:hover { border-color: var(--teal-400); color: var(--teal-400); } .catalog-chip.active { background: var(--teal-500); border-color: var(--teal-500); color: var(--ink-000); font-weight: 600; } .catalog-list { display: flex; flex-direction: column; gap: 6px; max-height: 60vh; overflow-y: auto; padding-right: 4px; } /* drop-target highlight (DragDeck adds .drag-over to the registered target) */ .catalog-list.drag-over { outline: 2px dashed var(--teal-400); outline-offset: -2px; background: rgba(79,209,197,0.10); } .catalog-card { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 6px 8px; background: var(--ink-100); border: 1px solid var(--ink-300); border-radius: var(--radius-sm); padding: 8px 10px; cursor: grab; transition: border-color 0.15s, background 0.15s; } .catalog-card:hover { border-color: var(--teal-400); } .catalog-card.dragging { opacity: 0.5; cursor: grabbing; } .catalog-card.is-static { cursor: default; } .catalog-card-type { grid-row: span 2; font-size: 0.66em; text-transform: uppercase; letter-spacing: 0.04em; padding: 2px 6px; border-radius: var(--radius-sm); background: var(--ink-300); color: var(--fog-100); white-space: nowrap; } .catalog-card-label { font-weight: 600; color: var(--fog-100); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .catalog-card-sub { grid-column: 2 / 4; font-size: 0.74em; color: var(--fog-300); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .catalog-card-open { grid-row: span 2; font-size: 0.78em; white-space: nowrap; } .catalog-empty { text-align: center; padding: 20px 8px; font-size: 0.88em; color: var(--fog-300); } @media (max-width: 920px) { .day-split { grid-template-columns: 1fr; } } /* Communications type accents (ta_notes/announcement/canvas_post/email_blast). Reuses the violet accent introduced for Resources' dataset type (not yet used by any method here) plus the existing teal/amber/blue family, so the Communications grid stays inside the established palette. */ .grid-card-glyph.type-ta_notes { background: rgba(79, 209, 197, 0.16); color: var(--teal-400); } .grid-card-glyph.type-announcement { background: rgba(244, 184, 96, 0.16); color: var(--amber-400); } .grid-card-glyph.type-canvas_post { background: rgba(96, 165, 244, 0.16); color: #60A5F4; } .grid-card-glyph.type-email_blast { background: rgba(167, 139, 250, 0.16); color: #A78BFA; } .type-dot.type-ta_notes { background: var(--teal-400); } .type-dot.type-announcement { background: var(--amber-400); } .type-dot.type-canvas_post { background: #60A5F4; } .type-dot.type-email_blast { background: #A78BFA; } /* --------------------------------------------------------------------- Segmented toggle — a small pill switch for view A / view B on a single page (e.g. Textbook chapters vs Supplies). One shared component. --------------------------------------------------------------------- */ .seg-toggle { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--ink-300); border-radius: 999px; padding: 3px; background: var(--ink-050); gap: 3px; } .seg-toggle button { border: none; background: transparent; color: var(--fog-300); padding: 7px 16px; border-radius: 999px; font-family: var(--f-display); font-weight: 600; font-size: 0.85em; cursor: pointer; white-space: nowrap; } .seg-toggle button:hover { transform: none; color: var(--teal-400); } .seg-toggle button.active { background: linear-gradient(180deg, var(--teal-700), var(--teal-500)); color: #06281c; } /* On narrow viewports a 3+ button toggle (or one with a longer label like "Purchasing & Access Info") no longer fits one pill row without squeezing text into a circle. Below 480px, drop the pill wrapper's inline-flex constraint and let the toggle become a full-width stack of pill buttons — each button keeps its own pill shape and single-line label, just stacked vertically instead of forced onto one line. Reusable for any future 3+ button .seg-toggle, not specific to one page. */ @media (max-width: 480px) { .seg-toggle { display: flex; flex-direction: column; width: 100%; border-radius: var(--radius-sm); } .seg-toggle button { width: 100%; text-align: center; border-radius: var(--radius-sm); } } /* --------------------------------------------------------------------- Resource / topic chips list used inside the Design-the-Class-Day dialog and on calendar cells. Draggable rows for reorder reuse .drag-over etc. --------------------------------------------------------------------- */ .chip-list { display: flex; flex-direction: column; gap: 6px; margin: 8px 0; } .chip-row { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: var(--ink-100); border: 1px solid var(--ink-300); border-radius: var(--radius-sm); font-size: 0.88em; color: var(--fog-100); } .chip-row .chip-handle { cursor: grab; color: var(--fog-400); } .chip-row .chip-type { font-size: 0.7em; text-transform: uppercase; letter-spacing: 0.03em; color: var(--teal-400); font-family: var(--f-display); font-weight: 700; } .chip-row .chip-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .chip-row.drag-over { outline: 2px dashed var(--teal-400); outline-offset: -2px; } .chip-row.dragging { opacity: 0.4; } /* Clickable calendar day + its content chips (Schedule & Topics). */ .cal-day.clickable { cursor: pointer; } .cal-day.clickable:hover { border-color: var(--teal-400); } .cal-day .cal-add { position: absolute; top: 3px; right: 4px; width: 18px; height: 18px; line-height: 16px; text-align: center; border-radius: 50%; background: rgba(79,209,197,0.18); color: var(--teal-400); font-weight: 700; font-size: 0.9em; border: none; padding: 0; } .cal-day .cal-add:hover { transform: none; filter: brightness(1.2); } /* --------------------------------------------------------------------- Detail-editing layout — the ONE canonical pattern for every Content Studio / Communication Studio detail screen (World Builder, Assignments, Lecture/Slide/Tool detail, Communications compose, etc.). Two columns: a left list/nav column (.detail-list) that fills its own width right up against the sidebar, and a wide editor column (.detail-main) that holds the record's sections. Each section is a collapsible

row spanning the full editor width, so opening one reveals a big, comfortable editing surface and sections never sit side-by-side at mismatched heights. Native

= no JS needed (pages may still toggle a fold's `display`/`open` for show-on-select). --------------------------------------------------------------------- */ .detail-layout { display: flex; gap: 20px; align-items: flex-start; } .detail-list { flex: 0 0 300px; } .detail-list > .card { width: 100%; margin-bottom: 0; } .detail-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 16px; } .fold { background: linear-gradient(180deg, var(--ink-100), var(--ink-050)); border: 1px solid var(--ink-300); border-radius: var(--radius); box-shadow: var(--shadow-sm); overflow: hidden; } .fold > summary { list-style: none; cursor: pointer; user-select: none; display: flex; align-items: center; gap: 10px; padding: 15px 20px; font-family: var(--f-display); font-weight: 700; font-size: 1.1em; color: var(--teal-400); } .fold > summary::-webkit-details-marker { display: none; } .fold > summary::before { content: '\25B8'; /* ▸ */ flex: none; font-size: 0.85em; color: var(--teal-400); transition: transform var(--transition); } .fold[open] > summary::before { transform: rotate(90deg); } .fold > summary:hover { filter: brightness(1.12); } .fold > summary .fold-hint { margin-left: auto; font-family: var(--f-body); font-weight: 400; font-size: 0.72em; color: var(--fog-300); } .fold-body { padding: 6px 20px 20px; } /* Folds reveal larger writing surfaces than the compact base textarea. */ .fold-body textarea { min-height: 128px; } /* Clickable record rows in a .detail-list column (the "pick one to edit" list on every Content Studio detail page). Promoted here from world-builder.css so World Builder, Resources, Slide Studio, etc. share one list-item look. World Builder keeps its .sl-card-item alias for now. */ .detail-list-item { border: 1px solid var(--ink-200); border-radius: 8px; padding: 10px 12px; margin-bottom: 8px; cursor: pointer; background: var(--ink-050); } .detail-list-item:hover { border-color: var(--teal-500); } .detail-list-item.selected { border-color: var(--teal-400); box-shadow: 0 0 0 1px var(--teal-400); } .detail-list-item .dli-title { font-weight: 600; color: var(--teal-400); font-family: var(--f-display); } .detail-list-item .dli-meta { font-size: 0.78em; color: var(--fog-400); margin-top: 2px; } /* Repeated editable sub-rows inside a fold (characters, slides, etc.). */ .detail-row-item { border: 1px solid var(--ink-200); border-radius: 6px; padding: 8px 10px; margin-bottom: 6px; position: relative; } .detail-row-item .dri-remove { position: absolute; top: 6px; right: 8px; cursor: pointer; color: var(--error); font-weight: bold; font-size: 0.9em; background: none; border: none; } .detail-row-item input, .detail-row-item textarea, .detail-row-item select { margin-bottom: 4px; } /* Read-only generated-spec / preview block (AI contract, world block, …). */ .detail-preview { border: 1px solid var(--ink-200); border-radius: 8px; padding: 12px; background: var(--ink-000); font-family: var(--f-mono); font-size: 12.5px; line-height: 1.5; white-space: pre-wrap; max-height: 420px; overflow-y: auto; color: var(--fog-100); } @media (max-width: 980px) { .detail-layout { flex-direction: column; } .detail-list { flex: 1 1 auto; width: 100%; } .detail-list > .card { margin-bottom: 0; } } @media (max-width: 860px) { .shell-topnav { flex-wrap: wrap; border-radius: 20px; } .shell-topnav a.topnav-btn { flex: 1 1 40%; } .shell-body { flex-direction: column; } .shell-sidebar { width: 100%; flex-direction: row; flex-wrap: wrap; min-height: 0; } .shell-sidebar button.side-btn { width: auto; flex: 1; min-width: 140px; } }