Fix resizing issue on query page when sidepanel is hidden

Author: SanderMertens

etc/js/components/pages/queries/page.vue

@@ -1,5 +1,5 @@
 <template>
-  <div id="page-queries" class="page-content">
+  <div id="page-queries" :class="page_class()">
     <pane-query
       v-model:app_params="app_params"
       :conn="conn"
@@ -26,6 +26,16 @@ const props = defineProps({
 });
 
 const app_params = defineModel("app_params");
+
+function page_class() {
+  let result = ["page-content"];
+  if (!this.app_params.sidebar) {
+    result.push("page-queries-no-sidebar");
+  }
+  
+  return result;
+}
+
 </script>
 
 <style scoped>
@@ -46,32 +56,14 @@ const app_params = defineModel("app_params");
     grid-template-columns: calc(100%);
     grid-template-rows: calc(40vh - var(--header-height) - var(--gap)) calc(60vh - var(--footer-height) - var(--gap));
   }
+
+  div.page-queries-no-sidebar {
+    grid-template-columns: calc(100%);
+    grid-template-rows: calc(100vh - var(--header-height) - var(--footer-height) - 3 * var(--gap)) !important;
+  }
 }
 </style>
 
 <style>
-div.queries-left-pane {
-  grid-column: 1;
-  grid-row: 1;
-  height: calc(100vh - var(--header-height) - var(--footer-height) - 3 * var(--gap));
-}
 
-div.queries-right-pane {
-  grid-row: 1;
-  height: calc(100vh - var(--header-height) - var(--footer-height) - 3 * var(--gap));
-}
-
-@media screen and (max-width: 800px) {
-  div.queries-left-pane {
-    grid-column: 1;
-    grid-row: 1;
-    height: calc(40vh - - var(--header-height) - var(--gap));
-  }
-
-  div.queries-right-pane {
-    grid-column: 1;
-    grid-row: 2;
-    height: calc(60vh - var(--footer-height) - 3 * var(--gap));
-  }
-}
 </style>

etc/js/components/pages/queries/pane-inspect.vue

@@ -1,5 +1,5 @@
 <template>
-  <div id="pane-inspect" :class="`queries-right-pane pane ${gridColumnClass}`">
+  <div id="pane-inspect" :class="`pane ${gridColumnClass}`">
     <tabs :items="['table', 'json', 'api', 'inspect']" 
         v-model:active_tab="app_params.query.inspect_tab"
         class="inspect-tab-content">

etc/js/components/pages/queries/pane-query.vue

@@ -1,5 +1,5 @@
 <template>
-  <div id="pane-query" class="queries-left-pane pane">
+  <div id="pane-query">
     <tabs :items="['editor', 'browse']"
         v-model:active_tab="app_params.query.query_tab"
         class="explorer-tab-content"