style: improve workspace header alignment (#8)

Co-authored-by: Andreas Kienle <[email protected]>

Author: GenosseOtt

src/components/ControlPlanes/ControlPlaneCard.tsx

@@ -52,7 +52,10 @@ export function ControlPlaneCard({
 
   return (
     <>
-      <Card key={`${name}--${namespace}`}>
+      <Card
+        key={`${name}--${namespace}`}
+        style={{ margin: '12px 12px 12px 0' }}
+      >
         <div style={{ padding: '20px' }}>
           <FlexBox direction="Column">
             <FlexBox direction="Row" justifyContent="SpaceBetween">

src/components/ControlPlanes/List/ControlPlaneListWorkspaceGridTile.tsx

@@ -95,13 +95,14 @@ export function ControlPlaneListWorkspaceGridTile({
       >
         <Panel
           headerLevel="H2"
+          style={{ margin: '12px 12px 12px 0' }}
           collapsed={controlplanes?.length === 0}
           header={
             <div
               style={{
                 width: '100%',
                 display: 'grid',
-                gridTemplateColumns: '1fr 1fr 1fr auto',
+                gridTemplateColumns: '0.3fr 0.24fr auto 0.05fr',
                 gap: '1rem',
                 alignItems: 'center',
               }}

src/components/ControlPlanes/List/MembersAvatarView.tsx

@@ -31,9 +31,10 @@ export function MembersAvatarView({ members, project, workspace }: Props) {
   }
 
   return (
-    <div style={{ maxWidth: '300px' }}>
+    <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
       <AvatarGroup
         ref={openerRef}
+        style={{ maxWidth: '200px' }}
         type={AvatarGroupType.Group}
         onClick={handleOnClick}
       >