From 5d5f1da97b9adfa743197d8fa0bbb6addd565a7a Mon Sep 17 00:00:00 2001
From: Fabio Di Stasio <fabio286@gmail.com>
Date: Thu, 19 May 2022 09:30:43 +0200
Subject: [PATCH] perf(UI): max height for query text area increased

---
 src/renderer/components/WorkspaceTabQuery.vue | 24 +++++++++++++++----
 1 file changed, 19 insertions(+), 5 deletions(-)

diff --git a/src/renderer/components/WorkspaceTabQuery.vue b/src/renderer/components/WorkspaceTabQuery.vue
index 5a402ffa..d2b74ec7 100644
--- a/src/renderer/components/WorkspaceTabQuery.vue
+++ b/src/renderer/components/WorkspaceTabQuery.vue
@@ -21,7 +21,7 @@
             :height="editorHeight"
          />
          <div ref="resizer" class="query-area-resizer" />
-         <div class="workspace-query-runner-footer">
+         <div ref="queryAreaFooter" class="workspace-query-runner-footer">
             <div class="workspace-query-buttons">
                <div @mouseenter="setCancelButtonVisibility(true)" @mouseleave="setCancelButtonVisibility(false)">
                   <button
@@ -320,6 +320,7 @@ export default {
          this.selectedSchema = null;
 
       window.addEventListener('keydown', this.onKey);
+      window.addEventListener('resize', this.onWindowResize);
    },
    mounted () {
       const resizer = this.$refs.resizer;
@@ -335,6 +336,7 @@ export default {
          this.runQuery(this.query);
    },
    beforeUnmount () {
+      window.removeEventListener('resize', this.onWindowResize);
       window.removeEventListener('keydown', this.onKey);
       const params = {
          uid: this.connection.uid,
@@ -419,11 +421,24 @@ export default {
       },
       resize (e) {
          const el = this.$refs.queryEditor.$el;
-         let editorHeight = e.pageY - el.getBoundingClientRect().top;
-         if (editorHeight > 400) editorHeight = 400;
+         const queryFooterHeight = this.$refs.queryAreaFooter.clientHeight;
+         const bottom = e.pageY || this.$refs.resizer.getBoundingClientRect().bottom;
+         const maxHeight = window.innerHeight - 100 - queryFooterHeight;
+         let editorHeight = bottom - el.getBoundingClientRect().top;
+         if (editorHeight > maxHeight) editorHeight = maxHeight;
          if (editorHeight < 50) editorHeight = 50;
          this.editorHeight = editorHeight;
       },
+      onWindowResize (e) {
+         const el = this.$refs.queryEditor.$el;
+         const queryFooterHeight = this.$refs.queryAreaFooter.clientHeight;
+         const bottom = e.pageY || this.$refs.resizer.getBoundingClientRect().bottom;
+         const maxHeight = window.innerHeight - 100 - queryFooterHeight;
+         const editorHeight = bottom - el.getBoundingClientRect().top;
+
+         if (editorHeight > maxHeight)
+            this.editorHeight = maxHeight;
+      },
       stopResize () {
          window.removeEventListener('mousemove', this.resize);
          if (this.$refs.queryTable && this.results.length)
@@ -520,9 +535,8 @@ export default {
     position: relative;
 
     .query-area-resizer {
-      position: absolute;
       height: 4px;
-      bottom: 40px;
+      margin-top: -2px;
       width: 100%;
       cursor: ns-resize;
       z-index: 99;