From e1ff026d705e392de7505ac11bf9d70db40a8785 Mon Sep 17 00:00:00 2001
From: Perside Rosalie <perside.rosalie@wikimedia.de>
Date: Wed, 11 Dec 2024 08:06:57 +0100
Subject: [PATCH] Adjust the padding to 16px and make it more responsive

---
 src/components/Cards/Login.vue | 8 +++++---
 src/components/Pages/Login.vue | 6 +++---
 2 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/src/components/Cards/Login.vue b/src/components/Cards/Login.vue
index 279c7983..c433b6c6 100644
--- a/src/components/Cards/Login.vue
+++ b/src/components/Cards/Login.vue
@@ -102,12 +102,14 @@ export default {
 <style lang="css" scoped>
 .card-width {
   width: 477px;
+  padding: 16px;
+
 }
 
-@media (max-width: 480px) {
+@media (max-width: 620px) {
   .card-width {
-    width: calc(100% - 2px);
-    max-width: 320px; /* Limit to 320px for very small screens */
+    width: calc(100%);
+    margin-right: 110px;
   }
 }
 </style>
diff --git a/src/components/Pages/Login.vue b/src/components/Pages/Login.vue
index 2ab525fa..d35776c0 100644
--- a/src/components/Pages/Login.vue
+++ b/src/components/Pages/Login.vue
@@ -1,12 +1,12 @@
 <template>
-    <v-main>
+    <v-main class="pa-1">
       <v-container class="fill-height" fluid >
         <v-row align="center" justify="center">
             <LoginCard title="Log in" buttonText="Log in"/>
         </v-row>
-        <v-row class="pt-12" justify="center" >
+        <v-row justify="center" >
           <div>
-            Need an account?
+            <div class="pa-4">Need an account?</div>
             <v-btn
               class="ms-6"
               to="/create-account"