Giorgio Gilestro
8ec4ea1c72
User reported the page rendering at ~3x viewport width on Android Chrome with overflow-x:hidden clipping off most of the content. Root cause: CSS grid items default to min-width:min-content, and the indicator table inside the indicators panel has white-space:nowrap cells. A long Symbol/Label value forces the table wider than its panel; the panel propagates that minimum width up the grid; the grid expands the .app-main; .app-main pushes the page wider than the viewport. overflow-x:hidden then just chops the right portion off. Fix has three parts: 1. .app and .app-main get min-width:0 and max-width:100vw so the shell can't be wider than the viewport regardless of descendants. 2. Every direct child of .app-main (each panel) gets min-width:0 on mobile so individual panels can shrink past their min-content. 3. table.dense drops white-space:nowrap on text cells at ≤480px — long symbols wrap to two lines instead of forcing the table wide. Numeric cells keep nowrap (negative percentages reading as "−12\n.34%" would be unreadable). Also adds an overflow-x:auto fallback on .panel-body pre/code so any code block in AI output scrolls within the panel instead of blowing the page out.
131 lines
4.2 KiB
CSS
131 lines
4.2 KiB
CSS
/* Cassandra — panel chrome, tables, status LEDs, utility colour classes. */
|
||
|
||
/* --- Panels ----------------------------------------------------------- */
|
||
|
||
.panel {
|
||
background: var(--surface);
|
||
border: 1px solid var(--border);
|
||
position: relative;
|
||
}
|
||
.panel-header {
|
||
border-bottom: 1px solid var(--border);
|
||
padding: 8px 12px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.1em;
|
||
color: var(--muted);
|
||
font-size: 11px;
|
||
background: linear-gradient(180deg, var(--surface-2), var(--surface));
|
||
}
|
||
.panel-header .title { color: var(--text); font-weight: 700; }
|
||
.panel-header .title::before { content: "■ "; color: var(--accent); }
|
||
.panel-header .meta { color: var(--dim); }
|
||
.panel-body { padding: 6px 0; }
|
||
.panel-body--scroll { max-height: 70vh; overflow-y: auto; }
|
||
|
||
/* --- Tables ----------------------------------------------------------- */
|
||
|
||
table.dense {
|
||
width: 100%;
|
||
border-collapse: collapse;
|
||
}
|
||
table.dense th, table.dense td {
|
||
padding: 4px 12px;
|
||
font-size: 12px;
|
||
border-bottom: 1px solid var(--surface-2);
|
||
white-space: nowrap;
|
||
}
|
||
table.dense th {
|
||
text-align: left;
|
||
color: var(--muted);
|
||
font-weight: 400;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.06em;
|
||
font-size: 10px;
|
||
background: var(--surface-2);
|
||
}
|
||
table.dense th.num,
|
||
table.dense td.num { text-align: right; }
|
||
table.dense td.label { color: var(--text); }
|
||
table.dense td.label.has-tip,
|
||
table.dense td[title] {
|
||
cursor: help;
|
||
border-bottom: 1px dotted color-mix(in srgb, var(--accent) 40%, transparent);
|
||
border-bottom-width: 1px;
|
||
}
|
||
.pf-name.has-tip {
|
||
cursor: help;
|
||
border-bottom: 1px dotted color-mix(in srgb, var(--accent) 50%, transparent);
|
||
}
|
||
table.dense tr:hover td { background: color-mix(in srgb, var(--accent) 5%, transparent); }
|
||
|
||
.pos { color: var(--positive); }
|
||
.neg { color: var(--negative); }
|
||
.neu { color: var(--muted); }
|
||
|
||
/* --- Status LEDs ------------------------------------------------------ */
|
||
|
||
.led { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 4px; vertical-align: middle; }
|
||
.led.ok { background: var(--positive); box-shadow: 0 0 6px var(--positive); }
|
||
.led.warn { background: var(--warning); box-shadow: 0 0 6px var(--warning); }
|
||
.led.err { background: var(--negative); box-shadow: 0 0 6px var(--negative); }
|
||
.led.idle { background: var(--dim); }
|
||
|
||
/* --- Empty / loading state ------------------------------------------- */
|
||
|
||
.empty {
|
||
padding: 24px;
|
||
text-align: center;
|
||
color: var(--muted);
|
||
font-size: 11px;
|
||
letter-spacing: 0.08em;
|
||
text-transform: uppercase;
|
||
}
|
||
.htmx-indicator {
|
||
display: inline-block;
|
||
color: var(--dim);
|
||
opacity: 0;
|
||
transition: opacity 0.2s;
|
||
}
|
||
.htmx-request .htmx-indicator { opacity: 1; }
|
||
|
||
|
||
/* --- Mobile (≤480px) -------------------------------------------------- */
|
||
|
||
@media (max-width: 480px) {
|
||
/* Force panels and their bodies to honour the parent grid cell
|
||
width, even when descendants (tables, code blocks, long URLs)
|
||
have intrinsic widths that exceed the viewport. min-width:0 is
|
||
the magic that lets flex/grid items shrink past min-content;
|
||
max-width:100% caps the box itself. */
|
||
.panel { min-width: 0; max-width: 100%; }
|
||
.panel-body { min-width: 0; max-width: 100%; }
|
||
|
||
.panel-header {
|
||
padding: 8px 10px;
|
||
gap: 8px;
|
||
}
|
||
.panel-header .title { font-size: 12px; }
|
||
.panel-header .meta { font-size: 10px; }
|
||
.panel-body { padding: 4px 6px; }
|
||
/* Scroll panels lose some vertical room on small screens so the
|
||
stacked layout doesn't push log/news off the fold. */
|
||
.panel-body--scroll { max-height: 60vh; }
|
||
|
||
/* Tables: dropping white-space:nowrap lets long Symbol / Label cells
|
||
wrap to a second line instead of forcing the table wider than the
|
||
panel. Numeric cells stay nowrap since "−12.34%" wrapping would be
|
||
unreadable. */
|
||
table.dense { table-layout: auto; }
|
||
table.dense th, table.dense td { white-space: normal; }
|
||
table.dense .num { white-space: nowrap; }
|
||
|
||
/* Final safety net: if a descendant still insists on being wider
|
||
than the panel (e.g. a wide pre/code block in the AI output),
|
||
scroll it horizontally inside the panel rather than blowing the
|
||
whole page out. */
|
||
.panel-body pre,
|
||
.panel-body code { max-width: 100%; overflow-x: auto; }
|
||
}
|