fix the CSS issue where it is unable to scroll down the graph fetch e…

…ditor when properties don't fit the screen (finos#2777)
mrudula-gs · Nov 10, 2023 · 9ccb8ae · 9ccb8ae
1 parent a4036a6
commit 9ccb8ae
Show file tree

Hide file tree

Showing 5 changed files with 32 additions and 7 deletions.
diff --git a/.changeset/green-bugs-shave.md b/.changeset/green-bugs-shave.md
@@ -0,0 +1,5 @@
+---
+'@finos/legend-query-builder': patch
+---
+
+Fix the CSS issue where it is unable to scroll down the graph fetch editor when properties don't fit the screen
diff --git a/.changeset/short-mails-travel.md b/.changeset/short-mails-travel.md
@@ -0,0 +1,3 @@
+---
+'@finos/legend-art': patch
+---
diff --git a/packages/legend-art/src/panel/PanelDropZone.tsx b/packages/legend-art/src/panel/PanelDropZone.tsx
@@ -31,9 +31,16 @@ export const PanelDropZone: React.FC<{
   dropTargetConnector: ConnectDropTarget;
   isDragOver: boolean;
   isDroppable?: boolean | undefined;
+  contentClassName?: string | undefined;
 }> = (props) => {
-  const { children, className, isDragOver, isDroppable, dropTargetConnector } =
-    props;
+  const {
+    children,
+    className,
+    isDragOver,
+    isDroppable,
+    dropTargetConnector,
+    contentClassName,
+  } = props;
 
   const ref = useRef<HTMLInputElement>(null);
   dropTargetConnector(ref);
@@ -43,7 +50,11 @@ export const PanelDropZone: React.FC<{
       <div className={clsx('dnd__dropzone', className)} ref={ref}>
         {isDroppable && <div className="dnd__dropzone--droppable"></div>}
         {isDragOver && <div className="panel__dnd__dropzone__overlay" />}
-        <div className="panel__dnd__dropzone__content">{children}</div>
+        <div
+          className={clsx('panel__dnd__dropzone__content', contentClassName)}
+        >
+          {children}
+        </div>
       </div>
     </>
   );

diff --git a/...s/legend-query-builder/src/components/fetch-structure/QueryBuilderGraphFetchTreePanel.tsx b/...s/legend-query-builder/src/components/fetch-structure/QueryBuilderGraphFetchTreePanel.tsx
@@ -787,6 +787,7 @@ const QueryBuilderGraphFetchTreePanel = observer(
         <PanelDropZone
           isDragOver={isDragOver}
           dropTargetConnector={dropTargetConnector}
+          contentClassName="query-builder-graph-fetch-panel"
         >
           {(!treeData || isGraphFetchTreeDataEmpty(treeData)) && (
             <BlankPanelPlaceholder
@@ -829,10 +830,7 @@ export const QueryBuilderGraphFetchPanel = observer(
       );
     }
     return (
-      <div
-        data-testid={QUERY_BUILDER_TEST_ID.QUERY_BUILDER_GRAPH_FETCH}
-        className="panel__content"
-      >
+      <div data-testid={QUERY_BUILDER_TEST_ID.QUERY_BUILDER_GRAPH_FETCH}>
         <BlankPanelContent>
           <div className="unsupported-element-editor__main">
             <div className="unsupported-element-editor__summary">

diff --git a/packages/legend-query-builder/style/_query-builder-graph-fetch-tree.scss b/packages/legend-query-builder/style/_query-builder-graph-fetch-tree.scss
@@ -16,6 +16,10 @@
 
 @use 'mixins' as *;
 
+.query-builder-graph-fetch-panel {
+  overflow: hidden !important;
+}
+
 .query-builder-graph-fetch-tree {
   height: 100%;
   width: 100%;
@@ -221,6 +225,7 @@
 
   &__config-group {
     width: 100%;
+    height: 100%;
 
     &__header {
       @include flexVCenter;
@@ -250,6 +255,9 @@
     }
 
     &__content {
+      height: calc(100% - 2.2rem);
+      position: relative;
+      overflow-y: scroll;
       display: flex;
       flex-direction: column;
       width: 100%;