style(ui): improve layout and styling across components

- components/Versions.vue: Use small button styles for version badges; update tooltip colors.
- components/connections/ConnectionsToolbar.vue: Refactor toolbar layout and spacing.
- components/DataUsageTable.vue: Improve mobile sort button layout.
- pages/config.vue: Adjust input widths for better responsiveness.
- pages/connections.vue: Add padding to container.
- pages/logs.vue: Add padding to container; fine-tune table cell spacing.
- pages/overview.vue: Add padding to container; adjust collapse icon size.

Author: xuqingfande

components/DataUsageTable.vue

@@ -460,7 +460,7 @@ const currentViewLabel = computed(() => {
               </div>
               <div class="flex flex-1 gap-2">
                 <button
-                  class="flex-1 rounded px-2 py-1 text-xs transition-colors"
+                  class="flex h-9 flex-1 items-center justify-center rounded px-2 py-1 text-xs transition-colors"
                   :class="
                     sortField === 'label'
                       ? 'bg-primary text-primary-content'
@@ -479,7 +479,7 @@ const currentViewLabel = computed(() => {
                   />
                 </button>
                 <button
-                  class="flex-1 rounded px-2 py-1 text-xs transition-colors"
+                  class="flex h-9 flex-1 items-center justify-center rounded px-2 py-1 text-xs transition-colors"
                   :class="
                     sortField === 'duration'
                       ? 'bg-primary text-primary-content'
@@ -498,7 +498,7 @@ const currentViewLabel = computed(() => {
                   />
                 </button>
                 <button
-                  class="flex-1 rounded px-2 py-1 text-xs transition-colors"
+                  class="flex h-9 flex-1 items-center justify-center rounded px-2 py-1 text-xs transition-colors"
                   :class="
                     sortField === 'upload'
                       ? 'bg-primary text-primary-content'
@@ -517,7 +517,7 @@ const currentViewLabel = computed(() => {
                   />
                 </button>
                 <button
-                  class="flex-1 rounded px-2 py-1 text-xs transition-colors"
+                  class="flex h-9 flex-1 items-center justify-center rounded px-2 py-1 text-xs transition-colors"
                   :class="
                     sortField === 'download'
                       ? 'bg-primary text-primary-content'
@@ -536,7 +536,7 @@ const currentViewLabel = computed(() => {
                   />
                 </button>
                 <button
-                  class="flex-1 rounded px-2 py-1 text-xs transition-colors"
+                  class="flex h-9 flex-1 items-center justify-center rounded px-2 py-1 text-xs transition-colors"
                   :class="
                     sortField === 'total'
                       ? 'bg-primary text-primary-content'

components/Modal.vue

@@ -41,7 +41,7 @@ defineExpose({ open, close })
     }"
   >
     <div
-      class="flex max-h-[90vh] flex-col overflow-hidden rounded-2xl p-0 transition-all duration-200 ease-[cubic-bezier(0.4,0,0.2,1)]"
+      class="modal-box flex max-h-[90vh] flex-col overflow-hidden rounded-2xl p-0 transition-all duration-200 ease-[cubic-bezier(0.4,0,0.2,1)]"
       :class="
         isOpen
           ? 'translate-y-0 scale-100 opacity-100'

components/Versions.vue

@@ -289,15 +289,15 @@ watch(
     <div
       ref="frontendReference"
       role="button"
-      class="version-badge relative flex w-full cursor-pointer items-center justify-center overflow-visible rounded-md p-2 transition-all duration-200 ease-in-out"
+      class="btn relative btn-sm"
       @click="handleFrontendUpgrade"
       @mouseenter="onFrontendMouseEnter"
       @mouseleave="onFrontendMouseLeave"
     >
       <!-- Update indicator -->
       <span
         v-if="frontendRelease?.isUpdateAvailable"
-        class="absolute top-0 right-0 inline-grid translate-x-1/2 -translate-y-1/2"
+        class="absolute top-2 right-2 inline-grid translate-x-1/2 -translate-y-1/2"
       >
         <span
           class="col-start-1 row-start-1 h-2 w-2 animate-ping rounded-full bg-info"
@@ -326,14 +326,14 @@ watch(
           v-if="isFrontendTooltipOpen"
           ref="frontendFloating"
           :style="frontendFloatingStyles"
-          class="z-70 max-h-96 overflow-y-auto rounded-xl bg-neutral p-4 text-neutral-content shadow-xl"
+          class="z-70 max-h-96 overflow-y-auto rounded-xl bg-base-100 p-4 text-neutral-content shadow-xl"
           @mouseenter="onFrontendTooltipMouseEnter"
           @mouseleave="onFrontendTooltipMouseLeave"
         >
           <!-- Arrow -->
           <div
             ref="frontendArrow"
-            class="absolute h-2 w-2 rotate-45 bg-neutral"
+            class="absolute h-2 w-2 rotate-45 bg-base-100"
             :style="frontendArrowStyles"
           />
           <Changelog
@@ -348,15 +348,15 @@ watch(
     <div
       ref="backendReference"
       role="button"
-      class="version-badge relative flex w-full cursor-pointer items-center justify-center overflow-visible rounded-md p-2 transition-all duration-200 ease-in-out"
+      class="btn relative btn-sm"
       @click="handleBackendUpgrade"
       @mouseenter="onBackendMouseEnter"
       @mouseleave="onBackendMouseLeave"
     >
       <!-- Update indicator -->
       <span
         v-if="backendRelease?.isUpdateAvailable"
-        class="absolute top-0 right-0 inline-grid translate-x-1/2 -translate-y-1/2"
+        class="absolute top-2 right-2 inline-grid translate-x-1/2 -translate-y-1/2"
       >
         <span
           class="col-start-1 row-start-1 h-2 w-2 animate-ping rounded-full bg-info"
@@ -385,14 +385,14 @@ watch(
           v-if="isBackendTooltipOpen"
           ref="backendFloating"
           :style="backendFloatingStyles"
-          class="z-70 max-h-96 overflow-y-auto rounded-xl bg-neutral p-4 text-neutral-content shadow-xl"
+          class="z-70 max-h-96 overflow-y-auto rounded-xl bg-base-100 p-4 text-neutral-content shadow-xl"
           @mouseenter="onBackendTooltipMouseEnter"
           @mouseleave="onBackendTooltipMouseLeave"
         >
           <!-- Arrow -->
           <div
             ref="backendArrow"
-            class="absolute h-2 w-2 rotate-45 bg-neutral"
+            class="absolute h-2 w-2 rotate-45 bg-base-100"
             :style="backendArrowStyles"
           />
           <Changelog

components/connections/ConnectionsToolbar.vue

@@ -114,10 +114,7 @@ const { t } = useI18n()
           </option>
         </select>
       </div>
-    </div>
 
-    <!-- Toolbar Row 2: Sort + Search + Actions -->
-    <div class="flex flex-wrap items-center gap-2">
       <div class="flex shrink-0 items-center gap-1.5">
         <span
           class="hidden text-[0.8125rem] whitespace-nowrap text-base-content/60 sm:inline-block"

pages/config.vue

@@ -170,7 +170,7 @@ const activeSection = ref<'core' | 'xd' | 'tools'>('core')
 </script>
 
 <template>
-  <div class="flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto p-2">
+  <div class="flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto">
     <!-- Loading State -->
     <div v-if="isLoading" class="flex h-64 items-center justify-center">
       <div class="flex flex-col items-center gap-4">
@@ -792,7 +792,7 @@ const activeSection = ref<'core' | 'xd' | 'tools'>('core')
               <input
                 v-model="remoteConfigURL"
                 type="url"
-                class="input-bordered input flex-1"
+                class="input-bordered input w-full"
                 :placeholder="t('remoteConfigURLPlaceholder')"
               />
               <Button
@@ -955,7 +955,7 @@ const activeSection = ref<'core' | 'xd' | 'tools'>('core')
                 <input
                   v-model="dnsQuery.name"
                   type="search"
-                  class="input-bordered input flex-1 font-mono"
+                  class="input-bordered input w-full font-mono"
                   placeholder="google.com"
                   @input="onDnsQueryInput"
                 />

pages/logs.vue

@@ -367,8 +367,9 @@ const tableSizeClass = computed(() =>
               :style="{ animationDelay: `${(index % 20) * 15}ms` }"
             >
               <td
-                v-for="col in columns"
+                v-for="(col, index) in columns"
                 :key="col.id"
+                :class="index === 0 ? 'py-1 leading-6' : ''"
                 class="border-b border-base-content/5"
               >
                 <component :is="() => col.render(row.original)" />

pages/overview.vue

@@ -380,9 +380,7 @@ watch(
 </script>
 
 <template>
-  <div
-    class="flex h-full flex-col gap-4 overflow-x-hidden overflow-y-auto p-1 pr-2 sm:pr-3"
-  >
+  <div class="flex h-full flex-col gap-4 overflow-x-hidden overflow-y-auto">
     <!-- Stats Grid -->
     <div
       class="-m-1 grid min-w-0 grid-cols-2 gap-3 p-1 sm:grid-cols-3 xl:grid-cols-6"
@@ -620,7 +618,7 @@ watch(
           <h3>{{ t('networkTopology') }}</h3>
         </div>
         <button
-          class="flex h-8 w-8 cursor-pointer items-center justify-center rounded-full border-none bg-transparent text-base-content transition-colors duration-200 hover:bg-base-content/10"
+          class="flex h-6 w-6 cursor-pointer items-center justify-center rounded-full border-none bg-transparent text-base-content transition-colors duration-200 hover:bg-base-content/10"
         >
           <IconChevronDown
             :size="20"

pages/proxies.vue

@@ -479,7 +479,7 @@ const ProviderProxyNodes = defineComponent({
 </script>
 
 <template>
-  <div class="flex h-full flex-col gap-3 overflow-y-auto p-2">
+  <div class="flex h-full flex-col gap-3 overflow-y-auto">
     <!-- Header with Tabs and Actions -->
     <div class="animate-fade-slide-in flex flex-wrap items-center gap-3">
       <!-- Tabs -->

pages/rules.vue

@@ -119,7 +119,7 @@ const providersTotalSize = computed(() =>
 </script>
 
 <template>
-  <div class="rules-page flex h-full flex-col gap-3 overflow-y-auto p-2">
+  <div class="rules-page flex h-full flex-col gap-3 overflow-y-auto">
     <!-- Loading State -->
     <div v-if="isLoading" class="flex flex-1 items-center justify-center">
       <div class="flex flex-col items-center gap-4">