improve monitor list

src/assets/app.scss

@@ -131,7 +131,7 @@ h2 {
     background-color: #090c10;
     color: $dark-font-color;
 
-    &::-webkit-scrollbar-thumb {
+    &::-webkit-scrollbar-thumb, ::-webkit-scrollbar-thumb {
         background: $dark-border-color;
     }
 

src/components/MonitorList.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="shadow-box list mb-4">
+    <div class="shadow-box list mb-3" :class="{ scrollbar: scrollbar }">
         <div v-if="Object.keys($root.monitorList).length === 0" class="text-center mt-3">
             {{ $t("No Monitors, please") }} <router-link to="/add">{{ $t("add one") }}</router-link>
         </div>
@@ -34,6 +34,11 @@ export default {
         Uptime,
         HeartbeatBar,
     },
+    props: {
+        scrollbar: {
+            type: Boolean,
+        },
+    },
     computed: {
         sortedMonitorList() {
             let result = Object.values(this.$root.monitorList);
@@ -83,8 +88,12 @@ export default {
 }
 
 .list {
-    height: auto;
+    &.scrollbar {
-    min-height: calc(100vh - 240px);
+        height: calc(100vh - 20px);
+        overflow-y: scroll;
+        position: sticky;
+        top: 10px;
+    }
 
     .item {
         display: block;

src/layouts/Layout.vue

@@ -45,14 +45,6 @@
             <Login v-if="! $root.loggedIn && $root.allowLoginDialog" />
         </main>
 
-        <footer>
-            <div class="container-fluid">
-                Uptime Kuma -
-                {{ $t("Version") }}: {{ $root.info.version }} -
-                <a href="https://github.com/louislam/uptime-kuma/releases" target="_blank" rel="noopener">{{ $t("Check Update On GitHub") }}</a>
-            </div>
-        </footer>
-
         <!-- Mobile Only -->
         <div v-if="$root.isMobile" style="width: 100%; height: 60px;" />
         <nav v-if="$root.isMobile" class="bottom-nav">
@@ -190,15 +182,6 @@ main {
     color: white;
 }
 
-footer {
-    color: #aaa;
-    font-size: 13px;
-    margin-top: 10px;
-    padding-bottom: 30px;
-    margin-left: 10px;
-    text-align: center;
-}
-
 .dark {
     header {
         background-color: #161b22;

src/pages/Dashboard.vue

@@ -5,10 +5,10 @@
                 <div>
                     <router-link to="/add" class="btn btn-primary mb-3"><font-awesome-icon icon="plus" /> {{ $t("Add New Monitor") }}</router-link>
                 </div>
-                <MonitorList />
+                <MonitorList scrollbar="true" />
             </div>
 
-            <div class="col-12 col-md-7 col-xl-8">
+            <div class="col-12 col-md-7 col-xl-8 mb-3">
                 <router-view />
             </div>
         </div>
@@ -26,7 +26,6 @@ export default {
     data() {
         return {}
     },
-
 }
 </script>
 

src/pages/DashboardHome.vue

@@ -5,7 +5,7 @@
                 {{ $t("Quick Stats") }}
             </h1>
 
-            <div class="shadow-box big-padding text-center">
+            <div class="shadow-box big-padding text-center mb-4">
                 <div class="row">
                     <div class="col">
                         <h3>{{ $t("Up") }}</h3>
@@ -170,7 +170,6 @@ export default {
 
 .shadow-box {
     padding: 20px;
-    margin-top: 25px;
 }
 
 table {

src/pages/Details.vue

@@ -1,6 +1,6 @@
 <template>
     <transition name="slide-fade" appear>
-        <div v-if="monitor" class="monitor">
+        <div v-if="monitor">
             <h1> {{ monitor.name }}</h1>
             <p class="url">
                 <a v-if="monitor.type === 'http' || monitor.type === 'keyword' " :href="monitor.url" target="_blank">{{ monitor.url }}</a>
@@ -422,9 +422,5 @@ table {
         color: $dark-font-color;
     }
 }
-.monitor {
+
-    position: sticky;
-    top: 7px;
-    margin: 0 0 24px;
-}
 </style>

src/pages/Settings.vue

@@ -155,6 +155,14 @@
                 </div>
             </div>
 
+            <footer>
+                <div class="container-fluid">
+                    Uptime Kuma -
+                    {{ $t("Version") }}: {{ $root.info.version }} -
+                    <a href="https://github.com/louislam/uptime-kuma/releases" target="_blank" rel="noopener">{{ $t("Check Update On GitHub") }}</a>
+                </div>
+            </footer>
+
             <NotificationDialog ref="notificationDialog" />
 
             <Confirm ref="confirmDisableAuth" btn-style="btn-danger" :yes-text="$t('I understand, please disable')" :no-text="$t('Leave')" @yes="disableAuth">
@@ -314,4 +322,12 @@ export default {
         color: #000;
     }
 }
+
+footer {
+    color: #aaa;
+    font-size: 13px;
+    margin-top: 20px;
+    padding-bottom: 30px;
+    text-align: center;
+}
 </style>