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 index 3a6bdb8ff..3b4b81f72 100644 --- 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 index f40439272..2995c5001 100644 --- 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 index 73b6faf76..c9ad2a635 100644 --- 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;