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>
@@ -44,34 +54,25 @@ const app_params = defineModel("app_params");
 @media screen and (max-width: 800px) {
   #page-queries {
     grid-template-columns: calc(100%);
-    grid-template-rows: calc(40vh - var(--header-height) - var(--gap)) calc(60vh - var(--footer-height) - var(--gap));
+    grid-template-rows: calc(40vh - var(--header-height) - var(--gap)) calc(60vh - var(--footer-height) - 3 * 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>