From c0c641998093f0690fd0b83206e73f2568993fd2 Mon Sep 17 00:00:00 2001
From: Louis Lam <louislam@users.noreply.github.com>
Date: Thu, 17 Mar 2022 17:07:23 +0800
Subject: [PATCH] [Status Page] align icon and title using flexbox

---
 src/pages/StatusPage.vue | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/pages/StatusPage.vue b/src/pages/StatusPage.vue
index 6450bec0..9ce22d53 100644
--- a/src/pages/StatusPage.vue
+++ b/src/pages/StatusPage.vue
@@ -62,7 +62,7 @@
         <!-- Main Status Page -->
         <div :class="{ edit: enableEditMode}" class="main">
             <!-- Logo & Title -->
-            <h1 class="mb-4">
+            <h1 class="mb-4 title-flex">
                 <!-- Logo -->
                 <span class="logo-wrapper" @click="showImageCropUploadMethod">
                     <img :src="logoURL" alt class="logo me-2" :class="logoClass" />
@@ -721,6 +721,12 @@ footer {
     min-width: 50px;
 }
 
+.title-flex {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}
+
 .logo-wrapper {
     display: inline-block;
     position: relative;