From 0d846be10e4334bc5ac565c9dd9a95eec545fa3c Mon Sep 17 00:00:00 2001
From: Nelson Chan <3271800+chakflying@users.noreply.github.com>
Date: Sun, 17 Sep 2023 20:43:09 +0800
Subject: [PATCH] Fix: misc. styling fixes (#3757)

---
 src/pages/SetupDatabase.vue | 20 +++++++++++---------
 1 file changed, 11 insertions(+), 9 deletions(-)

diff --git a/src/pages/SetupDatabase.vue b/src/pages/SetupDatabase.vue
index 1aacf6636..6ea8c843c 100644
--- a/src/pages/SetupDatabase.vue
+++ b/src/pages/SetupDatabase.vue
@@ -9,10 +9,12 @@
             </div>
 
             <div v-if="info.runningSetup" class="mt-5">
-                <div class="alert alert-success" role="alert">
+                <div class="alert alert-success mx-3 px-4" role="alert">
                     <div class="d-flex align-items-center">
                         <strong>Setting up the database. It may take a while, please be patient.</strong>
-                        <div class="spinner-border ml-auto" role="status" aria-hidden="true"></div>
+                        <div class="ms-3 pt-1">
+                            <div class="spinner-border" role="status" aria-hidden="true"></div>
+                        </div>
                     </div>
                 </div>
             </div>
@@ -51,17 +53,17 @@
                     </label>
                 </div>
 
-                <p v-if="dbConfig.type === 'embedded-mariadb'" class="mt-3">
+                <div v-if="dbConfig.type === 'embedded-mariadb'" class="mt-3 short">
                     {{ $t("setupDatabaseEmbeddedMariaDB") }}
-                </p>
+                </div>
 
-                <p v-if="dbConfig.type === 'mariadb'" class="mt-3">
+                <div v-if="dbConfig.type === 'mariadb'" class="mt-3 short">
                     {{ $t("setupDatabaseMariaDB") }}
-                </p>
+                </div>
 
-                <p v-if="dbConfig.type === 'sqlite'" class="mt-3">
+                <div v-if="dbConfig.type === 'sqlite'" class="mt-3 short">
                     {{ $t("setupDatabaseSQLite") }}
-                </p>
+                </div>
 
                 <template v-if="dbConfig.type === 'mariadb'">
                     <div class="form-floating mt-3 short">
@@ -80,7 +82,7 @@
                     </div>
 
                     <div class="form-floating mt-3 short">
-                        <input id="floatingInput" v-model="dbConfig.password" type="passwrod" class="form-control" required>
+                        <input id="floatingInput" v-model="dbConfig.password" type="password" class="form-control" required>
                         <label for="floatingInput">{{ $t("Password") }}</label>
                     </div>