From 481cde055e1f7033a3d1a8e55759daca99a02e99 Mon Sep 17 00:00:00 2001
From: TheIndra55 <wuppie55@gmail.com>
Date: Thu, 30 May 2024 23:12:58 +0200
Subject: [PATCH] Make login page responsive

---
 assets/css/_login.scss      | 12 ++++++++++--
 views/login/login.html.twig |  2 +-
 2 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/assets/css/_login.scss b/assets/css/_login.scss
index fdc6e14..5a7d13a 100644
--- a/assets/css/_login.scss
+++ b/assets/css/_login.scss
@@ -2,8 +2,16 @@
     height: 90vh;
 }
 
-.login .form-group {
-    width: 25vh;
+@media (min-width: 540px) {
+    .login .form-group {
+        width: 250px;
+    }
+}
+
+@media (max-width: 540px) {
+    .login .form-group {
+        width: 100%;
+    }
 }
 
 .login input[type=submit] {
diff --git a/views/login/login.html.twig b/views/login/login.html.twig
index 90720a6..20cf63d 100644
--- a/views/login/login.html.twig
+++ b/views/login/login.html.twig
@@ -7,7 +7,7 @@
         <div class="top-alert">{{ error }}</div>
     {% endif %}
 
-    <form action="" method="post" class="d-flex justify-content-center align-items-center flex-column login">
+    <form action="" method="post" class="d-flex justify-content-center align-items-center flex-column login m-2">
         <div class="mb-2 form-group">
             <label for="usernameInput" class="form-label">Username</label>
             <input type="text" id="usernameInput" name="username" class="form-control" required autofocus value="{{ username|default }}" placeholder="Enter a username">