style: improve Ralph panel mini ring gradient and meta layout

- Add gradient definition to mini ring SVG so it shows colors when
  collapsed (was only defined in large ring)
- Change meta items to row layout so "Waiting for" and completion
  phrase are inline
- Reduce font sizes for completion phrase and elapsed time
- Add text overflow handling for long completion phrases

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
arkon
2026-01-20 20:00:57 +01:00
co-authored by Claude Opus 4.5
parent 6fddd7d895
commit 141bb40eb4
2 changed files with 28 additions and 6 deletions
+7 -1
View File
@@ -79,8 +79,14 @@
<div class="ralph-summary-content" onclick="app.toggleInnerStatePanel()">
<div class="ralph-ring-mini" id="ralphRingMini">
<svg viewBox="0 0 36 36" class="ralph-ring-svg">
<defs>
<linearGradient id="ralphGradientMini" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#3b82f6" />
<stop offset="100%" stop-color="#22c55e" />
</linearGradient>
</defs>
<circle class="ralph-ring-bg" cx="18" cy="18" r="15.9" />
<circle class="ralph-ring-progress" cx="18" cy="18" r="15.9" id="ralphRingMiniProgress" />
<circle class="ralph-ring-progress-mini" cx="18" cy="18" r="15.9" id="ralphRingMiniProgress" />
</svg>
<span class="ralph-ring-text" id="ralphRingMiniText">0%</span>
</div>