fix: let body overflow to hide toolbar in Firefox Android (#1730)

* fix: let body overflow to hide toolbar in Firefox Android

fix #1729

* fix: scroll body for script list on small screens

package.json

@@ -70,7 +70,7 @@
     "codemirror": "^5.65.10",
     "tldjs": "^2.3.1",
     "vue": "^3.2.45",
-    "vueleton": "^2.0.0-5"
+    "vueleton": "^2.0.1"
   },
   "engines": {
     "node": ">=16"

src/common/ui/style/style.css

@@ -55,7 +55,7 @@
 }
 
 body {
-  overflow: hidden; // avoid flash of viewport caused by tooltip
+  // overflow: hidden; // avoid flash of viewport caused by tooltip
   font-size: 1rem;
   background: var(--bg);
   color: var(--fg);

src/options/style.css

@@ -5,7 +5,10 @@ $tabPadTopY: 1.5rem;
 $sectionBorder: 1px solid var(--fill-2);
 
 aside {
-  position: relative;
+  position: fixed;
+  top: 0;
+  left: 0;
+  bottom: 0;
   z-index: 1000;
 }
 .aside-content {
@@ -116,8 +119,9 @@ textarea:not([rows="1"]):not(.h100) {
 }
 .tab {
   position: relative;
+  margin-left: 14rem;
   padding: $tabPadTopY $tabPadX 0;
-  overflow-y: auto;
+  // overflow-y: auto;
   background: var(--bg);
 }
 
@@ -155,6 +159,11 @@ textarea:not([rows="1"]):not(.h100) {
   }
   .tab {
     width: auto !important;
+    margin: 0;
+  }
+  aside {
+    position: sticky;
+    bottom: auto;
   }
   .aside-content {
     flex-direction: row;
@@ -163,6 +172,7 @@ textarea:not([rows="1"]):not(.h100) {
     height: $compactHeaderHeight;
     padding: 0;
     border-width: 0 0 1px 0;
+    overflow: auto hidden;
     img {
       width: calc($compactHeaderHeight - 8px);
       height: calc($compactHeaderHeight - 8px);
@@ -185,4 +195,12 @@ textarea:not([rows="1"]):not(.h100) {
       white-space: normal;
     }
   }
+
+  .edit-open {
+    // hide other components when edit is open to avoid scroll glitches in Firefox Android
+    .page-options {
+      height: 0;
+      overflow: hidden;
+    }
+  }
 }

src/options/views/app.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="page-options flex h-screen">
+  <div class="page-options">
     <aside v-if="canRenderAside">
       <div class="aside-content">
         <img src="/public/images/icon128.png">
@@ -16,7 +16,7 @@
       </div>
     </aside>
     <keep-alive>
-      <component :is="current.comp" class="tab flex-auto"/>
+      <component :is="current.comp" class="tab"/>
     </keep-alive>
   </div>
 </template>

src/options/views/edit/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="edit frame flex flex-col fixed-full">
+  <div class="edit frame flex flex-col abs-full">
     <div class="edit-header flex mr-1c">
       <nav>
         <div
@@ -26,43 +26,43 @@
         <button v-text="i18n('buttonClose')" @click="close"/>
       </div>
     </div>
-    <div class="frame-block flex-auto pos-rel">
-      <vm-code
-        class="abs-full"
-        :value="code"
-        :readOnly="readOnly"
-        ref="code"
-        v-show="nav === 'code'"
-        :active="nav === 'code'"
-        :commands="commands"
-        @code-dirty="codeDirty = $event"
-      />
-      <vm-settings
-        class="abs-full edit-body"
-        v-show="nav === 'settings'"
-        :readOnly="readOnly"
-        :active="nav === 'settings'"
-        :settings="settings"
-        :value="script"
-      />
-      <vm-values
-        class="abs-full edit-body"
-        v-show="nav === 'values'"
-        :readOnly="readOnly"
-        :active="nav === 'values'"
-        :script="script"
-      />
-      <vm-externals
-        class="abs-full"
-        v-if="nav === 'externals'"
-        :value="script"
-      />
-      <vm-help
-        class="abs-full edit-body"
-        v-show="nav === 'help'"
-        :hotkeys="hotkeys"
-      />
-    </div>
+
+    <vm-code
+      class="flex-auto"
+      :value="code"
+      :readOnly="readOnly"
+      ref="code"
+      v-show="nav === 'code'"
+      :active="nav === 'code'"
+      :commands="commands"
+      @code-dirty="codeDirty = $event"
+    />
+    <vm-settings
+      class="edit-body"
+      v-show="nav === 'settings'"
+      :readOnly="readOnly"
+      :active="nav === 'settings'"
+      :settings="settings"
+      :value="script"
+    />
+    <vm-values
+      class="edit-body"
+      v-show="nav === 'values'"
+      :readOnly="readOnly"
+      :active="nav === 'values'"
+      :script="script"
+    />
+    <vm-externals
+      class="flex-auto"
+      v-if="nav === 'externals'"
+      :value="script"
+    />
+    <vm-help
+      class="edit-body"
+      v-show="nav === 'help'"
+      :hotkeys="hotkeys"
+    />
+
     <div v-if="errors" class="errors my-1c">
       <p v-for="e in errors" :key="e" v-text="e" class="text-red"/>
       <p class="my-1">
@@ -239,6 +239,7 @@ export default {
     }
   },
   async mounted() {
+    document.body.classList.add('edit-open');
     store.storageSize = 0;
     this.nav = 'code';
     const { custom, config } = this.script;
@@ -359,6 +360,7 @@ export default {
     },
   },
   beforeUnmount() {
+    document.body.classList.remove('edit-open');
     store.title = null;
     this.toggleUnloadSentry(false);
     this.disposeList?.forEach(dispose => {
@@ -372,16 +374,20 @@ export default {
 .edit {
   z-index: 2000;
   &-header {
+    position: sticky;
+    top: 0;
+    z-index: 1;
     align-items: center;
     justify-content: space-between;
     border-bottom: 1px solid var(--fill-3);
+    background: inherit;
   }
   &-name {
     font-weight: bold;
   }
   &-body {
     padding: .5rem 1rem;
-    overflow: auto;
+    // overflow: auto;
     background: var(--bg);
   }
   &-nav-item {
@@ -438,6 +444,12 @@ export default {
   .edit-hint {
     display: none;
   }
+  .edit {
+    // fixed/absolute doesn't work well with scroll in Firefox Android
+    position: static;
+    // larger than 100vh to force overflow so that the toolbar can be hidden in Firefox Android
+    min-height: calc(100vh + 1px);
+  }
 }
 
 @media (max-width: 500px) {

src/options/views/tab-installed.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class="tab-installed flex flex-col">
-    <div class="flex flex-col flex-auto" v-if="state.canRenderScripts">
+  <div class="tab-installed">
+    <div v-if="state.canRenderScripts">
       <header class="flex">
         <div class="flex-auto" v-if="!showRecycle">
           <Dropdown
@@ -101,7 +101,7 @@
            @click="handleEmptyRecycleBin"/>
       </div>
       <div v-else-if="message" class="hint mx-1 my-1 flex flex-col" v-text="message"></div>
-      <div class="scripts flex-auto"
+      <div class="scripts"
         v-focus="!state.script"
         ref="refList"
         :style="`--num-columns:${state.numColumns}`"
@@ -127,13 +127,14 @@
         />
       </div>
     </div>
-    <edit
-      v-if="state.script"
-      :initial="state.script"
-      :initial-code="state.code"
-      :read-only="state.script.config.removed"
-      @close="handleEditScript()"
-    />
+    <teleport to="body" v-if="state.script">
+      <edit
+        :initial="state.script"
+        :initial-code="state.code"
+        :read-only="state.script.config.removed"
+        @close="handleEditScript()"
+      />
+    </teleport>
   </div>
 </template>
 
@@ -703,8 +704,14 @@ export default {
   --columns-table: 1600, 2500, 3400; // 1680x1050, 2560x1440, 3440x1440
 }
 .tab.tab-installed {
+  max-height: 100vh;
   padding: 0;
+  overflow: auto;
   header {
+    position: sticky;
+    top: 0;
+    z-index: 1000;
+    background: var(--fill-0-5);
     height: 4rem;
     align-items: center;
     padding: 0 1rem;
@@ -725,6 +732,10 @@ export default {
       right: auto;
     }
   }
+  @media (max-width: 767px) {
+    max-height: none;
+    overflow: visible;
+  }
 }
 .backdrop {
   text-align: center;

yarn.lock

@@ -10489,10 +10489,10 @@ vue@^3.2.45:
     "@vue/server-renderer" "3.2.45"
     "@vue/shared" "3.2.45"
 
-vueleton@^2.0.0-5:
-  version "2.0.0-5"
-  resolved "https://registry.yarnpkg.com/vueleton/-/vueleton-2.0.0-5.tgz#3f22e5dc4341234db6b2d60bfed4aa499a961d2d"
-  integrity sha512-HA09S7iq+OIwRNrnoB0F4Y9lqWhCEjhjKzoeWl7KmzLs6tZxLiNWf4QchQBRWutuw0aEEQCzp6vvzoDPyoLLAQ==
+vueleton@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/vueleton/-/vueleton-2.0.1.tgz#e0d3cc527f4ede6713731b3db446fdae730e650f"
+  integrity sha512-0pOR4UPj+LJlLdoQxgVKWlYAin4ftU9dJKCBdtZhXH100MJ8WkLyo2DRfMOL1x7ZJ2RIUfHvipleLQ8zdEAzUA==
   dependencies:
     "@babel/runtime" "^7.19.0"
     globby "^13.1.2"