Fix sidebar spacing issues

public/index.html.ejs

@@ -86,7 +86,7 @@
       </section>
     </aside>
     <div class="apollon-container">
-    <main id="apollon"></main>
+      <main id="apollon"></main>
     </div>
   </div>
 </body>

src/main/components/create-pane/create-pane.tsx

@@ -145,6 +145,7 @@ class CreatePaneComponent extends Component<Props, State> {
     };
 
     const { previews, utils } = this.state;
+
     const elements = [...previews, ...utils].reduce<UMLElementState>(
       (state, preview) => ({
         ...state,
@@ -155,7 +156,10 @@ class CreatePaneComponent extends Component<Props, State> {
 
     return (
       <StoreProvider initialState={{ elements, editor: { features } }}>
-        {this.getElementArray(previews)}
+        <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 8 }}>
+          {this.getElementArray(previews)}
+        </div>
+
         {utils && utils.length > 0 ? (
           <>
             <Separator />

src/main/components/create-pane/preview-element-component.tsx

@@ -19,7 +19,7 @@ export const Preview = styled(hoverable(CanvasElement)).attrs((props: { scale?:
   overflow: visible;
   fill: white;
   scale: ${(props) => props.scale ?? 0.8};
-  transform-origin: center center;
+  transform-origin: center;
 `;
 
 export class PreviewElementComponent extends Component<Props> {

src/main/packages/common/uml-interface/uml-interface-component.tsx

@@ -13,7 +13,7 @@ export const UMLInterfaceComponent: FunctionComponent<Props> = ({ element, fillC
       strokeWidth={2}
       fillColor={fillColor || element.fillColor}
     />
-    <Text noY x={'25px'} dominantBaseline="auto" textAnchor="start" fill={element.textColor}>
+    <Text x={25} noY dominantBaseline="auto" textAnchor="start" fill={element.textColor}>
       {element.name}
     </Text>
   </g>

src/main/packages/uml-component-diagram/component-preview.ts

@@ -1,15 +1,15 @@
 import { ILayer } from '../../services/layouter/layer';
 import { UMLElement } from '../../services/uml-element/uml-element';
-import { ComposePreview } from '../compose-preview';
+import { ComposePreview, PreviewElement } from '../compose-preview';
 import { UMLComponentInterface } from './uml-component-interface/uml-component-interface';
 import { UMLComponentComponent } from './uml-component/uml-component-component';
 import { UMLSubsystem } from './uml-component-subsystem/uml-component-subsystem';
 
 export const composeComponentPreview: ComposePreview = (
   layer: ILayer,
   translate: (id: string) => string,
-): UMLElement[] => {
-  const elements: UMLElement[] = [];
+): PreviewElement[] => {
+  const elements: PreviewElement[] = [];
 
   // UML Component
   const umlComponent = new UMLComponentComponent({ name: translate('packages.ComponentDiagram.Component') });
@@ -38,7 +38,8 @@ export const composeComponentPreview: ComposePreview = (
     width: umlComponentInterface.bounds.width,
     height: umlComponentInterface.bounds.height,
   };
-  const [umlInterface] = umlComponentInterface.render(layer) as [UMLElement];
+  const [umlInterface] = umlComponentInterface.render(layer) as [PreviewElement];
+  umlInterface.styles = { paddingTop: 8 };
   elements.push(umlInterface);
 
   return elements;

src/tests/unit/packages/uml-component-diagram/uml-component-interface/__snapshots__/uml-component-interface-test.tsx.snap

@@ -19,7 +19,7 @@ exports[`render the uml-component-component 1`] = `
           font-weight="bold"
           pointer-events="none"
           text-anchor="start"
-          x="25px"
+          x="25"
         >
           TestComponentComponent
         </text>

src/tests/unit/packages/uml-deployment-diagram/uml-deployment-interface/__snapshots__/uml-deployment-interface-test.tsx.snap

@@ -19,7 +19,7 @@ exports[`render the uml-deployment-interface-component 1`] = `
           font-weight="bold"
           pointer-events="none"
           text-anchor="start"
-          x="25px"
+          x="25"
         >
           TestDeploymentComponent
         </text>