From f7b12296c2d098235337a7d8a786cd14212485e3 Mon Sep 17 00:00:00 2001
From: Perside Rosalie <perside.rosalie@wikimedia.de>
Date: Mon, 2 Dec 2024 13:48:55 +0100
Subject: [PATCH 1/2] Make log in card responsiv for screens as small as 320px

---
 src/components/Cards/Login.vue | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/src/components/Cards/Login.vue b/src/components/Cards/Login.vue
index 1405b49b..279c7983 100644
--- a/src/components/Cards/Login.vue
+++ b/src/components/Cards/Login.vue
@@ -1,6 +1,6 @@
 <template>
   <v-form @submit="login">
-    <v-card class="elevation-12 mt-16" width="477px">
+    <v-card class="elevation-12 mt-16 card-width">
       <v-toolbar dark color="primary">
         <v-toolbar-title>{{title}}</v-toolbar-title>
       </v-toolbar>
@@ -100,4 +100,14 @@ export default {
 </script>
 
 <style lang="css" scoped>
+.card-width {
+  width: 477px;
+}
+
+@media (max-width: 480px) {
+  .card-width {
+    width: calc(100% - 2px);
+    max-width: 320px; /* Limit to 320px for very small screens */
+  }
+}
 </style>

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 2/2] 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"