refactor & fix firefox

src/composables/useInterfaceSizes.js

@@ -0,0 +1,43 @@
+import { computed, ref, toValue, watch } from 'vue'
+import { storeToRefs } from 'pinia'
+
+import { useMergedConfigStore } from 'src/stores/merged_config.js'
+
+export function useInterfaceSizes() {
+  const { mergedConfig } = storeToRefs(useMergedConfigStore())
+
+  // Getting the actual font size in pixels since UI might have
+  // a different scale
+  const fontSizeSetting = computed(() => mergedConfig.value.textSize)
+  const fontSize = ref(0)
+  const updateFontSize = () => {
+    const string = window
+      .getComputedStyle(document.body)
+      .getPropertyValue('font-size')
+    fontSize.value = Number.parseInt(string.slice(0, -2), 10) // remove the 'px'
+  }
+  // Update font size if user changed UI scale
+  watch(fontSizeSetting, updateFontSize, { immediate: true })
+
+  const navbarSize = computed(() => {
+    const string = fontSize.value * window
+      .getComputedStyle(document.body)
+      .getPropertyValue('--navbarSize')
+
+    return fontSize.value * Number.parseInt(string.slice(0, -3), 10) // remove the 'rem'
+  })
+
+  const panelHeaderSize = computed(() => {
+    const string = fontSize.value * window
+      .getComputedStyle(document.body)
+      .getPropertyValue('--panelHeaderSize')
+
+    return fontSize.value * Number.parseInt(string.slice(0, -3), 10) // remove the 'rem'
+  })
+
+  return {
+    fontSize,
+    navbarSize,
+    panelHeaderSize,
+  }
+}

src/composables/useScrollPosition.js

@@ -1,5 +1,7 @@
 import { onMounted, onUnmounted, ref } from 'vue'
 
+import { useWindowSize } from 'src/composables/useWindowSize.js'
+
 export function useScrollPosition() {
   const x = ref(0)
   const y = ref(0)
@@ -25,8 +27,24 @@ export function useScrollPosition() {
   }
 
   const scrollIntoView = async (element, options) => {
+    if (element == null) throw new TypeError(`Element is ${element}!`)
     inProgress.value = true
-    await element.scrollIntoViewIfNeeded(options)
+    let call = element.scrollIntoViewIfNeeded
+    if (!call) {
+      call = (options) => {
+        const { height: windowHeight } = useWindowSize()
+        const { top, height } = element.getBoundingClientRect()
+        const bottom = top + height
+
+        const biggerThanScreen = height > windowHeight
+        const aboveTop = top < 0
+        const belowBottom = bottom > windowHeight.value
+        if (aboveTop || belowBottom || biggerThanScreen) {
+          element.scrollIntoView(options)
+        }
+      }
+    }
+    await call(options)
     inProgress.value = false
   }