page layout

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

Hide file tree

Showing 4 changed files with 38 additions and 23 deletions.
diff --git a/src/plugins/workspace/public/components/workspace_overview/index.tsx b/src/plugins/workspace/public/components/workspace_overview/index.tsx
@@ -170,7 +170,7 @@ export const WorkspaceOverview = (props: WorkspaceOverviewProps) => {
             </EuiFlexGroup>
           ) : null}
         </EuiPageHeader>
-        <EuiPageContent>
+        <EuiPageContent color="transparent" hasBorder={true}>
           <EuiTabbedContent
             tabs={tabs}
             initialSelectedTab={tabs[0]}

diff --git a/src/plugins/workspace/public/components/workspace_overview/workspace_overview_content.tsx b/src/plugins/workspace/public/components/workspace_overview/workspace_overview_content.tsx
@@ -3,7 +3,15 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { EuiTitle, EuiFlexItem, EuiCard, EuiPanel, EuiFlexGroup } from '@elastic/eui';
+import {
+  EuiTitle,
+  EuiFlexItem,
+  EuiCard,
+  EuiFlexGroup,
+  EuiPage,
+  EuiPanel,
+  EuiPageContent,
+} from '@elastic/eui';
 import React from 'react';
 import { useObservable } from 'react-use';
 import { of } from 'rxjs';
@@ -17,24 +25,26 @@ export const WorkspaceOverviewContent = () => {
   const currentWorkspace = useObservable(workspaces ? workspaces.currentWorkspace$ : of(null));
 
   return (
-    <EuiPanel hasBorder={false} color="transparent">
-      <EuiFlexGroup>
-        <EuiFlexItem grow={2}>
-          <EuiCard
-            layout="horizontal"
-            title="About"
-            titleSize="xs"
-            description={currentWorkspace?.description || ''}
-          />
-        </EuiFlexItem>
-        <EuiFlexItem grow={8}>
-          <EuiPanel>
-            <EuiTitle size="xs">
-              <span>Recent items</span>
-            </EuiTitle>
-          </EuiPanel>
-        </EuiFlexItem>
-      </EuiFlexGroup>
-    </EuiPanel>
+    <EuiPage paddingSize="m">
+      <EuiPageContent hasShadow={false} borderRadius={'none'}>
+        <EuiFlexGroup>
+          <EuiFlexItem grow={2}>
+            <EuiCard
+              layout="horizontal"
+              title="About"
+              titleSize="xs"
+              description={currentWorkspace?.description || ''}
+            />
+          </EuiFlexItem>
+          <EuiFlexItem grow={8}>
+            <EuiPanel>
+              <EuiTitle size="xs">
+                <span>Recent items</span>
+              </EuiTitle>
+            </EuiPanel>
+          </EuiFlexItem>
+        </EuiFlexGroup>
+      </EuiPageContent>
+    </EuiPage>
   );
 };
diff --git a/src/plugins/workspace/public/components/workspace_overview/workspace_overview_settings.tsx b/src/plugins/workspace/public/components/workspace_overview/workspace_overview_settings.tsx
@@ -11,6 +11,10 @@ export const WorkspaceOverviewSettings = ({
   workspaceConfigurableApps$,
 }: WorkspaceOverviewProps) => {
   return (
-    <WorkspaceUpdater hideTitle={true} workspaceConfigurableApps$={workspaceConfigurableApps$} />
+    <WorkspaceUpdater
+      hideTitle={true}
+      maxWidth={'100%'}
+      workspaceConfigurableApps$={workspaceConfigurableApps$}
+    />
   );
 };
diff --git a/src/plugins/workspace/public/components/workspace_updater/workspace_updater.tsx b/src/plugins/workspace/public/components/workspace_updater/workspace_updater.tsx
@@ -25,6 +25,7 @@ import {
 export interface WorkspaceUpdaterProps {
   workspaceConfigurableApps$?: BehaviorSubject<PublicAppInfo[]>;
   hideTitle?: boolean;
+  maxWidth?: number | string;
 }
 
 function getFormDataFromWorkspace(
@@ -127,7 +128,7 @@ export const WorkspaceUpdater = (props: WorkspaceUpdaterProps) => {
           paddingSize="none"
           color="subdued"
           hasShadow={false}
-          style={{ width: '100%', maxWidth: 1000 }}
+          style={{ width: '100%', maxWidth: props.maxWidth ? props.maxWidth : 1000 }}
         >
           {application && (
             <WorkspaceForm