Improve status page sidebar

src/languages/zh-HK.js

@@ -339,7 +339,7 @@ export default {
     "Switch to Dark Theme": "切換至深色佈景主題",
     "Show Tags": "顯示標籤",
     "Hide Tags": "隱藏標籤",
-    Description: "說明",
+    Description: "描述",
     "No monitors available.": "沒有可用的監測器。",
     "Add one": "新增一個",
     "No Monitors": "無監測器",
@@ -347,7 +347,6 @@ export default {
     Services: "服務",
     Discard: "捨棄",
     Cancel: "取消",
-    "Powered by": "技術支援",
     shrinkDatabaseDescription: "觸發 SQLite 的資料庫清理 (VACUUM)。如果您的資料庫是在 1.10.0 版本後建立，AUTO_VACUUM 已自動啟用，則無需此操作。",
     serwersms: "SerwerSMS.pl",
     serwersmsAPIUser: "API 使用者名稱 (包括 webapi_ 前綴)",

src/pages/StatusPage.vue

@@ -2,6 +2,7 @@
     <div v-if="loadedTheme" class="container mt-3">
         <!-- Sidebar for edit mode -->
         <div v-if="enableEditMode" class="sidebar">
+            <div class="sidebar-body">
                 <div class="my-3">
                     <label for="slug" class="form-label">{{ $t("Slug") }}</label>
                     <div class="input-group">
@@ -46,6 +47,7 @@
                         {{ $t("Delete") }}
                     </button>
                 </div>
+            </div>
 
             <!-- Sidebar Footer -->
             <div class="sidebar-footer">
@@ -120,7 +122,7 @@
 
                 <!-- Incident Date -->
                 <div class="date mt-3">
-                    {{ $t("Created") }}: {{ $root.datetime(incident.createdDate) }} ({{ dateFromNow(incident.createdDate) }})<br />
+                    {{ $t("Date Created") }}: {{ $root.datetime(incident.createdDate) }} ({{ dateFromNow(incident.createdDate) }})<br />
                     <span v-if="incident.lastUpdatedDate">
                         {{ $t("Last Updated") }}: {{ $root.datetime(incident.lastUpdatedDate) }} ({{ dateFromNow(incident.lastUpdatedDate) }})
                     </span>
@@ -714,9 +716,7 @@ h1 {
     top: 0;
     width: 300px;
     height: 100vh;
-    padding: 15px 15px 68px 15px;
+
-    overflow-x: hidden;
-    overflow-y: auto;
     border-right: 1px solid #ededed;
 
     .danger-zone {
@@ -724,13 +724,22 @@ h1 {
         padding-top: 15px;
     }
 
+    .sidebar-body {
+        padding: 15px 15px 68px 15px;
+        overflow-x: hidden;
+        overflow-y: auto;
+        height: calc(100% - 70px);
+    }
+
     .sidebar-footer {
-        width: 100%;
-        bottom: 0;
-        left: 0;
-        padding: 15px;
-        position: absolute;
         border-top: 1px solid #ededed;
+        padding: 15px;
+        width: 300px;
+        height: 70px;
+        position: fixed;
+        left: 0;
+        bottom: 0;
+        background-color: white;
     }
 }
 
@@ -818,6 +827,7 @@ footer {
 
         .sidebar-footer {
             border-top-color: $dark-border-color;
+            background-color: $dark-header-bg;
         }
     }
 }