Small improvements for mobile

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 {

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);
 }

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>