From 7adabcc2031d3934142eec5978f390de1c8d9949 Mon Sep 17 00:00:00 2001
From: Johannes Zellner <johannes@cloudron.io>
Date: Tue, 14 Oct 2025 17:23:45 +0200
Subject: [PATCH] Avoid much flickering on disk graph item hover

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

diff --git a/dashboard/src/components/DiskUsageItem.vue b/dashboard/src/components/DiskUsageItem.vue
index 9532a125b..0eacd60d7 100644
--- a/dashboard/src/components/DiskUsageItem.vue
+++ b/dashboard/src/components/DiskUsageItem.vue
@@ -144,11 +144,11 @@ onUnmounted(() => {
 
       <div v-if="percent < 100" style="text-align: center; margin-top: 10px;">Calculating speed and disk usage ... {{ parseInt(percent) }}%</div>
       <div v-else>
-        <table style="width: 100%">
+        <table style="width: 100%;table-layout: fixed">
           <tr v-for="content in contents" :key="content.id" @mouseover="highlight = content.id" :class="{ highlight: highlight === content.id }">
             <td style="width: 20px"><div class="content-color-indicator" :style="{ backgroundColor: content.color }"></div></td>
-            <td>{{ content.label }}</td>
-            <td style="text-align: right">{{ prettyDecimalSize(content.usage) }}</td>
+            <td style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">{{ content.label }}</td>
+            <td style="text-align: right; white-space: nowrap;">{{ prettyDecimalSize(content.usage) }}</td>
           </tr>
         </table>
       </div>