From 62acd2edb1507f6979d8e9df1c2f86d6ad1d3e8b Mon Sep 17 00:00:00 2001
From: Nelson Chan <chakflying@hotmail.com>
Date: Tue, 14 Jun 2022 22:43:44 +0800
Subject: [PATCH] Fix: misc. layout fix on mobile

---
 src/assets/app.scss            |  6 ++++++
 src/components/MonitorList.vue | 18 +++++++++++++++---
 src/pages/List.vue             | 10 +++++++++-
 src/router.js                  |  8 ++++----
 4 files changed, 34 insertions(+), 8 deletions(-)

diff --git a/src/assets/app.scss b/src/assets/app.scss
index 93ff3ff3a..5adc76fa1 100644
--- a/src/assets/app.scss
+++ b/src/assets/app.scss
@@ -363,6 +363,12 @@ textarea.form-control {
         overflow-y: auto;
         height: calc(100% - 65px);
     }
+    
+    @media (max-width: 770px) {
+        &.scrollbar {
+            height: calc(100% - 40px);
+        }
+    }
 
     .item {
         display: block;
diff --git a/src/components/MonitorList.vue b/src/components/MonitorList.vue
index 7aeadd1e1..c4e621f96 100644
--- a/src/components/MonitorList.vue
+++ b/src/components/MonitorList.vue
@@ -69,10 +69,22 @@ export default {
         };
     },
     computed: {
+        /**
+         * Improve the sticky appearance of the list by increasing its
+         * height as user scrolls down.
+         * Not used on mobile.
+         */
         boxStyle() {
-            return {
-                height: `calc(100vh - 160px + ${this.windowTop}px)`,
-            };
+            if (window.innerWidth > 550) {
+                return {
+                    height: `calc(100vh - 160px + ${this.windowTop}px)`,
+                };
+            } else {
+                return {
+                    height: "calc(100vh - 160px)",
+                };
+            }
+
         },
 
         sortedMonitorList() {
diff --git a/src/pages/List.vue b/src/pages/List.vue
index 9cbf3f2ff..dd2d46059 100644
--- a/src/pages/List.vue
+++ b/src/pages/List.vue
@@ -1,6 +1,6 @@
 <template>
     <transition name="slide-fade" appear>
-        <MonitorList />
+        <MonitorList :scrollbar="true" />
     </transition>
 </template>
 
@@ -14,3 +14,11 @@ export default {
 };
 </script>
 
+<style lang="scss" scoped>
+@import "../assets/vars";
+
+.shadow-box {
+    padding: 20px;
+}
+
+</style>
diff --git a/src/router.js b/src/router.js
index 179dbe185..726194776 100644
--- a/src/router.js
+++ b/src/router.js
@@ -65,12 +65,12 @@ const routes = [
                                 path: "/add",
                                 component: EditMonitor,
                             },
-                            {
-                                path: "/list",
-                                component: List,
-                            },
                         ],
                     },
+                    {
+                        path: "/list",
+                        component: List,
+                    },
                     {
                         path: "/settings",
                         component: Settings,