[WebHost] Improve mobile styles for WebHost (#1571)

* Improve mobile styles for WebHost

- Mobile view works properly on mobile Chrome and Firefox
- Added thin-window view for desktop browsers that have been reduced in size
- Tested in Chrome and Firefox on mobile and desktop

* Improve style for small-width desktop popover

WebHostLib/static/styles/landing.css

@@ -223,7 +223,7 @@ html{
 }
 
 #landing{
-    width: 700px;
+    max-width: 700px;
     min-height: 280px;
     margin-left: auto;
     margin-right: auto;

WebHostLib/static/styles/themes/base.css

@@ -87,7 +87,44 @@ html{
     height: 3rem;
 }
 
-@media all and (max-width: 1580px){
+@media all and (max-width: 960px), only screen and (max-device-width: 768px) {
+    #base-header-right{
+        display: none;
+    }
+
+    #base-header-right-mobile{
+        display: unset;
+    }
+}
+
+@media all and (max-width: 960px){
+    #base-header-right-mobile{
+        margin-top: 0.5rem;
+        margin-right: 0;
+    }
+
+    #base-header-right-mobile img{
+        height: 1.5rem;
+    }
+
+    #base-header-mobile-menu{
+        top: 3.3rem;
+        width: unset;
+        border-left: 2px solid #d0ebe6;
+        border-bottom: 2px solid #d0ebe6;
+        filter: drop-shadow(-6px 6px 2px #2e3e83);
+        border-top-left-radius: 10px;
+    }
+
+    #base-header-mobile-menu a{
+        font-size: 2rem;
+        line-height: 3rem;
+        margin: 0;
+        padding: 0 1rem;
+    }
+}
+
+@media only screen and (max-device-width: 768px){
     html{
         padding-top: 260px;
         scroll-padding-top: 230px;
@@ -103,12 +140,4 @@ html{
         margin-top: 30px;
         margin-left: 20px;
     }
-
-    #base-header-right{
-        display: none;
-    }
-
-    #base-header-right-mobile{
-        display: unset;
-    }
-}
+}