fix(gui): Speicherkarte wieder vollstaendig, Zeilen brechen nicht mehr um

Der vermeintlich fehlende Wert war ein Zeilenumbruch: bei "Gesamt fuer
Aufnahmen 27,5 GB" rutschte die Einheit allein in die naechste Zeile.
Balken, Restplatz, Vorratsgroesse, Erklaertext und Partitions-Fusszeile
sind wieder da; .sys-row steht auf white-space: nowrap und die Karte
waechst stattdessen in die Breite (min-width 285px).

Doku: Kapitel 07 + Changelog (inkl. Hinweis, dass WAV-Rohdateien und
Papierkorb-Aufnahmen in der Summe mitzaehlen).

app/web/src/main.js

@@ -98,9 +98,14 @@ function sysmonMarkup() {
             <circle class="ring-fg" cx="18" cy="18" r="15.9155" stroke-dasharray="0 100" data-disk-ring/>
           </svg>
           <span class="sys-val mono" data-disk-pct>–</span>
-          <div class="sys-pop">
+          <div class="sys-pop sys-pop-disk">
             <div class="sys-pop-h">Speicher für Aufnahmen</div>
             <div class="sys-row"><span>Aufnahmen</span><b data-disk-used>–</b></div>
+            <div class="sys-bar"><i data-disk-bar style="width:0%"></i></div>
+            <div class="sys-row"><span>Noch frei</span><b data-disk-free>–</b></div>
+            <div class="sys-row"><span>Gesamt für Aufnahmen</span><b data-disk-total>–</b></div>
+            <div class="sys-note">100 % = freier Platz + alle vorhandenen Aufnahmen<br>(also der Platz eines frisch aufgesetzten Systems)</div>
+            <div class="sys-row sys-sub"><span>Partition gesamt</span><b data-disk-part>–</b></div>
           </div>
         </div>
         <div class="sys-chip" id="sysload" tabindex="0" role="group" aria-label="Systemlast">
@@ -152,7 +157,11 @@ function paintSysmon(s) {
     set('[data-disk-pct]', p + '%');
     const ring = document.querySelector('[data-disk-ring]');
     if (ring) ring.setAttribute('stroke-dasharray', `${Math.max(0, Math.min(100, s.disk.usedPct)).toFixed(1)} 100`);
+    const db = document.querySelector('[data-disk-bar]'); if (db) db.style.width = Math.min(100, s.disk.usedPct) + '%';
     set('[data-disk-used]', `${sysGb(s.disk.recBytes)}${s.disk.recFiles ? ` · ${s.disk.recFiles} Dateien` : ''}`);
+    set('[data-disk-free]', sysGb(s.disk.freeBytes));
+    set('[data-disk-total]', sysGb(s.disk.budgetBytes));
+    set('[data-disk-part]', `${sysGb(s.disk.totalBytes)} · ${Math.round(s.disk.partPct)} % belegt`);
   }
 
   const cpu = s.cpu ? s.cpu.pct : 0;

app/web/src/style.css

@@ -161,7 +161,7 @@ nav { display: flex; gap: 6px; flex-wrap: wrap; }
 /* Klappkarte bei Mauskontakt (oder Tastaturfokus) */
 .sys-pop {
   display: none; position: absolute; top: calc(100% + 8px); right: 0; z-index: 60;
-  min-width: 215px; max-width: 300px; padding: 10px 12px; color: var(--fg);
+  min-width: 215px; padding: 10px 12px; color: var(--fg);
   background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
   box-shadow: 0 8px 24px rgba(0, 0, 0, .28);
 }
@@ -170,9 +170,17 @@ nav { display: flex; gap: 6px; flex-wrap: wrap; }
   font-size: 11px; font-weight: 700; color: var(--muted);
   text-transform: uppercase; letter-spacing: .05em; margin-bottom: 7px;
 }
-.sys-row { display: flex; justify-content: space-between; gap: 14px; font-size: 13px; padding: 2px 0; }
+/* Beschriftung und Wert bleiben je einzeilig — sonst rutscht z. B. die Einheit
+   („GB“) allein in die nächste Zeile und sieht aus wie ein fehlender Wert.
+   Die Karte wächst stattdessen in die Breite. */
+.sys-row { display: flex; justify-content: space-between; gap: 18px; font-size: 13px; padding: 2px 0; white-space: nowrap; }
 .sys-row span { color: var(--muted); }
 .sys-row b { font-weight: 600; font-variant-numeric: tabular-nums; }
+.sys-pop-disk { min-width: 285px; }
+.sys-pop-disk .sys-note { white-space: normal; }
+.sys-note { font-size: 11px; line-height: 1.35; color: var(--muted); margin: 6px 0 4px; }
+.sys-row.sys-sub { border-top: 1px solid var(--line); margin-top: 4px; padding-top: 5px; font-size: 12px; }
+.sys-row.sys-sub b { font-weight: 500; color: var(--muted); }
 .sys-bar { height: 5px; border-radius: 3px; background: var(--inset); overflow: hidden; margin: 3px 0 7px; }
 .sys-bar i { display: block; height: 100%; background: var(--accent); transition: width .4s ease; }
 .sys-chip.ok .sys-bar i { background: var(--ok); }