stats: uniform chip size in summary row

fixed min-width + height so every headline chip lines up regardless
of value length; stacked label-over-value layout with smaller uppercase
label so chips read as a row of identically-sized tiles.
This commit is contained in:
müde 2026-05-19 00:28:01 +02:00
parent d3f90f4cc0
commit 96ffb0e39a

View file

@ -17,11 +17,30 @@
.window-tabs button.active { background: var(--purple-dim); border-color: var(--purple); color: var(--purple); } .window-tabs button.active { background: var(--purple-dim); border-color: var(--purple); color: var(--purple); }
.summary { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 1rem; } .summary { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 1rem; }
.summary .chip { .summary .chip {
background: var(--bg-elev); border: 1px solid var(--border); display: flex;
padding: 0.4rem 0.8rem; border-radius: 4px; flex-direction: column;
justify-content: center;
align-items: stretch;
background: var(--bg-elev);
border: 1px solid var(--border);
padding: 0.5rem 0.9rem;
border-radius: 4px;
box-sizing: border-box;
min-width: 9rem;
height: 3.4rem;
line-height: 1.2;
}
.summary .chip .label {
color: var(--muted);
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.summary .chip .value {
color: var(--cyan);
font-weight: bold;
font-size: 1.05rem;
} }
.summary .chip .label { color: var(--muted); margin-right: 0.5rem; }
.summary .chip .value { color: var(--cyan); font-weight: bold; }
.grid { .grid {
display: grid; display: grid;
grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));