diff --git a/less/documentDB.less b/less/documentDB.less index 125bb1143..ee4dba4b6 100644 --- a/less/documentDB.less +++ b/less/documentDB.less @@ -2352,8 +2352,8 @@ a:link { .tabsManagerContainer { height: 100%; - display: grid; - grid-template-rows: 36px 36px 1fr; + display: flex; + flex-direction: column; min-width: 0; // This prevents it to grow past the parent's width if its content is too wide } @@ -2610,9 +2610,8 @@ a:link { } .tabPanesContainer { - grid-row: span 2; // Fill the remaining space display: flex; - height: 100%; + flex-grow: 1; overflow: hidden; } diff --git a/src/Explorer/Tabs/Tabs.tsx b/src/Explorer/Tabs/Tabs.tsx index 359aa0706..3e8459671 100644 --- a/src/Explorer/Tabs/Tabs.tsx +++ b/src/Explorer/Tabs/Tabs.tsx @@ -57,7 +57,8 @@ export const Tabs = ({ explorer }: TabsProps): JSX.Element => { const defaultMessageBarStyles: IMessageBarStyles = { root: { height: `${LayoutConstants.rowHeight}px`, - overflow: "auto", + overflow: "hidden", + flexDirection: "row", }, };