style: unify Ralph panel info section

Merge Waiting for, Elapsed, and Tasks into one unified card:
- All labels aligned on left (60px width)
- Values aligned after labels
- Task cards flow to the right
- Cleaner, more compact layout

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
arkon
2026-01-20 20:26:04 +01:00
co-authored by Claude Opus 4.5
parent 3ef9b29899
commit f014aecd41
3 changed files with 42 additions and 59 deletions
+15 -16
View File
@@ -129,22 +129,21 @@
<div class="ralph-ring-label">Complete</div>
</div>
</div>
<!-- Meta Info -->
<div class="ralph-meta-compact">
<div class="ralph-meta-item">
<span class="ralph-meta-label">Waiting for</span>
<code id="ralphPhrase">--</code>
</div>
<div class="ralph-meta-item">
<span class="ralph-meta-label">Elapsed</span>
<span id="ralphElapsed">0m</span>
</div>
</div>
<!-- Task Cards - inline -->
<div class="ralph-tasks-compact">
<div class="ralph-tasks-header">
<span>Tasks</span>
<span class="ralph-tasks-count" id="ralphTasksCount">0/0</span>
<!-- Meta Info + Tasks unified -->
<div class="ralph-info-unified">
<div class="ralph-info-labels">
<div class="ralph-info-row">
<span class="ralph-info-label">Waiting for</span>
<code id="ralphPhrase">--</code>
</div>
<div class="ralph-info-row">
<span class="ralph-info-label">Elapsed</span>
<span id="ralphElapsed">0m</span>
</div>
<div class="ralph-info-row">
<span class="ralph-info-label">Tasks</span>
<span class="ralph-tasks-count" id="ralphTasksCount">0/0</span>
</div>
</div>
<div class="ralph-tasks-grid" id="ralphTasksGrid"></div>
</div>