fix: container would overflow in x direction; stepper as own row

City-of-Helsinki · Aug 16, 2023 · 02821cc · 02821cc
1 parent ce5da72
commit 02821cc
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 5 deletions.
diff --git a/frontend/benefit/applicant/src/components/applications/Applications.sc.ts b/frontend/benefit/applicant/src/components/applications/Applications.sc.ts
@@ -1,14 +1,17 @@
+import { respondAbove } from 'shared/styles/mediaQueries';
 import styled from 'styled-components';
 
 export const $PageHeader = styled.div`
-  display: flex;
+  display: block;
   justify-content: space-between;
   align-items: start;
   margin-bottom: ${(props) => props.theme.spacing.s};
   margin-top: ${(props) => props.theme.spacing.m};
-  & > div {
-    flex: 1 0 50%;
-  }
+  flex: 1 0 100%;
+
+  ${respondAbove('md')`
+    display: flex;
+  `};
 `;
 
 export const $HeaderItem = styled.div``;

diff --git a/frontend/benefit/applicant/src/components/applications/pageContent/PageContent.tsx b/frontend/benefit/applicant/src/components/applications/pageContent/PageContent.tsx
@@ -133,7 +133,12 @@ const PageContent: React.FC = () => {
   }
 
   return (
-    <Container data-testid={`step-${currentStep}`}>
+    <Container
+      data-testid={`step-${currentStep}`}
+      css={{
+        'grid-template-columns': 'repeat(auto-fit, minmax(180px, 1fr))',
+      }}
+    >
       <$PageHeader>
         <$HeaderItem>
           <$PageHeading>