initial v0.8 pre-release

ui/src/scss/_layout.scss

@@ -10,7 +10,7 @@
     align-items: center;
     justify-content: center;
     row-gap: var(--smSpacing);
-    font-size: 16px;
+    font-size: var(--xlFontSize);
     color: var(--txtPrimaryColor);
     i {
         font-size: 24px;
@@ -80,7 +80,6 @@
     display: flex;
     width: 100%;
     height: 100vh;
-    overflow-x: overlay;
     .app-body {
         flex-grow: 1;
         min-width: 0;
@@ -97,6 +96,8 @@
 // -------------------------------------------------------------------
 
 .page-sidebar {
+    --sidebarListItemMargin: 10px;
+
     z-index: 0;
     display: flex;
     flex-direction: column;
@@ -174,11 +175,12 @@
         text-decoration: none;
         position: relative;
         display: flex;
+        width: 100%;
         align-items: center;
         column-gap: 10px;
-        margin: 10px 0;
+        margin: var(--sidebarListItemMargin) 0;
         padding: 3px 10px;
-        font-size: 16px;
+        font-size: var(--xlFontSize);
         min-height: var(--btnHeight);
         min-width: 0;
         color: var(--txtHintColor);
@@ -208,8 +210,14 @@
             transition-duration: var(--activeAnimationSpeed);
         }
     }
+    .sidebar-content-compact .sidebar-list-item {
+        --sidebarListItemMargin: 5px;
+    }
 
     // responsive
+    @media screen and (max-height: 600px) {
+        --sidebarListItemMargin: 5px;
+    }
     @media screen and (max-width: 1100px) {
         --pageSidebarWidth: 190px;
         & > * {
@@ -332,8 +340,11 @@
     flex-grow: 1;
     width: 100%;
     overflow-x: hidden;
-    overflow-y: auto; /* fallback */
+    overflow-y: auto; // fallback
     overflow-y: overlay;
+    .overlay-active & {
+        overflow-y: hidden; // prevent double scrollbar
+    }
     &.full-page {
         background: var(--baseColor);
     }