From 4da04862956f79bd05e92ae42b9078bee2c7be71 Mon Sep 17 00:00:00 2001
From: Amir Raminfar <findamir@gmail.com>
Date: Fri, 25 Apr 2025 09:37:38 -0700
Subject: [PATCH] chore: little improvements to the login page (#3846)

---
 assets/layouts/splash.vue | 2 +-
 assets/main.css           | 6 ++++++
 assets/pages/login.vue    | 6 +++---
 3 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/assets/layouts/splash.vue b/assets/layouts/splash.vue
index 31ba6d29..7485f74c 100644
--- a/assets/layouts/splash.vue
+++ b/assets/layouts/splash.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="hero min-h-dvh">
+  <div class="hero max-h-500:pt-4 min-h-dvh content-start pt-[20dvh]">
     <div class="hero-content">
       <router-view></router-view>
     </div>
diff --git a/assets/main.css b/assets/main.css
index cd5b60d1..8ac4727f 100644
--- a/assets/main.css
+++ b/assets/main.css
@@ -15,6 +15,12 @@
   padding-top: env(safe-area-inset-top);
 }
 
+@custom-variant max-h-500 {
+  @media (max-height: 500px) {
+    @slot;
+  }
+}
+
 @plugin "daisyui/theme" {
   name: "dark";
   default: false;
diff --git a/assets/pages/login.vue b/assets/pages/login.vue
index acd93a92..5ee8226d 100644
--- a/assets/pages/login.vue
+++ b/assets/pages/login.vue
@@ -4,7 +4,7 @@
       <form action="" method="post" @submit.prevent="onLogin" ref="form" class="flex flex-col gap-8">
         <label class="form-control w-full">
           <label
-            class="input floating-label input-bordered has-[:focus]:input-primary flex w-full items-center gap-2 border-2"
+            class="input input-lg floating-label input-bordered has-[:focus]:input-primary flex w-full items-center gap-2 border-2"
             :class="{ 'input-error': error }"
           >
             <span class="ml-5">{{ $t("label.username") }}</span>
@@ -28,7 +28,7 @@
         </label>
         <label class="form-control w-full">
           <label
-            class="input floating-label input-bordered has-[:focus]:input-primary flex w-full items-center gap-2 border-2"
+            class="input input-lg floating-label input-bordered has-[:focus]:input-primary flex w-full items-center gap-2 border-2"
           >
             <span class="ml-5">{{ $t("label.password") }}</span>
             <mdi:key class="has-[+:focus]:text-primary" />
@@ -44,7 +44,7 @@
           </label>
         </label>
 
-        <button class="btn btn-primary uppercase" type="submit" :disabled="loading">
+        <button class="btn btn-primary mt-2 uppercase" type="submit" :disabled="loading">
           <span class="loading loading-spinner" v-if="loading"></span>
           {{ $t("button.login") }}
         </button>