diff --git a/packages/devtools-a11y/src/core/styles/styles.ts b/packages/devtools-a11y/src/core/styles/styles.ts index 64b40104..4189ba63 100644 --- a/packages/devtools-a11y/src/core/styles/styles.ts +++ b/packages/devtools-a11y/src/core/styles/styles.ts @@ -64,6 +64,7 @@ function createA11yPanelStyles(theme: TanStackDevtoolsTheme) { root: css` height: 100%; + min-height: 0; display: flex; flex-direction: column; overflow: hidden; @@ -168,6 +169,7 @@ function createA11yPanelStyles(theme: TanStackDevtoolsTheme) { content: css` flex: 1; + min-height: 0; overflow-y: auto; padding: 16px; `, diff --git a/packages/devtools-ui/src/styles/use-styles.ts b/packages/devtools-ui/src/styles/use-styles.ts index 6a0afdd2..837fea99 100644 --- a/packages/devtools-ui/src/styles/use-styles.ts +++ b/packages/devtools-ui/src/styles/use-styles.ts @@ -677,6 +677,10 @@ const stylesFactory = (theme: TanStackDevtoolsTheme) => { }, mainPanel: { panel: (withPadding: boolean) => css` + display: flex; + flex-direction: column; + min-width: 0; + min-height: 0; padding: ${withPadding ? tokens.size[3] : 0}; background: ${t(colors.gray[50], colors.darkGray[700])}; overflow-y: auto; diff --git a/packages/devtools/src/styles/use-styles.ts b/packages/devtools/src/styles/use-styles.ts index befbd41b..b4bcba74 100644 --- a/packages/devtools/src/styles/use-styles.ts +++ b/packages/devtools/src/styles/use-styles.ts @@ -256,6 +256,8 @@ const stylesFactory = (theme: DevtoolsStore['settings']['theme']) => { }, devtoolsPanel: css` display: flex; + min-width: 0; + min-height: 0; font-size: ${fontSize.sm}; font-family: ${fontFamily.sans}; background-color: ${t(colors.white, colors.darkGray[700])}; @@ -429,12 +431,21 @@ const stylesFactory = (theme: DevtoolsStore['settings']['theme']) => { `, tabContent: css` transition: all 0.2s ease-in-out; + display: flex; + flex: 1 1 auto; + flex-direction: column; + min-width: 0; + min-height: 0; + overflow: hidden; width: 100%; height: 100%; `, pluginsTabPanel: css` display: flex; + flex: 1 1 auto; flex-direction: row; + min-width: 0; + min-height: 0; width: 100%; height: 100%; overflow: hidden; @@ -503,9 +514,28 @@ const stylesFactory = (theme: DevtoolsStore['settings']['theme']) => { } `, pluginsTabContent: css` + display: flex; + flex-direction: column; + flex: 1 1 auto; + min-width: 0; + min-height: 0; + overflow: hidden; width: 100%; height: 100%; + & > * { + flex: 1 1 auto; + min-width: 0; + min-height: 0; + height: 100%; + } + + & > * > * { + min-width: 0; + min-height: 0; + height: 100%; + } + &:not(:last-child) { border-right: 5px solid ${t(colors.purple[200], colors.purple[800])}; }