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,