[Workspace] Fix new home page small screen display issues (#8554) (#8572

) * Fix small screen display issues * Changeset file for PR #8554 created/updated * revert --------- (cherry picked from commit 0171068) Signed-off-by: yubonluo <[email protected]> Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> Co-authored-by: opensearch-changeset-bot[bot] <154024398+opensearch-changeset-bot[bot]@users.noreply.github.com>
opensearch-project · Oct 12, 2024 · a32d197 · a32d197
1 parent 2a1e9be
commit a32d197
Show file tree

Hide file tree

Showing 5 changed files with 39 additions and 23 deletions.
diff --git a/changelogs/fragments/8554.yml b/changelogs/fragments/8554.yml
@@ -0,0 +1,2 @@
+fix:
+- Fix new home page small screen display issues ([#8554](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/8554))
diff --git a/...rkspace/public/components/workspace_initial/__snapshots__/workspace_initial.test.tsx.snap b/...rkspace/public/components/workspace_initial/__snapshots__/workspace_initial.test.tsx.snap
diff --git a/src/plugins/workspace/public/components/workspace_initial/workspace_initial.scss b/src/plugins/workspace/public/components/workspace_initial/workspace_initial.scss
@@ -17,4 +17,5 @@
   margin: auto;
   padding-left: 48px;
   padding-right: 48px;
+  width: 100%;
 }
diff --git a/src/plugins/workspace/public/components/workspace_initial/workspace_initial.tsx b/src/plugins/workspace/public/components/workspace_initial/workspace_initial.tsx
@@ -157,7 +157,12 @@ export const WorkspaceInitial = ({ registeredUseCases$ }: WorkspaceInitialProps)
       </EuiFlexItem>
       <EuiSpacer size="l" />
       <EuiFlexItem grow={false}>
-        <EuiFlexGroup direction="row" justifyContent="spaceBetween" alignItems="center">
+        <EuiFlexGroup
+          direction="row"
+          justifyContent="spaceBetween"
+          alignItems="center"
+          gutterSize="m"
+        >
           <EuiFlexItem grow={false}>
             <div style={{ display: 'flex', alignItems: 'center' }}>
               <EuiIcon type="wsSelector" size="m" />
@@ -181,8 +186,8 @@ export const WorkspaceInitial = ({ registeredUseCases$ }: WorkspaceInitialProps)
           <EuiFlexItem grow={false}>{isDashboardAdmin && createWorkspacePopover}</EuiFlexItem>
         </EuiFlexGroup>
       </EuiFlexItem>
-      <EuiFlexItem>
-        <EuiFlexGroup justifyContent="spaceBetween" gutterSize="m">
+      <EuiFlexItem grow={false}>
+        <EuiFlexGroup justifyContent="spaceBetween" gutterSize="m" className="eui-xScroll">
           {useCaseCards}
         </EuiFlexGroup>
       </EuiFlexItem>
@@ -241,15 +246,15 @@ export const WorkspaceInitial = ({ registeredUseCases$ }: WorkspaceInitialProps)
   return (
     <EuiPage style={{ minHeight: '100vh' }}>
       <EuiPageBody>
-        <EuiIcon type="logoOpenSearch" size="xl" />
+        <EuiIcon type="logoOpenSearch" size="xl" style={{ position: 'fixed' }} />
+        <EuiSpacer size="xl" />
         <EuiSpacer size="l" />
         <EuiFlexGroup
           direction="column"
           alignItems="center"
-          justifyContent="flexStart"
           className="workspace-initial__flex-group-responsive"
         >
-          <EuiFlexItem grow={false} style={{ width: '1264px' }}>
+          <EuiFlexItem grow={false} style={{ maxWidth: '1264px', width: '100%' }}>
             {content}
           </EuiFlexItem>
         </EuiFlexGroup>

diff --git a/src/plugins/workspace/public/components/workspace_initial/workspace_use_case_card.tsx b/src/plugins/workspace/public/components/workspace_initial/workspace_use_case_card.tsx
@@ -111,7 +111,7 @@ export const WorkspaceUseCaseCard = ({
   };
 
   return (
-    <EuiSplitPanel.Outer style={{ height: '416px', minWidth: '235px' }}>
+    <EuiSplitPanel.Outer style={{ height: '416px', minWidth: '240px' }}>
       <EuiSplitPanel.Inner
         paddingSize="m"
         grow={!hasWorkspaces}