fix: Improves UI with padding and color improvements

assets/components/SideMenu.vue

@@ -1,9 +1,9 @@
 <template>
   <div v-if="ready" data-testid="side-menu">
-    <div class="breadcrumbs text-sm">
+    <div class="breadcrumbs">
       <ul>
-        <li><a @click.prevent="setHost(null)">Hosts</a></li>
+        <li><a @click.prevent="setHost(null)" class="link-primary">Hosts</a></li>
-        <li v-if="sessionHost && hosts[sessionHost]">
+        <li v-if="sessionHost && hosts[sessionHost]" class="cursor-default">
           {{ hosts[sessionHost].name }}
         </li>
       </ul>
@@ -141,6 +141,9 @@ const activeContainersById = computed(() =>
 );
 </script>
 <style scoped lang="postcss">
+.menu {
+  @apply text-[0.95em];
+}
 .containers a {
   @apply auto-cols-[auto_max-content];
   .pin {

assets/components/SidePanel.vue

@@ -1,5 +1,5 @@
 <template>
-  <aside class="fixed h-screen w-[inherit] overflow-auto p-4" data-testid="navigation">
+  <aside class="fixed h-screen w-[inherit] overflow-auto p-3" data-testid="navigation">
     <h1>
       <router-link :to="{ name: 'index' }">
         <svg class="h-14 w-28 fill-secondary">
@@ -12,7 +12,7 @@
       </small>
     </h1>
 
-    <div class="mt-4 flex gap-4">
+    <div class="flex gap-4">
       <router-link
         :to="{ name: 'settings' }"
         :aria-label="$t('title.settings')"

assets/pages/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="flex flex-col gap-16 px-8 pt-8">
+  <div class="flex flex-col gap-16 px-4 pt-8 md:px-8">
     <section>
       <div class="stats grid bg-base-lighter shadow">
         <div class="stat">