From 9d30b6e29a39a8c58b436c22b2a033318d558c78 Mon Sep 17 00:00:00 2001
From: Johannes Zellner <johannes@cloudron.io>
Date: Mon, 10 Mar 2025 16:47:31 +0100
Subject: [PATCH] Small improvements for mobile

---
 dashboard/src/components/SettingsItem.vue | 6 ++++--
 dashboard/src/style.css                   | 6 ++++++
 dashboard/src/views/EmailsView.vue        | 7 ++++---
 3 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/dashboard/src/components/SettingsItem.vue b/dashboard/src/components/SettingsItem.vue
index 658455181..7df88f9ce 100644
--- a/dashboard/src/components/SettingsItem.vue
+++ b/dashboard/src/components/SettingsItem.vue
@@ -32,8 +32,10 @@
   }
 }
 
-.settings-item:hover {
-  background-color: var(--pankow-color-background-hover);
+@media (hover: hover) {
+  .settings-item:hover {
+    background-color: var(--pankow-color-background-hover);
+  }
 }
 
 .settings-item label {
diff --git a/dashboard/src/style.css b/dashboard/src/style.css
index 03172aa80..6cc41e3be 100644
--- a/dashboard/src/style.css
+++ b/dashboard/src/style.css
@@ -19,6 +19,12 @@ html, body {
   }
 }
 
+@media (max-width: 576px) {
+  .hide-mobile {
+    display: none;
+  }
+}
+
 .shadow {
   box-shadow: 0 2px 5px rgba(0,0,0,.1);
 }
diff --git a/dashboard/src/views/EmailsView.vue b/dashboard/src/views/EmailsView.vue
index 26cc7ce1a..ca4635423 100644
--- a/dashboard/src/views/EmailsView.vue
+++ b/dashboard/src/views/EmailsView.vue
@@ -377,12 +377,13 @@ onMounted(async () => {
     <h1 class="section-header">
       {{ $t('emails.title') }}
       <div style="display: flex; gap: 4px; flex-wrap: wrap; margin-top: 10px;">
-        <Button href="#/emails-queue">{{ $t('emails.action.queue') }}</Button>
-        <Button href="#/emails-eventlog">{{ $t('eventlog.title') }}</Button>
+        <Button href="#/emails-queue" icon="fa-solid fa-list-ol">{{ $t('emails.action.queue') }}</Button>
+        <Button href="#/emails-eventlog" icon="fa-solid fa-list-alt">{{ $t('eventlog.title') }}</Button>
       </div>
     </h1>
 
-    <Section :title="$t('emails.domains.title')">
+    <!-- <Section :title="$t('emails.domains.title')"> -->
+    <Section>
       <TableView :columns="columns" :model="domains" :busy="busy">
         <template #status="domain">
           <i class="fa fa-circle" :class="{ 'status-active': domain.status, 'status-error': !domain.status }" v-if="domain.statusCheckDone"></i>