From e5a1fc9e2d9fc2f8788ad51f9ec69e06216f647a Mon Sep 17 00:00:00 2001
From: Johannes Zellner <johannes@cloudron.io>
Date: Mon, 1 Dec 2025 20:49:59 +0100
Subject: [PATCH] Ensure the restore progress message does not overflow the
 screen

---
 dashboard/src/views/RestoreView.vue | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/dashboard/src/views/RestoreView.vue b/dashboard/src/views/RestoreView.vue
index d4eb3b43a..110266098 100644
--- a/dashboard/src/views/RestoreView.vue
+++ b/dashboard/src/views/RestoreView.vue
@@ -349,7 +349,7 @@ onMounted(async () => {
         <div style="display: flex; flex-direction: column; height: 100%; align-items: center;">
           <Whirlpool/>
           <h1>Please wait while Cloudron is restoring <AnimatedDots/></h1>
-          <h4 style="margin-top: 0">{{ progressMessage }}</h4>
+          <h4 class="progress-message">{{ progressMessage }}</h4>
           <small>You can follow the logs on the server at <code @click="onCopyToClipboard('/home/yellowtent/platformdata/logs/box.log')">/home/yellowtent/platformdata/logs/box.log</code></small>
           <p v-show="taskMinutesActive >= 4">If restore appears stuck, it can be restarted by running <code @click="onCopyToClipboard('systemctl restart box')">systemctl restart box</code> and reloading this page.</p>
         </div>
@@ -477,4 +477,11 @@ onMounted(async () => {
   margin-top: 20px;
 }
 
+.progress-message {
+  margin-top: 0;
+  max-width: 90vw;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
 </style>