diff --git a/src/assets/app.scss b/src/assets/app.scss
index 5073302da..f5e07887f 100644
--- a/src/assets/app.scss
+++ b/src/assets/app.scss
@@ -382,6 +382,12 @@ optgroup {
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 @@
-
+
@@ -14,3 +14,11 @@ export default {
};
+
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,