From 980f52be6fe66d9731222d03287baaa10ea8a20e Mon Sep 17 00:00:00 2001
From: Amir Raminfar <findamir@gmail.com>
Date: Tue, 28 Apr 2026 06:51:42 -0700
Subject: [PATCH] chore: polish settings and dashboard pages (#4664)

Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 assets/pages/index.vue    | 14 +++++++++++---
 assets/pages/settings.vue | 17 ++++++++++-------
 2 files changed, 21 insertions(+), 10 deletions(-)

diff --git a/assets/pages/index.vue b/assets/pages/index.vue
index 1ac641e4..84225f6f 100644
--- a/assets/pages/index.vue
+++ b/assets/pages/index.vue
@@ -13,7 +13,7 @@
     </section>
 
     <section>
-      <div class="mb-2 flex items-center justify-between">
+      <div class="mb-4 flex items-center justify-between">
         <h2 class="text-lg font-semibold">
           {{ $t("label.container", { count: runningContainers.length }) }}
         </h2>
@@ -42,7 +42,6 @@ const { containers, ready } = storeToRefs(containerStore) as unknown as {
 
 const runningContainers = computed(() => containers.value.filter((c) => c.state === "running"));
 
-// Persist collapse state in localStorage
 const hostsCollapsed = useStorage("DOZZLE_HOSTS_COLLAPSED", false);
 const containersCollapsed = useStorage("DOZZLE_CONTAINERS_COLLAPSED", false);
 
@@ -60,7 +59,9 @@ watchEffect(() => {
 
 .collapse-enter-active,
 .collapse-leave-active {
-  transition: all 0.2s ease;
+  transition:
+    opacity 200ms cubic-bezier(0.22, 1, 0.36, 1),
+    max-height 240ms cubic-bezier(0.22, 1, 0.36, 1);
   overflow: hidden;
 }
 
@@ -69,4 +70,11 @@ watchEffect(() => {
   opacity: 0;
   max-height: 0;
 }
+
+@media (prefers-reduced-motion: reduce) {
+  .collapse-enter-active,
+  .collapse-leave-active {
+    transition: none;
+  }
+}
 </style>
diff --git a/assets/pages/settings.vue b/assets/pages/settings.vue
index 9d53bb08..2c19af76 100644
--- a/assets/pages/settings.vue
+++ b/assets/pages/settings.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="@container flex flex-col gap-5 px-4 py-4 md:px-8">
+  <div class="@container flex flex-col gap-8 px-4 py-4 md:px-8">
     <section>
       <Links>
         <template #more-items>
@@ -16,10 +16,10 @@
       </div>
 
       <div class="border-base-content/15 bg-base-200/40 divide-base-content/10 divide-y rounded-lg border">
-        <div class="flex flex-col gap-2 p-5">
+        <div class="flex flex-col gap-2 p-4">
           <div class="flex flex-wrap items-center gap-3">
             <span class="text-2xl font-semibold tracking-tight">Dozzle</span>
-            <span class="status-pill status-pill-neutral">{{ config.version }}</span>
+            <span class="status-pill status-pill-neutral font-mono">{{ config.version }}</span>
             <a
               v-if="hasRelease"
               :href="latestRelease?.htmlUrl"
@@ -36,7 +36,7 @@
               Latest release {{ latestRelease.name }} ·
               {{ new Date(latestRelease.createdAt).toLocaleDateString(undefined, dateFmt) }}
             </template>
-            <template v-else> You're running the latest version. </template>
+            <template v-else>You're running the latest version.</template>
           </div>
         </div>
 
@@ -61,7 +61,7 @@
               href="https://buymeacoffee.com/amirraminfar"
               target="_blank"
               rel="noopener noreferrer"
-              class="btn btn-secondary btn-sm"
+              class="btn btn-sm"
             >
               <mdi:beer /> Buy me a beer
             </a>
@@ -110,7 +110,7 @@
           </label>
           <div class="flex min-h-13 flex-wrap items-center justify-between gap-3 p-4 text-sm font-medium">
             <span>{{ $t("settings.datetime-format") }}</span>
-            <div class="ml-auto flex gap-1.5">
+            <div class="ml-auto flex flex-wrap gap-2">
               <DropdownMenu
                 v-model="dateLocale"
                 :options="[
@@ -222,7 +222,10 @@
           />
         </div>
         <label class="flex min-h-13 items-center justify-between gap-4 p-4 text-sm font-medium">
-          <span>{{ $t("settings.search") }} <key-shortcut char="f" class="align-top"></key-shortcut></span>
+          <span class="inline-flex items-center gap-2">
+            {{ $t("settings.search") }}
+            <key-shortcut char="f" />
+          </span>
           <input type="checkbox" class="toggle toggle-primary toggle-sm" v-model="search" />
         </label>
         <label class="flex min-h-13 items-center justify-between gap-4 p-4 text-sm font-medium">