feat: Allow <SizingWindow> to more easily handle non-flex aware children (#57254)

It's annoying for `<SizingWindow>` to assume that children are flex
aware and have either `flex-grow` or `flex-shink` set. Sometimes they
don't. This make it so then can opt-in to "block" mode and render more
reasonably.

static/app/components/stories/sizingWindow.tsx

@@ -3,12 +3,23 @@ import styled from '@emotion/styled';
 import NegativeSpaceContainer from 'sentry/components/container/negativeSpaceContainer';
 import {space} from 'sentry/styles/space';
 
-const SizingWindow = styled(NegativeSpaceContainer)`
+const SizingWindow = styled(NegativeSpaceContainer)<{display?: 'block' | 'flex'}>`
   border: 1px solid ${p => p.theme.yellow400};
   border-radius: ${p => p.theme.borderRadius};
 
   resize: both;
   padding: ${space(2)};
+
+  ${p =>
+    p.display === 'block'
+      ? `
+        display: block;
+        overflow: auto;
+      `
+      : `
+        display: flex;
+        overflow: hidden;
+      `}
 `;
 
 export default SizingWindow;

static/app/components/tabs/index.stories.tsx

@@ -51,17 +51,14 @@ export default storyBook(Tabs, story => {
     return (
       <Fragment>
         <p>When there are many items, they will overflow into a dropdown menu.</p>
-        <SizingWindow style={{height: '210px', width: '400px'}}>
-          {/* The inner <div> is needed because SizingWindow has overflow:hidden */}
-          <div style={{height: '100%', width: '100%'}}>
-            <Tabs defaultValue="two">
-              <TabList>
-                {tabs.map(tab => (
-                  <TabList.Item key={tab.key}>{tab.label}</TabList.Item>
-                ))}
-              </TabList>
-            </Tabs>
-          </div>
+        <SizingWindow display="block" style={{height: '210px', width: '400px'}}>
+          <Tabs defaultValue="two">
+            <TabList>
+              {tabs.map(tab => (
+                <TabList.Item key={tab.key}>{tab.label}</TabList.Item>
+              ))}
+            </TabList>
+          </Tabs>
         </SizingWindow>
       </Fragment>
     );