Make the ActionRequiredCardContainer a single column on mobile to pre…

…vent horizontal overflow
Sage-Bionetworks · Jan 23, 2025 · 106076b · 106076b
1 parent 25ccde8
commit 106076b
Showing 1 changed file with 3 additions and 0 deletions.
diff --git a/...ynapse-react-client/src/components/DownloadCart/ActionRequiredCard/ActionRequiredCard.tsx b/...ynapse-react-client/src/components/DownloadCart/ActionRequiredCard/ActionRequiredCard.tsx
@@ -29,6 +29,9 @@ const ActionRequiredCardContainer: StyledComponent<PaperProps> = styled(Paper, {
   alignItems: 'center',
   gridTemplateColumns: '160px auto 200px',
   gap: theme.spacing(4),
+  [theme.breakpoints.down('sm')]: {
+    gridTemplateColumns: '1fr', // Single column layout for mobile
+  },
 }))
 
 /**