bug: tabComponents layout direction wrong

Author: mslxl

packages/dockview-core/src/dockview/dockviewGroupPanel.scss

@@ -3,6 +3,7 @@
     height: 100%;
     background-color: var(--dv-group-view-background-color);
     overflow: hidden;
+    flex-direction: column;
 
     &:focus {
         outline: none;
@@ -14,10 +15,6 @@
         outline: none;
     }
 
-    &.dv-groupview-header-top {
-        flex-direction: column;
-    }
-
     &.dv-groupview-header-bottom {
         flex-direction: column-reverse;
     }

packages/docs/sandboxes/nativeapp-dockview/src/app.tsx

@@ -25,7 +25,11 @@ const components = {
         );
     },
     isolatedApp: (
-        props: IDockviewPanelProps<{ title: string; x?: number }>
+        props: IDockviewPanelProps<{
+            title: string;
+            x?: number;
+            vertical?: boolean;
+        }>
     ) => {
         const onReady = (event: DockviewReadyEvent) => {
             const panel1 = event.api.addPanel({
@@ -49,6 +53,9 @@ const components = {
                     title: 'Tab 3',
                 },
             });
+            if(props.params.vertical){
+              panel1.group.headerPosition = 'left'
+            }
         };
         return (
             <DockviewReact
@@ -113,6 +120,7 @@ const DockviewNative2 = (props: { theme?: string }) => {
             tabComponent: 'default',
             params: {
                 title: 'Window 3',
+                vertical: true,
             },
             position: {
                 direction: 'below',