Thin scrollbar for FF, UX update (what's new, report problem, donate menu entries are at the bottom)

src/popup/App.vue

@@ -1,12 +1,12 @@
 <template>
-  <div class="popup">
+  <div class="popup flex flex-column">
-    <div class="header">
+    <div class="header flex-row flex-nogrow flex-noshrink">
       <span class="smallcaps">Ultrawidify</span>: <small>Quick settings</small>
     </div>
 
-    <div class="flex flex-row">
+    <div class="flex flex-row body no-overflow-y flex-grow">
       <!-- TABS/SIDEBAR -->
-      <div id="tablist" class="flex flex-column flex-nogrow flex-noshrink">
+      <div id="tablist" class="flex flex-column flex-nogrow flex-noshrink h100">
         <div class="menu-item"
             :class="{'selected-tab': selectedTab === 'global'}"
             @click="selectTab('global')"
@@ -28,7 +28,7 @@
                class=""
           >
             <small>Select site to control:</small>
-            <div class="">
+            <div class="site-list overflow-y-auto scrollbar-darker">
               <div v-for="site of activeSites"
                   :key="site.host"
                   class="tabitem"
@@ -54,7 +54,7 @@
                class=""
           >
             <small>Select embedded frame to control:</small>
-            <div class="">
+            <div class="site-list overflow-y-auto scrollbar-darker">
               <div v-for="frame of activeFrames"
                    class="tabitem"
                    :class="{
@@ -81,7 +81,7 @@
                class=""
           >
             <small>Select site to control:</small>
-            <div class="">
+            <div class="site-list overflow-y-auto scrollbar-darker">
               <div v-for="site of activeSites"
                   :key="site.host"
                   class="tabitem"
@@ -93,8 +93,10 @@
             </div>
           </div>
         </div>
-
+        <div class="flex flex-grow">
-        <div class="menu-item"
+          <!-- this is spacer -->
+        </div>
+        <div class="menu-item menu-item-darker"
             :class="{'selected-tab': selectedTab === 'whats-new'}"
             @click="selectTab('whats-new')"
         >
@@ -105,7 +107,7 @@
           </div>
         </div>
 
-        <div class="menu-item"
+        <div class="menu-item menu-item-darker"
             :class="{'selected-tab': selectedTab === 'about'}"
             @click="selectTab('about')"
         >
@@ -115,7 +117,7 @@
           <div class="">
           </div>
         </div>
-        <div class="menu-item"
+        <div class="menu-item menu-item-darker"
             :class="{'selected-tab': selectedTab === 'donate'}"
             @click="selectTab('donate')"
         >
@@ -128,7 +130,7 @@
       </div>
 
       <!-- PANELS/CONTENT -->
-      <div id="tab-content" class="flex-grow" style="max-width: 480px !important;">
+      <div id="tab-content" class="flex-grow h100 overflow-y-auto">
         <VideoPanel v-if="settings && settings.active && selectedTab === 'video'"
                     class=""
                     :settings="settings"
@@ -465,6 +467,7 @@ html, body {
   font-size: 2.7em;
 }
 
+
 .menu-item-inline-desc{
   font-size: 0.60em;
   font-weight: 300;
@@ -472,11 +475,18 @@ html, body {
 }
 
 .menu-item {
+  flex-grow: 0;
   padding-left: 15px;
   padding-top: 5px;
   padding-bottom: 5px;
   font-variant: small-caps;
   border-left: transparent 5px solid;
+  cursor: pointer;
+  user-select: none;
+}
+
+.menu-item-darker {
+  color: #999;
 }
 
 .suboption {
@@ -513,6 +523,10 @@ html, body {
   margin-left: -10px;
 }
 
+.site-list {
+  max-height: 200px;
+}
+
 .tabitem-selected {
   color: #fff !important;
   background-color: initial;
@@ -532,7 +546,7 @@ html, body {
 }
 
 .popup {
-  max-width: 780px;
+  // max-width: 780px;
   // width: 800px;
   height: 600px;
 }

src/popup/panels/DefaultSettingsPanel.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="w100 flex flex-column" style="padding-bottom: 20px">
+  <div class="flex flex-column" style="padding-bottom: 20px">
     <!-- <ShortcutButton class="button" 
                     @click.native="wipeSettings()"
                     label="Wipe settings"

src/popup/panels/SiteDetailsPanel.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="w100 flex flex-column" style="padding-bottom: 20px">
+  <div class="flex flex-column" style="padding-bottom: 20px">
     <div class="label">
       Video detection settings<br/><small>for {{site}}</small>
     </div>

src/popup/panels/VideoPanel.vue

@@ -1,8 +1,6 @@
 <template>
-  <div class="w100" style="padding-bottom: 20px">
+  <div class="" style="padding-bottom: 20px">
-    <div v-if="aspectRatioActions.length"
+    <div v-if="aspectRatioActions.length">
-         class="w100"
-    >
       <div class="label">Cropping mode:</div>
       <div class="flex flex-row flex-wrap">
         <ShortcutButton v-for="(action, index) of aspectRatioActions"
@@ -17,16 +15,16 @@
     </div>
 
     <div v-if="true"
-         class="w100">
+         class="">
       <div class="label experimental">Zooming and panning</div>
-      <div class="row w100"
+      <div class="row"
       >
         <!--
           min, max and value need to be implemented in js as this slider 
           should use logarithmic scale
         -->
         <input id="_input_zoom_slider" 
-                class="w100"
+                class="input-slider"
                 type="range"
                 step="any"
                 min="-1"
@@ -43,7 +41,7 @@
           </div> 
         </div>
 
-        <div class="m-t-0-33em w100 display-block">
+        <div class="m-t-0-33em display-block">
           <input id="_input_zoom_site_allow_pan"
                   type="checkbox" 
                   />
@@ -174,4 +172,7 @@ export default {
   padding-left: 0.33rem;
   padding-right: 0.33rem;
 }
+.input-slider {
+  width: 480px;
+}
 </style>

src/res/css/common.scss

@@ -40,6 +40,21 @@ body {
   padding-right: 1em;
 }
 
+/* overflow stuff */
+.overflow-y-auto {
+  overflow: auto;
+  scrollbar-width: thin;
+  scrollbar-color: rgba($primary-color, 0.7) $background-primary;
+}
+.scrollbar-darker {
+  scrollbar-color: rgba($primary-color, 0.5) $background-primary;
+}
+
+
+.no-overflow-y {
+  overflow: hidden;
+}
+
 /* .SELECTED CLASSES */
 
 .selected-tab {