style: retain more parts of UI in compact mode

* always show menu at the top
* start hiding search/authors/dates at 500px (previously at 767px)

src/common/ui/style/style.css

@@ -450,7 +450,7 @@ body .vl-tooltip {
   }
 }
 
-@media (max-width: 767px) {
+@media (max-width: 500px) {
   .hidden-sm {
     display: none !important;
   }

src/options/style.css

@@ -1,3 +1,5 @@
+$compactHeaderHeight: 3rem;
+
 html,
 body {
   height: 100%;
@@ -11,7 +13,8 @@ aside {
   height: 100%;
   padding: 4rem 1rem 0;
   text-align: right;
-  border-right: 1px solid var(--fill-5);
+  border: solid var(--fill-5);
+  border-width: 0 1px 0 0;
   @media (prefers-color-scheme: dark) {
     border-color: var(--fill-3);
   }
@@ -40,43 +43,6 @@ aside {
     }
   }
 }
-.aside-toggle {
-  position: absolute;
-  width: 1rem;
-  height: 2rem;
-  top: 1rem;
-  left: 0;
-  line-height: 2rem;
-  background: var(--fill-0-5);
-  color: var(--fill-5);
-  border: 1px solid currentColor;
-  border-left: 0;
-  border-radius: 0 1rem 1rem 0;
-  &-wrapper {
-    position: absolute;
-    width: 2rem;
-    height: 4rem;
-    top: 50%;
-    left: 100%;
-    margin-top: -2rem;
-  }
-  > .icon {
-    display: block;
-    margin-top: .4rem;
-    margin-left: -.1rem;
-  }
-  .show-aside & > .icon {
-    transform: rotateY(180deg);
-  }
-}
-.aside-backdrop {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-}
-
 .text-red {
   color: red;
 }
@@ -149,14 +115,37 @@ input[type=checkbox] {
 }
 
 @media (max-width: 767px) {
+  .page-options {
+    flex-direction: column;
+  }
+  .tab {
+    width: auto !important;
+  }
   .aside-content {
-    position: absolute;
-    top: 0;
-    left: 0;
-    transform: translateX(-100%);
-    transition: transform .2s;
-    .show-aside > & {
-      transform: none;
+    display: flex;
+    width: auto;
+    height: $compactHeaderHeight;
+    padding: 0;
+    border-width: 0 0 1px 0;
+    img {
+      width: $compactHeaderHeight;
+      height: $compactHeaderHeight;
+      margin: 0 .5rem 0 1.25rem;
+    }
+    h1 {
+      align-self: center;
+      font-size: 1.25rem;
+      margin: 0;
+    }
+  }
+  .aside-menu {
+    display: flex;
+    border: none;
+    a {
+      padding: 0 0 0 1.5rem;
+      display: flex;
+      flex-direction: column; /* stretch to full height... */
+      justify-content: center; /* ...and center vertically */
     }
   }
 }

src/options/views/app.vue

@@ -1,10 +1,9 @@
 <template>
   <div class="page-options flex h-100">
     <aside :class="{ 'show-aside': aside }" v-if="canRenderAside">
-      <div v-if="aside" class="aside-backdrop visible-sm" @click="aside = false" />
       <div class="aside-content">
         <img src="/public/images/icon128.png">
-        <h1 v-text="i18n('extName')"></h1>
+        <h1 class="hidden-xs" v-text="i18n('extName')"></h1>
         <div class="aside-menu">
           <a
             href="#scripts"
@@ -22,11 +21,6 @@
             v-text="i18n('sideMenuAbout')"
           />
         </div>
-        <div class="aside-toggle-wrapper visible-sm" @click="aside = !aside">
-          <div class="aside-toggle">
-            <icon name="arrow" />
-          </div>
-        </div>
       </div>
     </aside>
     <keep-alive>

src/options/views/tab-installed.vue

@@ -66,7 +66,7 @@
           </div>
         </dropdown>
         <!-- form and id are required for the built-in autocomplete using entered values -->
-        <form class="filter-search hidden-sm flex" @submit.prevent>
+        <form class="filter-search hidden-xs flex" @submit.prevent>
           <tooltip placement="bottom">
             <label>
               <input
@@ -528,6 +528,7 @@ export default {
   }
   input {
     width: 14rem;
+    max-width: calc(100vw - 16rem);
     padding-left: .5rem;
     padding-right: 2rem;
     height: 100%;