[#181] restore overall desktop UI

src/web/stylesheets/components/_banner.css

@@ -7,13 +7,14 @@
  */
 
 #banner {
+    display: flex;
+    justify-content: space-between;
     padding-left: 12px;
     padding-right: 4px;
     line-height: var(--banner-height);
     color: var(--banner-font-colour);
     background-color: var(--banner-bg-colour);
     border-bottom: 1px solid var(--primary-border-colour);
-    justify-content: space-between; /* flex is applied through .row on the banner element */
 }
 
 #banner i {
@@ -21,6 +22,17 @@
     padding-right: 10px;
 }
 
+
+/* Notice wrapper */
+#notice-wrapper {
+    text-align: center;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+
+/* Banner links ( options, about / support ) */
 .banner-link {
     color: var(--banner-url-colour);
 }
@@ -35,9 +47,5 @@
     }
 }
 
-#notice-wrapper {
-    text-align: center;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-}
+
+

src/web/stylesheets/components/_controls.css

@@ -11,6 +11,9 @@
     border-top: 1px solid var(--primary-border-colour);
     background-color: var(--secondary-background-colour);
     overflow: hidden;
+    position: absolute;
+    bottom: 0;
+    width: 100%;
 }
 
 #controls-content {

src/web/stylesheets/components/operations/_categories.css

@@ -36,8 +36,7 @@
 #categories {
     position: absolute;
     top: 40px; /* the height of the input[type="search"] with pos relative */
-    left: 0;
-    right: 0;
+    width: 100%;
     height: auto;
     max-height: 60vh;
     overflow: scroll;

src/web/stylesheets/components/operations/_search.css

@@ -9,8 +9,7 @@
 #search-results {
     position: absolute;
     top: 40px; /* the height of the input[type="search"] with pos relative */
-    left: 0;
-    right: 0;
+    width: 100%;
     height: auto;
     max-height: 60vh;
     overflow: scroll;