around the actual * (form > div > input), which is what needs `resize` -- browsers * don't support resizing an directly, only elements that establish * their own scrollable box. Horizontal only: these are single-line fields, * so a taller box never helps. * Scoped under .ojs-panel with three selector parts (class + element + * class) so this reliably beats two same-specificity competitors that * would otherwise win purely on load order: Observable Inputs' own * dynamically-injected `.oi-xxxxxx-input { width: 100% }` rule (appended to * at runtime, after this stylesheet) and this file's own * `.ojs-panel input[type="text"] { width: 10em }` default below. */ .ojs-panel form.ojs-fill > div:has(> input[type="text"]) { display: inline-block; width: 20em; min-width: 10em; max-width: 100%; resize: horizontal; overflow: hidden; } .ojs-panel form.ojs-fill > div:has(> input[type="text"]) > input[type="text"] { width: 100%; } /* ...except when the expression field shares a .ojs-row with the page's * Plot button, where 20em would strand the button out at the row's right * edge with a few hundred pixels of dead panel between the two. Here the * field takes whatever width the button leaves instead, so the row reads as * one unit and fills edge to edge. The `resize: horizontal` affordance * above still applies -- it just starts from the full width rather than * from 20em. * * Four selector parts against the base rule's three, so this wins on * specificity wherever both match, independent of source order. */ .ojs-panel .ojs-row form.ojs-fill > div:has(> input[type="text"]) { width: 100%; } /* Attach to an Inputs.* wrapper div to keep it at its natural width instead * of Observable Inputs' 100%-wide default, which would otherwise force the * row to wrap. */ .ojs-auto { width: auto !important; flex: none !important; } /* Attach to an Inputs.* wrapper div to push it to the right edge of its * container -- e.g. every page's "Plot" button, so it lands in the same * bottom-right corner everywhere regardless of whether it shares a .ojs-row * with a growing sibling field or sits alone below a .ojs-grid. A plain * block-level div with width:auto (e.g. what .ojs-auto sets) actually * stretches to fill its container in normal block flow -- unlike a flex * item, "auto" here does NOT mean "shrink to content" -- so there's no * free space left for margin-left:auto to consume. Forcing fit-content * first is what makes the auto margin actually push it right, in both * plain-block (a lone button under a .ojs-grid) and flex (a button beside * a growing sibling in a .ojs-row) contexts. */ .ojs-end { width: fit-content !important; margin-left: auto !important; } @media (max-width: 768px) { .ojs-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 480px) { .ojs-grid { grid-template-columns: 1fr; } } /* ---- src/css/chart-block.css ---- */ /* * Copyright (c) 2026 Apurva Nakade. All rights reserved. * Released under Apache 2.0 license as described in the file LICENSE. * Authors: Apurva Nakade */ /* ── Output area ─────────────────────────────────────────────────── */ /* Let layout-ncol cells shrink below the Plotly chart's intrinsic width */ .quarto-layout-cell { min-width: 0; } /* 72vh rather than the 78vh this was while the step bar floated over the * chart: the bar now sits above it and adds its own ~53px (plus margin), so the * chart gives back about what the bar takes and a chart block occupies close * to the height it always did. The visible plot area is a wash -- 78vh with * a slider bar covering its bottom strip showed about as much curve as 72vh * with nothing over it -- but none of it is obscured any more. */ .plotly-box-large { width: 100%; height: 72vh; min-height: 500px; } /* Anchor for .ojs-legend-overlay below -- wrap a page's mainPlot cell and * its viewof VM.ui.legendOverlay(...) cell together in this so the legend * positions itself relative to the plot rather than the page. * * A column, so the slider bar can be ordered above the chart rather than * below it: every other control on the page sits in the .ojs-panel above the * chart, so a bar underneath left the reader's eye travelling past the chart * and back again. Reordering here rather than in the 14 pages' markup keeps * it one edit -- see the order values on the two rules below. */ .ojs-chart-block { position: relative; display: flex; flex-direction: column; /* A named query container, so rules about "is this chart wide enough for * X" can ask the chart's own width (legend-controls.css hides the floating * legend on a narrow chart this way) rather than the viewport's. The two * are not the same thing: in an