From e6079ee275b5cb29984e793d5dde3d4e46022d31 Mon Sep 17 00:00:00 2001
From: Johannes Zellner <johannes@cloudron.io>
Date: Sun, 16 Feb 2025 15:56:33 +0100
Subject: [PATCH] Fixup some layout gap issues

---
 dashboard/src/style.css              | 22 ++++++++++++++++++++++
 dashboard/src/theme.scss             | 14 --------------
 dashboard/src/views/AppsView.vue     | 11 +----------
 dashboard/src/views/ServicesView.vue |  2 +-
 4 files changed, 24 insertions(+), 25 deletions(-)

diff --git a/dashboard/src/style.css b/dashboard/src/style.css
index 8bbd0bd19..222f14456 100644
--- a/dashboard/src/style.css
+++ b/dashboard/src/style.css
@@ -87,6 +87,9 @@ footer > .p {
 }
 
 .table-actions {
+  display: flex;
+  justify-content: end;
+  gap: 6px;
 /* those margins will give table rows in Pankow TableViews some more space */
   margin-top: 4px;
   margin-bottom: 4px;
@@ -132,6 +135,25 @@ tr:hover .table-actions {
   font-size: 12px;
 }
 
+.section-header {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 50px;
+  gap: 5px;
+  padding-right: 15px;
+}
+
+.section-header > div {
+  display: flex;
+  gap: 6px;
+}
+
+h1.section-header {
+  margin-top: 20px;
+}
+
 /* info table label:value in Sections */
 .info-row {
   display: flex;
diff --git a/dashboard/src/theme.scss b/dashboard/src/theme.scss
index a12a2c345..fd7371677 100644
--- a/dashboard/src/theme.scss
+++ b/dashboard/src/theme.scss
@@ -544,20 +544,6 @@ h2 {
     z-index: 200;
 }
 
-.section-header {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: space-between;
-    align-items: center;
-    margin-top: 50px;
-    gap: 5px;
-    padding-right: 15px;
-}
-
-h1.section-header {
-    margin-top: 20px;
-}
-
 .offscreen {
     position: absolute;
     left: -999em;
diff --git a/dashboard/src/views/AppsView.vue b/dashboard/src/views/AppsView.vue
index e4b790b02..bfda38091 100644
--- a/dashboard/src/views/AppsView.vue
+++ b/dashboard/src/views/AppsView.vue
@@ -261,7 +261,7 @@ onUnmounted(() => {
             </div>
           </template>
           <template #actions="slotProps">
-            <div class="actions">
+            <div class="table-actions">
               <ButtonGroup>
                 <Button small secondary tool v-if="slotProps.type !== APP_TYPES.LINK" :href="'/logs.html?appId=' + slotProps.id" target="_blank" v-tooltip="$t('app.logsActionTooltip')" icon="fas fa-align-left"></Button>
                 <Button small secondary tool v-if="slotProps.type !== APP_TYPES.PROXIED && slotProps.type !== APP_TYPES.LINK" :href="'/terminal.html?id=' + slotProps.id" target="_blank" v-tooltip="$t('app.terminalActionTooltip')" icon="fa fa-terminal"></Button>
@@ -364,15 +364,6 @@ onUnmounted(() => {
   }
 }
 
-.actions {
-  text-align: right;
-  visibility: hidden;
-}
-
-tr:hover .actions {
-  visibility: visible;
-}
-
 .grid {
   display: flex;
   height: 100%;
diff --git a/dashboard/src/views/ServicesView.vue b/dashboard/src/views/ServicesView.vue
index ed76a5295..09cc1d540 100644
--- a/dashboard/src/views/ServicesView.vue
+++ b/dashboard/src/views/ServicesView.vue
@@ -176,7 +176,7 @@ onMounted(async () => {
 
     <Section :title="$t('services.title')">
       <template #header-buttons>
-        <Button @click="refreshAll()" :loading="refreshBusy">{{ $t('services.refresh') }}</Button>
+        <Button @click="refreshAll()" :loading="refreshBusy" :disabled="refreshBusy">{{ $t('services.refresh') }}</Button>
       </template>
 
       <p>{{ $t('services.description') }}</p>