style: fix Ralph panel info section alignment with CSS grid

Use CSS grid with display:contents for perfect value alignment.
Labels are right-aligned in column 1, values aligned in column 2.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
arkon
2026-01-20 20:30:54 +01:00
co-authored by Claude Opus 4.5
parent f014aecd41
commit 7c8dcdbbc4
2 changed files with 6 additions and 8 deletions
Binary file not shown.

Before

Width:  |  Height:  |  Size: 95 KiB

After

Width:  |  Height:  |  Size: 95 KiB

+6 -8
View File
@@ -656,16 +656,15 @@ body {
} }
.ralph-info-labels { .ralph-info-labels {
display: flex; display: grid;
flex-direction: column; grid-template-columns: auto auto;
gap: 0.25rem; gap: 0.15rem 0.5rem;
flex-shrink: 0; flex-shrink: 0;
align-items: center;
} }
.ralph-info-row { .ralph-info-row {
display: flex; display: contents;
align-items: center;
gap: 0.5rem;
} }
.ralph-info-label { .ralph-info-label {
@@ -674,8 +673,7 @@ body {
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.3px; letter-spacing: 0.3px;
color: var(--text-muted); color: var(--text-muted);
width: 60px; text-align: right;
flex-shrink: 0;
} }
.ralph-info-unified code { .ralph-info-unified code {