fix(ui): Improve layout responsiveness for smaller screens (#109173)

Hide overflowing tabs completely, add flex wrapping to explore tables,
web vitals browser list, and crons monitor header actions to prevent
layout overflow on smaller devices.

Author: priscilawebdev

static/app/components/core/tabs/tab.tsx

@@ -46,14 +46,14 @@ const StyledTabWrap = styled('li', {
   }
 
   &[aria-disabled] {
-    opacity: ${p => (p.overflowing ? 0 : 0.6)};
+    opacity: 0.6;
     cursor: default;
   }
 
   ${p =>
     p.overflowing &&
     css`
-      opacity: 0;
+      display: none;
       pointer-events: none;
     `}
 `;

static/app/components/core/tabs/tabList.tsx

@@ -118,8 +118,25 @@ function useOverflowTabs({
       element => element && observer.observe(element)
     );
 
+    // When tabs are hidden via `display: none`, IntersectionObserver can no
+    // longer detect them. If the container grows, those tabs would remain
+    // permanently hidden. Resetting overflow state when the container grows
+    // removes `display: none`, allowing the IO to re-evaluate all tabs.
+    let previousWidth = tabListRef.current?.getBoundingClientRect().width ?? 0;
+    const resizeObserver = new ResizeObserver(entries => {
+      const newWidth = entries[0]?.contentRect.width ?? 0;
+      if (newWidth > previousWidth) {
+        setOverflowTabs([]);
+      }
+      previousWidth = newWidth;
+    });
+    if (tabListRef.current) {
+      resizeObserver.observe(tabListRef.current);
+    }
+
     return () => {
       observer.disconnect();
+      resizeObserver.disconnect();
       setOverflowTabs([]);
     };
   }, [tabListRef, tabItemsRef, disabled, theme]);

static/app/components/layouts/thirds.tsx

@@ -88,6 +88,12 @@ export const HeaderActions = styled('div')`
     width: max-content;
     margin-bottom: ${space(2)};
   }
+
+  @media (max-width: ${p => p.theme.breakpoints.sm}) {
+    width: 100%;
+    min-width: 100%;
+    max-width: 100%;
+  }
 `;
 
 /**

static/app/views/explore/tables/index.tsx

@@ -107,7 +107,7 @@ export function ExploreTables(props: ExploreTablesProps) {
 
   return (
     <Fragment>
-      <Flex justify="between" marginBottom="md">
+      <Flex justify="between" marginBottom="md" gap="md" wrap="wrap">
         <Tabs value={props.tab} onChange={props.setTab} size="sm">
           <TabList variant="floating">
             <TabList.Item key={Tab.SPAN}>{t('Span Samples')}</TabList.Item>

static/app/views/insights/browser/webVitals/components/webVitalDescription.tsx

@@ -142,31 +142,27 @@ export function WebVitalDescription({score, value, webVital}: Props) {
           webVital: webVital.toUpperCase(),
         })}
       </Stack>
-      <SupportedBrowsers>
-        {Object.values(Browser).map(browser => (
-          <Flex align="center" gap="md" key={browser}>
-            {vitalSupportedBrowsers[
-              WebVital[webVital.toUpperCase() as Uppercase<typeof webVital>]
-            ]?.includes(browser) ? (
-              <IconCheckmark variant="success" size="sm" />
-            ) : (
-              <IconClose variant="danger" size="sm" />
-            )}
-            {browser}
-          </Flex>
-        ))}
-      </SupportedBrowsers>
-      <ReferenceLink>{link}</ReferenceLink>
+      <Stack gap="xl">
+        <Flex display="inline-flex" wrap="wrap" gap="xl">
+          {Object.values(Browser).map(browser => (
+            <Flex align="center" gap="md" key={browser}>
+              {vitalSupportedBrowsers[
+                WebVital[webVital.toUpperCase() as Uppercase<typeof webVital>]
+              ]?.includes(browser) ? (
+                <IconCheckmark variant="success" size="sm" />
+              ) : (
+                <IconClose variant="danger" size="sm" />
+              )}
+              {browser}
+            </Flex>
+          ))}
+        </Flex>
+        <ReferenceLink>{link}</ReferenceLink>
+      </Stack>
     </div>
   );
 }
 
-const SupportedBrowsers = styled('div')`
-  display: inline-flex;
-  gap: ${space(2)};
-  margin-bottom: ${space(2)};
-`;
-
 const ReferenceLink = styled('div')`
   margin-bottom: ${space(2)};
 `;

static/app/views/insights/crons/components/monitorHeaderActions.tsx

@@ -1,5 +1,5 @@
 import {Button, LinkButton, type ButtonProps} from '@sentry/scraps/button';
-import {Grid} from '@sentry/scraps/layout';
+import {Flex} from '@sentry/scraps/layout';
 import {Link} from '@sentry/scraps/link';
 
 import {deleteMonitor, updateMonitor} from 'sentry/actionCreators/monitors';
@@ -82,7 +82,7 @@ function MonitorHeaderActions({monitor, orgSlug, onUpdate}: Props) {
   }
 
   return (
-    <Grid flow="column" align="center" gap="md">
+    <Flex direction="row" align="center" gap="md" wrap="wrap">
       <FeedbackButton />
       <Button
         size="sm"
@@ -131,7 +131,7 @@ function MonitorHeaderActions({monitor, orgSlug, onUpdate}: Props) {
       >
         {t('Edit Monitor')}
       </LinkButton>
-    </Grid>
+    </Flex>
   );
 }