refactor(app): make deck config section responsive (#14025)

* refactor(app): make deck config section responsive
Opentrons · Nov 20, 2023 · 9ffbf62 · 9ffbf62
1 parent a98c6ee
commit 9ffbf62
Showing 1 changed file with 14 additions and 4 deletions.
diff --git a/app/src/organisms/DeviceDetailsDeckConfiguration/index.tsx b/app/src/organisms/DeviceDetailsDeckConfiguration/index.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
+import { css } from 'styled-components'
 
 import {
   ALIGN_CENTER,
@@ -12,7 +13,6 @@ import {
   Flex,
   JUSTIFY_SPACE_BETWEEN,
   Link,
-  SIZE_5,
   SPACING,
   TYPOGRAPHY,
 } from '@opentrons/components'
@@ -162,7 +162,7 @@ export function DeviceDetailsDeckConfiguration({
               {t('deck_configuration_is_not_available_when_robot_is_busy')}
             </Banner>
           ) : null}
-          <Flex gridGap={SPACING.spacing40}>
+          <Flex css={DECK_CONFIG_SECTION_STYLE}>
             <Flex
               // eslint-disable-next-line @typescript-eslint/restrict-template-expressions
               marginLeft={`-${SPACING.spacing32}`}
@@ -197,7 +197,7 @@ export function DeviceDetailsDeckConfiguration({
                     backgroundColor={COLORS.fundamentalsBackground}
                     gridGap={SPACING.spacing60}
                     padding={SPACING.spacing8}
-                    width={SIZE_5}
+                    width="100%"
                     css={TYPOGRAPHY.labelRegular}
                   >
                     <StyledText>
@@ -213,7 +213,7 @@ export function DeviceDetailsDeckConfiguration({
                   backgroundColor={COLORS.fundamentalsBackground}
                   gridGap={SPACING.spacing60}
                   padding={SPACING.spacing8}
-                  width={SIZE_5}
+                  width="100%"
                   css={TYPOGRAPHY.labelRegular}
                 >
                   <StyledText>{t('no_deck_fixtures')}</StyledText>
@@ -226,3 +226,13 @@ export function DeviceDetailsDeckConfiguration({
     </>
   )
 }
+
+const DECK_CONFIG_SECTION_STYLE = css`
+  flex-direction: ${DIRECTION_ROW};
+  grid-gap: ${SPACING.spacing40};
+  @media screen and (max-width: 1024px) {
+    flex-direction: ${DIRECTION_COLUMN};
+    align-items: ${ALIGN_CENTER};
+    grid-gap: ${SPACING.spacing32};
+  }
+`