0.10.2-4 Layout

backend/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "ripster-backend",
-  "version": "0.10.2-3",
+  "version": "0.10.2-4",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "ripster-backend",
-      "version": "0.10.2-3",
+      "version": "0.10.2-4",
       "dependencies": {
         "archiver": "^7.0.1",
         "cors": "^2.8.5",

backend/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ripster-backend",
-  "version": "0.10.2-3",
+  "version": "0.10.2-4",
   "private": true,
   "type": "commonjs",
   "scripts": {

frontend/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "ripster-frontend",
-  "version": "0.10.2-3",
+  "version": "0.10.2-4",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "ripster-frontend",
-      "version": "0.10.2-3",
+      "version": "0.10.2-4",
       "dependencies": {
         "primeicons": "^7.0.0",
         "primereact": "^10.9.2",

frontend/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ripster-frontend",
-  "version": "0.10.2-3",
+  "version": "0.10.2-4",
   "private": true,
   "type": "module",
   "scripts": {

frontend/src/pages/DashboardPage.jsx

@@ -2177,7 +2177,7 @@ export default function DashboardPage({
             </section>
 
             <section className="hardware-monitor-block">
-              <h4>Freier Speicher in Pfaden</h4>
+              <h4>Freier Speicher</h4>
               <div className="hardware-storage-list">
                 {storageGroups.map((group) => {
                   const rep = group.representative;
@@ -2188,46 +2188,31 @@ export default function DashboardPage({
                     : 0;
                   const hasError = group.entries.every((e) => e?.error);
                   const groupKey = group.mountPoint || group.entries.map((e) => e?.key).join('-');
+                  const labels = group.entries.map((e) => e?.label || e?.key || 'Pfad').join(' · ');
                   return (
                     <div
                       key={`storage-group-${groupKey}`}
                       className={`hardware-storage-item compact${hasError ? ' has-error' : ''}`}
                     >
-                      <div className="hardware-storage-head">
-                        <strong>{group.entries.map((e) => e?.label || e?.key || 'Pfad').join(' · ')}</strong>
-                        <span className={`hardware-storage-percent tone-${tone}`}>
-                          {hasError ? 'Fehler' : formatPercent(rep?.usagePercent)}
-                        </span>
-                      </div>
-
+                      <small className="hardware-storage-group-label">{labels}</small>
                       {hasError ? (
                         <small className="error-text">{rep?.error}</small>
                       ) : (
                         <>
+                          <div className="hardware-storage-bar-row">
                             <div className={`hardware-storage-bar tone-${tone}`}>
                               <ProgressBar value={barValue} showValue={false} />
                             </div>
+                            <span className={`hardware-storage-percent tone-${tone}`}>
+                              {formatPercent(rep?.usagePercent)}
+                            </span>
+                          </div>
                           <div className="hardware-storage-summary">
                             <small>Frei: {formatBytes(rep?.freeBytes)}</small>
                             <small>Gesamt: {formatBytes(rep?.totalBytes)}</small>
                           </div>
                         </>
                       )}
-
-                      {group.entries.map((entry) => (
-                        <div key={entry?.key} className="hardware-storage-paths">
-                          <small className="hardware-storage-label-tag">{entry?.label || entry?.key}:</small>
-                          <small className="hardware-storage-path" title={entry?.path || '-'}>
-                            {entry?.path || '-'}
-                          </small>
-                          {entry?.queryPath && entry.queryPath !== entry.path ? (
-                            <small className="hardware-storage-path" title={entry.queryPath}>
-                              (Parent: {entry.queryPath})
-                            </small>
-                          ) : null}
-                          {entry?.note ? <small className="hardware-storage-path">{entry.note}</small> : null}
-                        </div>
-                      ))}
                     </div>
                   );
                 })}

frontend/src/styles/app.css

@@ -392,7 +392,7 @@ body {
 
 .hardware-monitor-grid {
   display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
+  grid-template-columns: minmax(0, 1fr);
   gap: 0.75rem;
   align-items: stretch;
 }
@@ -554,6 +554,19 @@ body {
   gap: 0.3rem;
 }
 
+.hardware-storage-group-label {
+  color: var(--rip-muted);
+  font-size: 0.75rem;
+  line-height: 1.3;
+}
+
+.hardware-storage-bar-row {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 0.5rem;
+}
+
 .hardware-storage-head {
   display: grid;
   grid-template-columns: minmax(0, 1fr) auto;

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "ripster",
-  "version": "0.10.2-3",
+  "version": "0.10.2-4",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "ripster",
-      "version": "0.10.2-3",
+      "version": "0.10.2-4",
       "devDependencies": {
         "concurrently": "^9.1.2"
       }

package.json

@@ -1,7 +1,7 @@
 {
   "name": "ripster",
   "private": true,
-  "version": "0.10.2-3",
+  "version": "0.10.2-4",
   "scripts": {
     "dev": "concurrently \"npm run dev --prefix backend\" \"npm run dev --prefix frontend\"",
     "dev:backend": "npm run dev --prefix backend",