fix import in FF; fix table styles in FF

src/assets/styles/tables.css

@@ -9,7 +9,7 @@
 .header-container {
   overflow: hidden;
   position: absolute;
-  top: -1px;;
+  top: -1px;
   left: -1px;
   width: calc(100% + 2px);
   padding-left: 7px;
@@ -18,10 +18,17 @@
   border-radius: 5px 5px 0 0;
 }
 
+@supports (-moz-appearance:none) {
+  .header-container {
+    top: 0;
+    padding-left: 6px;
+  }
+}
+
 .header-container > div {
   display: flex;
   width: fit-content;
-  padding-right: 10px;
+  padding-right: 30px;
 }
 .table-container {
   width: 100%;

src/components/SqlTable.vue

@@ -83,7 +83,7 @@ export default {
       this.tableWidth = this.$refs['table-container'].offsetWidth
       this.$nextTick(() => {
         this.header = this.$refs.th.map(th => {
-          return { name: th.innerText, width: th.offsetWidth }
+          return { name: th.innerText, width: th.getBoundingClientRect().width }
         })
       })
     },

src/views/MyQueries.vue

@@ -226,16 +226,17 @@ export default {
     this.queries = JSON.parse(localStorage.getItem('myQueries')) || []
   },
   mounted () {
-    this.resizeObserver = new ResizeObserver(() => {
-      this.calcNameWidth()
-      this.calcMaxTableHeight()
-    })
+    this.resizeObserver = new ResizeObserver(this.calcMaxTableHeight)
     this.resizeObserver.observe(this.$refs['my-queries-content'])
+
+    this.tableResizeObserver = new ResizeObserver(this.calcNameWidth)
+    this.tableResizeObserver.observe(this.$refs.table)
     this.calcNameWidth()
     this.calcMaxTableHeight()
   },
   beforeDestroy () {
     this.resizeObserver.unobserve(this.$refs['my-queries-content'])
+    this.tableResizeObserver.unobserve(this.$refs.table)
   },
   filters: {
     date (value) {
@@ -254,7 +255,9 @@ export default {
   },
   methods: {
     calcNameWidth () {
-      const nameWidth = this.$refs['name-td'] ? this.$refs['name-td'][0].offsetWidth : 0
+      const nameWidth = this.$refs['name-td']
+        ? this.$refs['name-td'][0].getBoundingClientRect().width
+        : 0
       this.$refs['name-th'].style = `width: ${nameWidth}px`
     },
     calcMaxTableHeight () {
@@ -382,8 +385,8 @@ export default {
     importQueries () {
       const file = this.$refs.importFile.files[0]
       const reader = new FileReader()
-      reader.onload = () => {
-        let importedQueries = JSON.parse(event.target.result)
+      reader.onload = (e) => {
+        let importedQueries = JSON.parse(e.target.result)
 
         if (!Array.isArray(importedQueries)) {
           importedQueries = [importedQueries]