fix: improve layout flexbox and hydration warnings

Resolves layout inconsistencies by converting main content areas to proper flexbox containers with column direction. This ensures child components expand correctly to fill available space.

Removes extraneous whitespace in login alert message for cleaner text rendering.

Suppresses hydration warning on hero illustration image to prevent console errors during client-side hydration when server and client rendered attributes differ.

Author: miantiao-me

app/components/home/Hero.vue

@@ -108,6 +108,7 @@ const { title, description, github, twitter } = useAppConfig()
             lg:w-[420px]
           "
           aria-label="Link sharing illustration"
+          suppressHydrationWarning
         />
       </div>
     </div>

app/components/login/index.vue

@@ -70,7 +70,7 @@ async function handleSubmit() {
           <AlertTitle>{{ $t('login.tips') }}</AlertTitle>
           <AlertDescription>
             {{ $t('login.preview_token') }}
-            <code class="font-mono text-green-500">SinkCool</code> .
+            <code class="font-mono text-green-500">SinkCool</code>
           </AlertDescription>
         </Alert>
 

app/layouts/default.vue

@@ -119,7 +119,7 @@ const { stats } = useGithubStats()
     </header>
 
     <!-- Main Content -->
-    <main class="flex-1 pt-20">
+    <main class="flex flex-1 flex-col pt-20">
       <slot />
     </main>
 

app/pages/dashboard/login.vue

@@ -5,7 +5,7 @@ definePageMeta({
 </script>
 
 <template>
-  <main class="flex h-full items-center justify-center">
+  <div class="flex flex-1 items-center justify-center">
     <Login />
-  </main>
+  </div>
 </template>