random-mirrors
/
cosmos-explorer
mirror of https://github.com/Azure/cosmos-explorer.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

fix #1929 by using flex instead of grid to lay out the tabs view (#1930)

This commit is contained in:
Ashley Stanton-Nurse 2024-08-13 11:19:24 -07:00 committed by GitHub
parent 7f55de7aa2
commit b59ba20ed0
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 5 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
less/documentDB.less
View File

@ -2352,8 +2352,8 @@ a:link {
.tabsManagerContainer { .tabsManagerContainer {
height: 100%; height: 100%;
display: grid; display: flex;
grid-template-rows: 36px 36px 1fr; flex-direction: column;
min-width: 0; // This prevents it to grow past the parent's width if its content is too wide 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 { .tabPanesContainer {
grid-row: span 2; // Fill the remaining space
display: flex; display: flex;
height: 100%; flex-grow: 1;
overflow: hidden; overflow: hidden;
} }

3
src/Explorer/Tabs/Tabs.tsx
View File

@ -57,7 +57,8 @@ export const Tabs = ({ explorer }: TabsProps): JSX.Element => {
const defaultMessageBarStyles: IMessageBarStyles = { const defaultMessageBarStyles: IMessageBarStyles = {
root: { root: {
height: `${LayoutConstants.rowHeight}px`, height: `${LayoutConstants.rowHeight}px`,
overflow: "auto", overflow: "hidden",
flexDirection: "row",
}, },
}; };