refactor: Enhance layout and responsiveness of Login components

- Update LoginDialog.vue to improve maximum width settings for better adaptability across different screen sizes.
- Adjust Login.vue to refine container padding and centering, ensuring a more consistent layout on various devices.

src/components/auth/LoginDialog.vue

@@ -125,7 +125,7 @@ function handleKeydown(event: KeyboardEvent) {
 
 <template>
   <Dialog :open="isOpen" @update:open="handleClose">
-    <DialogContent class="sm:max-w-[425px]">
+    <DialogContent class="sm:max-w-[425px] md:max-w-[500px] lg:max-w-[600px] xl:max-w-[700px]">
       <DialogHeader>
         <DialogTitle class="flex items-center gap-2">
           <User class="w-5 h-5" />

src/pages/Login.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class="container py-8 space-y-6">
-    <div class="flex flex-col items-center justify-center min-h-[60vh] space-y-8">
+  <div class="w-full px-4 sm:px-6 lg:px-8 xl:px-12 2xl:px-16 py-8 space-y-6">
+    <div class="flex flex-col items-center justify-center min-h-[60vh] space-y-8 max-w-4xl mx-auto">
       <!-- Welcome Section -->
       <div class="text-center space-y-4">
         <div class="flex justify-center">