fix layout bug (finos#1070)

ScottLogic · Dec 11, 2023 · b57cee5 · b57cee5
1 parent 63f9f80
commit b57cee5
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 11 deletions.
diff --git a/vuu-ui/packages/vuu-layout/src/layout-reducer/insert-layout-element.ts b/vuu-ui/packages/vuu-layout/src/layout-reducer/insert-layout-element.ts
@@ -3,7 +3,6 @@ import { rectTuple, uuid } from "@finos/vuu-utils";
 import React, { ReactElement } from "react";
 import { DropPos } from "../drag-drop";
 import { DropTarget } from "../drag-drop/DropTarget";
-import { TabLabelFactory } from "../stack";
 import { getProp, getProps, nextStep, resetPath, typeOf } from "../utils";
 import {
   createPlaceHolder,
@@ -391,7 +390,11 @@ function getStyledComponents(
     } = getProps(newComponent);
     return [
       existingComponent,
-      React.cloneElement(newComponent, { id, version, style }),
+      React.cloneElement(newComponent, {
+        id,
+        version,
+        style: { ...style, flex: "1 1 0px" },
+      }),
     ];
   }
 }
diff --git a/vuu-ui/packages/vuu-layout/src/stack/Stack.css b/vuu-ui/packages/vuu-layout/src/stack/Stack.css
@@ -1,15 +1,15 @@
-.Tabs {
+.vuuTabs {
   display: flex;
   box-sizing: border-box;
   flex-direction: column;
 }
 
-.Tabs-horizontal {
+.vuuTabs-horizontal {
   --vuu-tabs-border-style: none solid none none;
   flex-direction: row;
 }
 
-.Tabs .Toolbar:before {
+.vuuTabs .Toolbar:before {
   left: 0;
   width: 100%;
   bottom: 0;
@@ -19,12 +19,10 @@
   background: var(--grey60);
 }
 
-.Tabs-tabPanel {
+.vuuTabs-tabPanel {
+  display: flex;
   flex: 1; 
-}
-
-.Tabs-tabPanel > * {
-  height: 100%;
+  flex-direction: column;
 }
 
 .vuuTabHeader {

diff --git a/vuu-ui/packages/vuu-layout/src/stack/Stack.tsx b/vuu-ui/packages/vuu-layout/src/stack/Stack.tsx
@@ -14,7 +14,7 @@ import { StackProps } from "./stackTypes";
 
 import "./Stack.css";
 
-const classBase = "Tabs";
+const classBase = "vuuTabs";
 
 const getDefaultTabIcon = () => undefined;