fix topology quick search modal layout

openshift · Jan 22, 2021 · 058ba6e · 058ba6e
1 parent aed8321
commit 058ba6e
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 2 deletions.
diff --git a/frontend/packages/topology/src/components/quick-search/QuickSearchContent.scss b/frontend/packages/topology/src/components/quick-search/QuickSearchContent.scss
@@ -1,9 +1,15 @@
 .odc-quick-search-content {
+  height: calc(100% - 60px);
   &__list {
     width: 40%;
+    height: calc(100%);
+    overflow-y: auto;
   }
   &__details {
+    background: var(--pf-global--palette--white);
     width: 60%;
+    overflow-y: auto;
+    height: 100%;
     padding-right: var(--pf-global--spacer--md);
   }
 }
diff --git a/frontend/packages/topology/src/components/quick-search/QuickSearchDetails.scss b/frontend/packages/topology/src/components/quick-search/QuickSearchDetails.scss
@@ -5,7 +5,6 @@
     var(--pf-global--spacer--md);
   overflow-y: auto;
   overflow-wrap: break-word;
-  height: 400px;
   scrollbar-width: 12px;
   scrollbar-color: var(--pf-global--BackgroundColor--light-300) var(--pf-global--palette--white);
 

diff --git a/frontend/packages/topology/src/components/quick-search/QuickSearchModalBody.scss b/frontend/packages/topology/src/components/quick-search/QuickSearchModalBody.scss
@@ -0,0 +1,3 @@
+.odc-quick-search-modal-body {
+  min-height: 60px;
+}
diff --git a/frontend/packages/topology/src/components/quick-search/QuickSearchModalBody.tsx b/frontend/packages/topology/src/components/quick-search/QuickSearchModalBody.tsx
@@ -9,6 +9,7 @@ import {
   removeQueryArgument,
   setQueryArgument,
 } from '@console/internal/components/utils';
+import './QuickSearchModalBody.scss';
 
 interface QuickSearchModalBodyProps {
   allCatalogItemsLoaded: boolean;
@@ -139,7 +140,11 @@ const QuickSearchModalBody: React.FC<QuickSearchModalBodyProps> = ({
   }, [closeModal, onCancel, onEnter, selectNext, selectPrevious]);
 
   return (
-    <div ref={ref}>
+    <div
+      ref={ref}
+      className="odc-quick-search-modal-body"
+      style={{ height: catalogItems?.length > 0 ? '466px' : '60px' }}
+    >
       <QuickSearchBar
         searchTerm={searchTerm}
         onSearch={onSearch}