feat(Versions, config): enhance layout and update styles for better UI consistency

- Adjusted padding and overflow properties in Versions and config components.
- Improved positioning of update indicators for frontend and backend versions.

Author: kunish

components/Versions.vue

@@ -284,20 +284,20 @@ watch(
 </script>
 
 <template>
-  <div v-if="!collapsed" class="mx-2 grid grid-cols-1 gap-2 md:mx-0">
+  <div v-if="!collapsed" class="mx-2 grid grid-cols-1 gap-2 pt-1 md:mx-0">
     <!-- Frontend Version -->
     <kbd
       ref="frontendReference"
       role="button"
-      class="relative kbd w-full cursor-pointer py-2"
+      class="relative kbd w-full cursor-pointer overflow-visible py-2"
       @click="handleFrontendUpgrade"
       @mouseenter="onFrontendMouseEnter"
       @mouseleave="onFrontendMouseLeave"
     >
       <!-- Update indicator -->
       <span
         v-if="frontendRelease?.isUpdateAvailable"
-        class="absolute -top-1 -right-1 inline-grid *:[grid-area:1/1]"
+        class="absolute top-0 right-0 inline-grid translate-x-1/2 -translate-y-1/2 *:[grid-area:1/1]"
       >
         <span class="status animate-ping status-info" />
         <div class="status status-info" />
@@ -336,15 +336,15 @@ watch(
     <kbd
       ref="backendReference"
       role="button"
-      class="relative kbd w-full cursor-pointer py-2"
+      class="relative kbd w-full cursor-pointer overflow-visible py-2"
       @click="handleBackendUpgrade"
       @mouseenter="onBackendMouseEnter"
       @mouseleave="onBackendMouseLeave"
     >
       <!-- Update indicator -->
       <span
         v-if="backendRelease?.isUpdateAvailable"
-        class="absolute -top-1 -right-1 inline-grid *:[grid-area:1/1]"
+        class="absolute top-0 right-0 inline-grid translate-x-1/2 -translate-y-1/2 *:[grid-area:1/1]"
       >
         <span class="status animate-ping status-info" />
         <div class="status status-info" />

pages/config.vue

@@ -154,7 +154,9 @@ const isLoading = computed(
 </script>
 
 <template>
-  <div class="mx-auto flex h-full max-w-3xl flex-col gap-4 overflow-y-auto">
+  <div
+    class="mx-auto flex h-full max-w-3xl flex-col gap-4 overflow-y-auto px-2 pb-2"
+  >
     <!-- Loading State -->
     <div v-if="isLoading" class="flex h-64 items-center justify-center">
       <span class="loading loading-lg loading-spinner" />