fix(usage overview): Correct overflows (#104566)

Fixes some overflows at smaller screen sizes with secondary nav open.

# usage overview table header
## before
<img width="1217" height="859" alt="Screenshot 2025-12-08 at 5 52 45 PM"
src="https://github.com/user-attachments/assets/a3794b02-b1fd-449b-aa1d-f627170f7b2a"
/>

## after 
<img width="1216" height="859" alt="Screenshot 2025-12-08 at 5 53 14 PM"
src="https://github.com/user-attachments/assets/eb4347e2-02c9-43cd-9ac7-c0c41e8f8e54"
/>


# header cards
## before 
<img width="1072" height="859" alt="Screenshot 2025-12-08 at 5 36 49 PM"
src="https://github.com/user-attachments/assets/8e969b92-3057-4c35-a8a4-aa484e781b3d"
/>

## after
<img width="1070" height="858" alt="Screenshot 2025-12-08 at 5 37 00 PM"
src="https://github.com/user-attachments/assets/434f3232-efe7-4c57-aaf4-05767e8a89a8"
/>


# table with gifts
## before
<img width="1215" height="858" alt="Screenshot 2025-12-08 at 5 56 31 PM"
src="https://github.com/user-attachments/assets/d5e422d7-1d36-458a-9e4a-e7da1990a602"
/>


## after
<img width="1214" height="861" alt="Screenshot 2025-12-08 at 5 56 44 PM"
src="https://github.com/user-attachments/assets/739e2aed-c6c9-4005-818f-7172ca415333"
/>

Author: isabellaenriquez

static/gsApp/views/subscriptionPage/headerCards/headerCards.tsx

@@ -1,6 +1,7 @@
 import {Grid} from 'sentry/components/core/layout';
 import ErrorBoundary from 'sentry/components/errorBoundary';
 import type {Organization} from 'sentry/types/organization';
+import {useNavContext} from 'sentry/views/nav/context';
 
 import type {Subscription} from 'getsentry/types';
 import {
@@ -77,6 +78,7 @@ function getCards(organization: Organization, subscription: Subscription) {
 function HeaderCards({organization, subscription}: HeaderCardsProps) {
   const isNewBillingUI = hasNewBillingUI(organization);
   const cards = getCards(organization, subscription);
+  const {isCollapsed: navIsCollapsed} = useNavContext();
 
   return (
     <ErrorBoundary mini>
@@ -86,7 +88,8 @@ function HeaderCards({organization, subscription}: HeaderCardsProps) {
           columns={{
             xs: '1fr',
             sm: `repeat(min(${cards.length}, 2), minmax(0, 1fr))`,
-            md: `repeat(${cards.length}, minmax(0, 1fr))`,
+            md: navIsCollapsed ? `repeat(${cards.length}, minmax(0, 1fr))` : undefined,
+            lg: `repeat(${cards.length}, minmax(0, 1fr))`,
           }}
           gap="xl"
           data-test-id="subscription-header-cards"

static/gsApp/views/subscriptionPage/usageOverview/components/actions.tsx

@@ -1,19 +1,31 @@
+import {useTheme} from '@emotion/react';
+
 import {Button} from 'sentry/components/core/button';
 import {LinkButton} from 'sentry/components/core/button/linkButton';
 import {Flex} from 'sentry/components/core/layout';
 import {DropdownMenu} from 'sentry/components/dropdownMenu';
 import {IconDownload, IconEllipsis, IconTable} from 'sentry/icons';
 import {t} from 'sentry/locale';
 import type {Organization} from 'sentry/types/organization';
+import useMedia from 'sentry/utils/useMedia';
 import {useNavContext} from 'sentry/views/nav/context';
 import {NavLayout} from 'sentry/views/nav/types';
 
 import {useCurrentBillingHistory} from 'getsentry/hooks/useCurrentBillingHistory';
 import trackGetsentryAnalytics from 'getsentry/utils/trackGetsentryAnalytics';
 
 function UsageOverviewActions({organization}: {organization: Organization}) {
-  const {layout: navLayout} = useNavContext();
+  const {layout: navLayout, isCollapsed: navIsCollapsed} = useNavContext();
   const isMobile = navLayout === NavLayout.MOBILE;
+  const theme = useTheme();
+  const shouldCollapseOnLargeScreen =
+    useMedia(
+      `(min-width: ${theme.breakpoints.lg}) and (max-width: ${theme.breakpoints.xl})`
+    ) && !navIsCollapsed;
+  const shouldCollapseOnMobile =
+    useMedia(`(max-width: ${theme.breakpoints.sm})`) && isMobile;
+
+  const shouldCollapseActions = shouldCollapseOnLargeScreen || shouldCollapseOnMobile;
 
   const {currentHistory, isPending, isError} = useCurrentBillingHistory();
   const hasBillingPerms = organization.access.includes('org:billing');
@@ -49,7 +61,7 @@ function UsageOverviewActions({organization}: {organization: Organization}) {
     },
   ];
 
-  if (isMobile) {
+  if (shouldCollapseActions) {
     return (
       <DropdownMenu
         triggerProps={{
@@ -70,7 +82,7 @@ function UsageOverviewActions({organization}: {organization: Organization}) {
   }
 
   return (
-    <Flex gap="lg" direction={{xs: 'column', sm: 'row'}}>
+    <Flex gap="lg" direction="row">
       {buttons.map(buttonInfo =>
         buttonInfo.to ? (
           <LinkButton

static/gsApp/views/subscriptionPage/usageOverview/components/table.tsx

@@ -145,7 +145,7 @@ export default UsageOverviewTable;
 
 const Table = styled('table')`
   display: grid;
-  grid-template-columns: auto max-content auto;
+  grid-template-columns: repeat(3, auto);
   background: ${p => p.theme.background};
   border-top: 1px solid ${p => p.theme.border};
   border-radius: 0 0 ${p => p.theme.borderRadius} ${p => p.theme.borderRadius};
@@ -160,10 +160,6 @@ const Table = styled('table')`
     grid-template-columns: subgrid;
     grid-column: 1 / -1;
   }
-
-  @media (max-width: ${p => p.theme.breakpoints.md}) {
-    grid-template-columns: repeat(3, auto);
-  }
 `;
 
 const TableHeaderRow = styled('tr')`

static/gsApp/views/subscriptionPage/usageOverview/components/tableRow.tsx

@@ -8,7 +8,7 @@ import {Container, Flex} from 'sentry/components/core/layout';
 import {Text} from 'sentry/components/core/text';
 import ProgressRing from 'sentry/components/progressRing';
 import {IconLock, IconWarning} from 'sentry/icons';
-import {t} from 'sentry/locale';
+import {t, tct} from 'sentry/locale';
 import {DataCategory} from 'sentry/types/core';
 import useMedia from 'sentry/utils/useMedia';
 
@@ -60,7 +60,7 @@ function UsageOverviewTableRow({
 }: UsageOverviewTableProps & (ChildProductRowProps | ParentProductRowProps)) {
   const theme = useTheme();
   const showPanelInline = useMedia(
-    `(max-width: ${theme.breakpoints[SIDE_PANEL_MIN_SCREEN_BREAKPOINT]})`
+    `(max-width: calc(${theme.breakpoints[SIDE_PANEL_MIN_SCREEN_BREAKPOINT]} - 1px))`
   );
   const [isHovered, setIsHovered] = useState(false);
   const showAdditionalSpendColumn =
@@ -288,8 +288,12 @@ function UsageOverviewTableRow({
                   ) : (
                     `${formattedUsage} / ${shouldFormatWithDisplayName ? formatCategoryQuantityWithDisplayName({dataCategory: billedCategory, quantity: prepaid, formattedQuantity: formattedPrepaid, subscription, options: {capitalize: false}}) : formattedPrepaid}`
                   )}
-                  {formattedFree && ` (${formattedFree} gifted)`}
                 </Text>
+                {formattedFree && (
+                  <Text size="xs">
+                    {tct(` ([formattedFree] gifted)`, {formattedFree})}
+                  </Text>
+                )}
               </Flex>
             </td>
             {showAdditionalSpendColumn && (