feat: set maxWidth for scaling and reduce gap sizes (#248)

Co-authored-by: Johannes Ott <johannes.ott@sap.com>
Co-authored-by: Łukasz Goral <lukasz.goral@sap.com>

Author: 3 people

src/components/ControlPlanes/List/ControlPlaneListWorkspaceGridTile.tsx

@@ -77,7 +77,7 @@ export function ControlPlaneListWorkspaceGridTile({ projectName, workspace }: Pr
       >
         <Panel
           headerLevel="H2"
-          style={{ margin: '12px 12px 12px 0' }}
+          style={{ maxWidth: '1280px', margin: '0px auto 0px auto', width: '100%' }}
           collapsed={shouldCollapsePanel}
           header={
             <div

src/components/Projects/ProjectsList.tsx

@@ -133,7 +133,17 @@ export default function ProjectsList() {
 
   return (
     <>
-      <AnalyticalTable style={{ margin: '12px' }} columns={stabilizedColumns} data={stabilizedData} />
+      <AnalyticalTable
+        style={{
+          maxWidth: '1280px',
+          margin: '10px auto 0px auto',
+          width: '100%',
+          borderRadius: '12px',
+          overflow: 'hidden',
+        }}
+        columns={stabilizedColumns}
+        data={stabilizedData}
+      />
     </>
   );
 }

src/spaces/mcp/pages/McpPage.module.css

@@ -0,0 +1,5 @@
+.panel {
+  max-width: 1280px;
+  margin: 0.1em auto -8px auto;
+  width: 100%;
+}

src/spaces/mcp/pages/McpPage.tsx

@@ -1,6 +1,7 @@
 import { BusyIndicator, ObjectPage, ObjectPageSection, ObjectPageTitle, Panel, Title } from '@ui5/webcomponents-react';
 import { useParams } from 'react-router-dom';
 import CopyKubeconfigButton from '../../../components/ControlPlanes/CopyKubeconfigButton.tsx';
+import styles from './McpPage.module.css';
 import '@ui5/webcomponents-fiori/dist/illustrations/SimpleBalloon';
 import '@ui5/webcomponents-fiori/dist/illustrations/SimpleError';
 // thorws error sometimes if not imported
@@ -106,6 +107,7 @@ export default function McpPage() {
               hideTitleText
             >
               <Panel
+                className={styles.panel}
                 headerLevel="H2"
                 headerText="Panel"
                 header={<Title level="H3">{t('McpPage.componentsTitle')}</Title>}
@@ -121,6 +123,7 @@ export default function McpPage() {
               hideTitleText
             >
               <Panel
+                className={styles.panel}
                 headerLevel="H3"
                 headerText="Panel"
                 header={<Title level="H3">{t('McpPage.crossplaneTitle')}</Title>}
@@ -144,6 +147,7 @@ export default function McpPage() {
               hideTitleText
             >
               <Panel
+                className={styles.panel}
                 headerLevel="H3"
                 headerText="Panel"
                 header={<Title level="H3">{t('McpPage.landscapersTitle')}</Title>}
@@ -159,6 +163,7 @@ export default function McpPage() {
               hideTitleText
             >
               <Panel
+                className={styles.panel}
                 headerLevel="H3"
                 headerText="Panel"
                 header={<Title level="H3">{t('McpPage.gitOpsTitle')}</Title>}