improve readability

Author: GenosseOtt

src/components/ControlPlane/ComponentList.tsx

@@ -51,6 +51,7 @@ export default function ComponentList({ mcp }: { mcp: ControlPlaneType }) {
         columns={componentTableColumns}
         minRows={0}
         data={data}
+        style={{marginLeft: "12px", marginRight: "12px"}}
       />
 
     </div>

src/components/Shared/ConfiguredAnalyticsTable.tsx

@@ -23,6 +23,7 @@ export default function ConfiguredAnalyticsTable(props: Props) {
       scaleWidthMode={AnalyticalTableScaleWidthMode.Smart}
       loading={props.isLoading}
       filterable
+      style={{margin: "12px"}}
     />
   );
 }

src/index.css

@@ -86,6 +86,10 @@
   margin-bottom: -30px;
 }
 
+.cp-panel {
+  margin: 12px;
+}
+
 .cp-panel-crossplane {
   background-color: #FFC933;
 }

src/views/ControlPlanes/ControlPlaneView.tsx

@@ -74,22 +74,22 @@ export default function ControlPlaneView() {
             titleText="Components"
             hideTitleText
           >
-            <Panel headerLevel="H2" headerText="Panel" header={<Title level="H3">Components</Title>} noAnimation>
+            <Panel className="cp-panel" headerLevel="H2" headerText="Panel" header={<Title level="H3">Components</Title>} noAnimation>
               <ComponentList mcp={mcp}></ComponentList>
             </Panel>
           </ObjectPageSection>
           <ObjectPageSection
             className="cp-page-section-crossplane"
             id="crossplane"
-            titleText="Crossplane"
+            titleText="Managed Resources"
             hideTitleText
           >
-            <Panel className="cp-panel-crossplane" headerLevel="H3" headerText="Panel" header={<Title level="H3">Crossplane</Title>} noAnimation>
+            <Panel className="cp-panel cp-panel-crossplane" headerLevel="H3" headerText="Panel" header={<Title level="H3">Managed Resources</Title>} noAnimation>
               <ProvidersList />
             </Panel>
           </ObjectPageSection>
           <ObjectPageSection className="cp-page-section-gitops" id="gitops" titleText="GitOps" hideTitleText>
-            <Panel className="cp-panel-gitops" headerLevel="H3" headerText="Panel" header={<Title level="H3">GitOps</Title>} noAnimation>
+            <Panel className="cp-panel cp-panel-gitops" headerLevel="H3" headerText="Panel" header={<Title level="H3">GitOps</Title>} noAnimation>
               <FluxList />
             </Panel>
           </ObjectPageSection>