fix: restore attached panel scrolling for plugins

Author: beaussan

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;
     `,

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;

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])};
       }