From 20cc82e21079903aed9e27c6f36fa28ffd74208d Mon Sep 17 00:00:00 2001
From: Johannes Zellner <johannes@cloudron.io>
Date: Thu, 17 Jul 2025 19:44:55 +0200
Subject: [PATCH] slightly better disk usage styling

---
 dashboard/src/components/DiskUsageItem.vue | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/dashboard/src/components/DiskUsageItem.vue b/dashboard/src/components/DiskUsageItem.vue
index b250d0143..1357d59ea 100644
--- a/dashboard/src/components/DiskUsageItem.vue
+++ b/dashboard/src/components/DiskUsageItem.vue
@@ -191,7 +191,7 @@ async function onExpand() {
       <div v-else>
         <table style="width: 100%">
           <tr v-for="content in contents" :key="content.id">
-            <td><div class="content-color-indicator" :style="{ backgroundColor: content.color }"></div></td>
+            <td style="width: 20px"><div class="content-color-indicator" :style="{ backgroundColor: content.color }"></div></td>
             <td>{{ content.id }}</td>
             <td style="text-align: right">{{ prettyDecimalSize(content.usage) }}</td>
           </tr>
@@ -272,10 +272,13 @@ async function onExpand() {
 }
 
 .content-color-indicator {
-  display: inline-block;
   height: 16px;
   width: 16px;
-  margin-right: 6px;
+  border-radius: 4px;
+}
+
+.td {
+  vertical-align: middle;
 }
 
 </style>