Resize query options modal (#3417)

* feat: Adjust query options modal height * fix: Fix height of query options modal on window size change * fix: Add changeset file
finos · Aug 12, 2024 · 2231e0a · 2231e0a
1 parent 0c65bc1
commit 2231e0a
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 4 deletions.
diff --git a/.changeset/two-pots-bake.md b/.changeset/two-pots-bake.md
@@ -0,0 +1,5 @@
+---
+'@finos/legend-query-builder': patch
+---
+
+Resize query options modal
diff --git a/...s/legend-query-builder/src/components/fetch-structure/QueryBuilderResultModifierPanel.tsx b/...s/legend-query-builder/src/components/fetch-structure/QueryBuilderResultModifierPanel.tsx
@@ -746,7 +746,8 @@ export const QueryResultModifierModal = observer(
         classes={{
           root: 'editor-modal__root-container',
           container: 'editor-modal__container',
-          paper: 'editor-modal__content',
+          paper:
+            'editor-modal__content query-builder__projection__modal__content',
         }}
         data-testid={QUERY_BUILDER_TEST_ID.QUERY_BUILDER_RESULT_MODIFIER_PANEL}
       >
@@ -756,7 +757,10 @@ export const QueryResultModifierModal = observer(
           }
           className="editor-modal query-builder__projection__modal"
         >
-          <ModalHeader title="Query Options" />
+          <ModalHeader
+            className="query-builder__projection__modal__header"
+            title="Query Options"
+          />
           <ModalBody className="query-builder__projection__modal__body">
             <div className="query-builder__projection__options">
               {tdsState.queryBuilderState.milestoningState

diff --git a/packages/legend-query-builder/style/_query-builder-projection.scss b/packages/legend-query-builder/style/_query-builder-projection.scss
@@ -390,11 +390,24 @@
   }
 
   &__modal {
-    height: 80vh;
-    width: 50vw;
+    display: flex;
+    flex-direction: column;
+    height: fit-content;
+    width: fit-content;
+
+    &__content {
+      align-self: start;
+      margin-top: 15rem;
+      max-height: calc(100% - 20rem);
+    }
+
+    &__header {
+      flex: none;
+    }
 
     &__body {
       overflow: auto;
+      flex: 1;
     }
   }