getting start modal

Signed-off-by: Hailong Cui <[email protected]>
ruanyl · Apr 21, 2024 · 5e77d17 · 5e77d17
1 parent d6775c7
commit 5e77d17
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 11 deletions.
diff --git a/src/plugins/workspace/public/components/workspace_overview/getting_start_modal.tsx b/src/plugins/workspace/public/components/workspace_overview/getting_start_modal.tsx
@@ -48,7 +48,7 @@ export const WorkspaceOverviewGettingStartModal = (props: Props) => {
     return {
       label: category,
       checked: selectedItemName === category ? 'on' : undefined,
-      className: 'getStartCategoryItem',
+      className: 'gettingStartCategoryItem',
     };
   });
 
@@ -88,16 +88,16 @@ export const WorkspaceOverviewGettingStartModal = (props: Props) => {
     });
 
   return (
-    <EuiModal onClose={onCloseModal} maxWidth={false} style={{ width: '90vw', height: '75vh' }}>
+    <EuiModal onClose={onCloseModal} maxWidth={false} className={'gettingStartModel'}>
       <EuiModalHeader>
         <EuiModalHeaderTitle>
           <h2>Define your path forward</h2>
           <EuiText color="subdued">Discover tailored solutions for your unique objectives</EuiText>
         </EuiModalHeaderTitle>
       </EuiModalHeader>
 
-      <EuiModalBody>
-        <EuiFlexGroup>
+      <EuiModalBody style={{ overflowY: 'hidden' }}>
+        <EuiFlexGroup gutterSize={'s'}>
           <EuiFlexItem grow={2}>
             <EuiSelectable
               aria-label="category selection"
@@ -113,15 +113,18 @@ export const WorkspaceOverviewGettingStartModal = (props: Props) => {
                 bordered: false,
                 rowHeight: 48,
                 onFocusBadge: false,
+                windowProps: {
+                  className: 'gettingStartCategoryItemList',
+                },
               }}
             >
               {(list) => {
                 return list;
               }}
             </EuiSelectable>
           </EuiFlexItem>
-          <EuiFlexItem grow={10}>
-            <EuiPanel color="subdued" style={{ overflowY: 'auto', height: '50vh' }}>
+          <EuiFlexItem grow={10} style={{ margin: '0px' }}>
+            <EuiPanel color="subdued" className={'gettingStartModel_body'} grow={false}>
               {cardList}
             </EuiPanel>
           </EuiFlexItem>

diff --git a/src/plugins/workspace/public/components/workspace_overview/index.scss b/src/plugins/workspace/public/components/workspace_overview/index.scss
@@ -3,13 +3,28 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-.getStartCategoryItem {
+.gettingStartModel {
+  width: calc(90vw - #{$euiSize});
+}
+
+.gettingStartModel_body {
+  overflow-y: auto;
+  height: calc(75vh - 200px);
+}
+
+.gettingStartCategoryItem {
   border: none !important;
 }
 
-.gettingStartCategory div {
-  &:focus-within {
-    outline: none;
-    animation: none !important;
+.gettingStartCategory {
+  div {
+    &:focus-within {
+      outline: none;
+      animation: none !important;
+    }
   }
 }
+
+.gettingStartCategoryItemList {
+  mask: none !important;
+}