From 8850adad81a4bb90d4523ba23c61d6a753d1027b Mon Sep 17 00:00:00 2001
From: Yi-Jyun Pan <pan93412@gmail.com>
Date: Fri, 4 Oct 2024 21:14:33 +0800
Subject: [PATCH] fix(login): RWD issue

* Remove the quote text on mobile
* Remove the unnecessary padding in lists
* Correct some flex cases
---
 assets/styles/app.scss             | 1 +
 templates/security/login.html.twig | 6 +++---
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/assets/styles/app.scss b/assets/styles/app.scss
index 4a60c1f..4c3b44f 100644
--- a/assets/styles/app.scss
+++ b/assets/styles/app.scss
@@ -45,6 +45,7 @@ ul.credit {
 
   list-style: none;
   margin-bottom: 0;
+  padding-left: 0;
 }
 
 // overrides
diff --git a/templates/security/login.html.twig b/templates/security/login.html.twig
index 924116f..901f4cf 100644
--- a/templates/security/login.html.twig
+++ b/templates/security/login.html.twig
@@ -3,13 +3,13 @@
 {% block title %}登入{% endblock %}
 
 {% block body %}
-    <main class="w-40 container-sm v-center">
+    <main class="w-75 w-md-40 container-sm v-center">
         <div class="d-flex justify-content-between align-items-end">
             <h1 class="mb-4" aria-label="資料庫練功房 - 登入">
                 <img src="{{ asset('branding.svg') }}" alt="資料庫練功房" height="72px" />
             </h1>
 
-            <p class="opacity-75 small fst-italic">
+            <p class="opacity-75 small fst-italic d-none d-md-block">
                 雙雙瓦雀行書案，點點楊花入硯池<br>
                 閒坐小窗學SQL，不知春去幾多時
             </p>
@@ -51,7 +51,7 @@
                    value="{{ csrf_token('authenticate') }}"
             >
 
-            <div class="d-flex gap-3 justify-content-between align-items-end">
+            <div class="d-flex flex-column flex-md-row gap-3 justify-content-md-between align-items-md-end">
                 <button class="btn btn-primary" type="submit">
                     登入
                 </button>