address doublescroll #3028 (#3035)

* quick fix for mobile menu button overlap

* - use new dynamic vh css prop to handle ios safari double scrolling
- only force tabs height when online

* cleanup

* add comment

web/components/layouts/Main/Main.module.scss

@@ -4,7 +4,8 @@
   // this margin is for fixed header
   padding-top: var(--header-height);
   background-color: var(--theme-color-main-background);
-  min-height: 100vh;
+  min-height: 100dvh;
+
   position: relative;
 
   // add some spacing between the last row of content and the footer

web/components/ui/Content/Content.module.scss

@@ -20,6 +20,12 @@
 		&.online {
 			position: absolute;
 			top: calc(var(--player-container-height) + var(--status-bar-height) + var(--header-height));
+
+			// As we want content in the tabs to scroll within itself, force the tabs to display max height at all times.
+			// (We don't have to do this when not-online because we're having the entire layout scroll.
+			:global(.ant-tabs-content) {
+				 height: 100% !important;
+			}
 		}
   }
 
@@ -55,7 +61,7 @@
     position: absolute;
     top: 4px;
     right: 10px;
-    z-index: 200;
+    z-index: 199;
   }
 }
 

web/styles/ant-overrides.scss

@@ -162,7 +162,6 @@ DROPDOWN
     height: 100%;
   }
   .ant-tabs-content {
-    height: 100% !important;
     overflow: auto;
     .ant-tabs-tabpane-active {
       height: 100%;