[SIDE-DRAWER-31]: Mobile repsonsiveness (#1016)

kevinkim-ogp · kevinkim-ogp · commit 5ed800c014fb · 2025-05-29T15:06:33.000+08:00
## TL;DR This PR addresses issues with mobile responsiveness in the UI revamp: * Vertical stack for test result, save step, and check step buttons * Text overflowing buttons when in small screens: * Check step again * Save without checking * Sets a minimum width for step headers to prevent them from becoming too small in small screens ## How to test? - [ ] Test result, save, and check step buttons should be stacked on mobile - [ ] Test result, save, and check step buttons remain in a single row in non-mobile - [ ] Long text is truncated to single-line with ellipsis when in small screens - [ ] Empty trigger header - [ ] Check step / Check step again - [ ] Save / Save without checking ## Screenshots ### Stacked buttons in small screens <img width="387" alt="Screenshot 2025-05-28 at 5 45 27 PM" src="https://github.com/user-attachments/assets/b1e80182-3828-4984-985e-f4751fa51208" /> <img width="387" alt="Screenshot 2025-05-28 at 5 45 58 PM" src="https://github.com/user-attachments/assets/9a0aab79-e959-4ecb-ad40-737dceca7e82" /> <img width="387" alt="Screenshot 2025-05-28 at 5 46 17 PM" src="https://github.com/user-attachments/assets/2fc85f8a-9784-4832-bec9-76490fec50a1" /> https://github.com/user-attachments/assets/18322d4d-2cdc-4810-aa02-e7ccb7dfdc91 ### Minimum width for step headers to prevent them from becoming too small in small screens https://github.com/user-attachments/assets/d89ecf31-99d1-46e1-87b1-bd78c1b9d70f <img width="389" alt="Screenshot 2025-05-28 at 5 43 27 PM" src="https://github.com/user-attachments/assets/bbc189c3-b8df-49a8-b36c-4a39c008259f" />
diff --git a/packages/frontend/src/components/Editor/constants.ts b/packages/frontend/src/components/Editor/constants.ts
@@ -2,3 +2,5 @@ export const EDITOR_MARGIN_TOP_NUM = 61
 export const EDITOR_MARGIN_TOP = `${EDITOR_MARGIN_TOP_NUM}px`
 export const EDITOR_MAX_HEIGHT = `calc(100vh - ${EDITOR_MARGIN_TOP})`
 export const EDITOR_RIGHT_DRAWER_WIDTH = '60%'
+
+export const MIN_FLOW_STEP_WIDTH = '320px'
diff --git a/packages/frontend/src/components/EmptyFlowStepHeader/index.tsx b/packages/frontend/src/components/EmptyFlowStepHeader/index.tsx
@@ -46,7 +46,7 @@ export default function EmptyFlowStepHeader(
         boxSize={6}
         color="interaction.sub.default"
       />
-      <Text textStyle="subhead-1">
+      <Text textStyle="subhead-1" noOfLines={1}>
         {isTrigger ? 'Choose how you want your workflow to start' : 'Add step'}
       </Text>
     </Flex>
diff --git a/packages/frontend/src/components/FlowStep/FlowStepWrapper.tsx b/packages/frontend/src/components/FlowStep/FlowStepWrapper.tsx
@@ -1,12 +1,15 @@
 import { Flex } from '@chakra-ui/react'
 import { useIsMobile } from '@opengovsg/design-system-react'
 
+import { MIN_FLOW_STEP_WIDTH } from '@/components/Editor/constants'
+
 interface FlowStepWrapperProps {
   children: React.ReactNode
+  isNested?: boolean
 }
 
 export default function FlowStepWrapper(props: FlowStepWrapperProps) {
-  const { children } = props
+  const { children, isNested } = props
   const isMobile = useIsMobile()
 
   return (
@@ -15,6 +18,7 @@ export default function FlowStepWrapper(props: FlowStepWrapperProps) {
       display={isMobile ? 'block' : 'flex'}
       flexDir="column"
       w="100%"
+      minW={isNested ? '100%' : MIN_FLOW_STEP_WIDTH}
     >
       {children}
     </Flex>
diff --git a/packages/frontend/src/components/FlowStep/index.tsx b/packages/frontend/src/components/FlowStep/index.tsx
@@ -168,7 +168,7 @@ export default function FlowStep(
   }
 
   return (
-    <FlowStepWrapper>
+    <FlowStepWrapper isNested={isNested}>
       {!app || !selectedActionOrTrigger ? (
         <EmptyFlowStepHeader
           isNested={isNested}
diff --git a/packages/frontend/src/components/FlowStepGroup/index.tsx b/packages/frontend/src/components/FlowStepGroup/index.tsx
@@ -6,6 +6,8 @@ import { Box, Flex, Icon, Text } from '@chakra-ui/react'
 import { EditorContext } from '@/contexts/Editor'
 import { getFlowStepHeaderWidth, getToolboxIcon } from '@/helpers/editor'
 
+import { MIN_FLOW_STEP_WIDTH } from '../Editor/constants'
+
 import Error from './Content/Error'
 import IfThen from './Content/IfThen'
 import { flowStepGroupStyles } from './styles'
@@ -31,12 +33,17 @@ export default function FlowStepGroup(props: FlowStepGroupProps) {
   }, [groupedSteps])
 
   return (
-    <Flex w="100%" alignItems="center" justifyContent="center">
+    <Flex
+      w="100%"
+      alignItems="center"
+      justifyContent={isDrawerOpen ? 'flex-start' : 'center'}
+    >
       {/* FIXME (kevinkim-ogp): above is a temporary wrapper to ensure the flow step group is centered when drawer is closed */}
       <Flex
         {...flowStepGroupStyles.container}
         display={isMobile ? 'block' : 'flex'}
         w={getFlowStepHeaderWidth(isDrawerOpen, isMobile)}
+        minW={MIN_FLOW_STEP_WIDTH}
       >
         <Box {...flowStepGroupStyles.header} w="100%">
           <Flex
diff --git a/packages/frontend/src/components/FlowStepTestController/index.tsx b/packages/frontend/src/components/FlowStepTestController/index.tsx
@@ -5,9 +5,9 @@ import { useFormContext } from 'react-hook-form'
 import { BiChevronDown, BiChevronUp } from 'react-icons/bi'
 import {
   Box,
-  Flex,
+  Grid,
+  GridItem,
   HStack,
-  Stack,
   Text,
   Tooltip,
   VStack,
@@ -91,6 +91,7 @@ export default function FlowStepTestController(
     allApps,
     currentTestExecutionStep,
     readOnly,
+    isMobile,
     isTestExecuting,
     testExecutionSteps,
     varInfoMap,
@@ -204,14 +205,20 @@ export default function FlowStepTestController(
         isReadOnly={readOnly}
       >
         <Button
-          variant={infoBoxVariant === 'unstyled' ? undefined : 'clear'}
+          variant={
+            infoBoxVariant === 'unstyled'
+              ? undefined
+              : isMobile
+              ? 'outline'
+              : 'clear'
+          }
           onClick={handleSaveAndTest}
           isLoading={isTestExecuting}
           colorScheme={infoBoxVariant === 'unstyled' ? 'primary' : 'black'}
           size="sm"
           isDisabled={!isValid || readOnly}
         >
-          Check step again
+          <Text noOfLines={1}>Check step again</Text>
         </Button>
       </CheckStepTooltip>
     ),
@@ -239,22 +246,39 @@ export default function FlowStepTestController(
           />
         </VStack>
       )}
-      <Stack {...flowStepTestControllerStyles.container} ref={containerRef}>
-        <VStack w="100%">
-          {shouldShowTestResults ? (
-            <VStack w="100%">
-              <HStack w="100%">
-                <Infobox
-                  {...flowStepTestControllerStyles.testedInfobox}
-                  variant={infoBoxVariant}
-                  borderBottomRadius={isTestResultOpen ? 0 : undefined}
-                  icon={infoBoxVariant === 'unstyled' ? <></> : null}
+      <VStack
+        {...flowStepTestControllerStyles.container}
+        ref={containerRef}
+        w="100%"
+      >
+        {shouldShowTestResults ? (
+          <VStack w="100%">
+            <HStack w="100%">
+              <Infobox
+                {...flowStepTestControllerStyles.testedInfobox}
+                variant={infoBoxVariant}
+                borderBottomRadius={isTestResultOpen ? 0 : undefined}
+                icon={infoBoxVariant === 'unstyled' ? <></> : null}
+              >
+                <Grid
+                  justifyContent="space-between"
+                  alignItems="center"
+                  w="100%"
+                  templateAreas={{
+                    base: `
+                      "test-result"
+                      "save-button"
+                      "check-button"
+                    `,
+                    md: `"test-result save-button check-button"`,
+                  }}
+                  gridTemplateColumns={{
+                    base: '1fr',
+                    md: '1fr auto auto',
+                  }}
+                  rowGap={2}
                 >
-                  <Flex
-                    justifyContent="space-between"
-                    alignItems="center"
-                    w="100%"
-                  >
+                  <GridItem area="test-result">
                     {isIfThenStep && isLastTestExecutionCurrent ? (
                       // NOTE: special handling for If-then
                       // do not need button as there are no variables to display
@@ -275,84 +299,94 @@ export default function FlowStepTestController(
                         }
                         isDisabled={isTestExecuting}
                       >
-                        <Text color="base.content.default">{infoBoxText}</Text>
+                        <Text
+                          color="base.content.default"
+                          noOfLines={1}
+                          textAlign="left"
+                        >
+                          {infoBoxText}
+                        </Text>
                         {!isTestExecuting && (
                           <Box ml={2} color="base.content.default">
                             {getChevronIcon()}
                           </Box>
                         )}
                       </Button>
                     )}
-                    {shouldShowSaveButton ? (
-                      <Flex gap={2}>
+                  </GridItem>
+                  {shouldShowSaveButton ? (
+                    <>
+                      <GridItem area="save-button">
                         <Button
-                          variant="clear"
+                          variant={isMobile ? 'outline' : 'clear'}
                           size="sm"
                           colorScheme="black"
                           onClick={handleSave}
                           isDisabled={!isLastTestExecutionCurrent && !isDirty}
+                          mr={2}
                         >
-                          {!isLastTestExecutionCurrent && !isDirty
-                            ? 'Saved'
-                            : 'Save without checking'}
+                          <Text noOfLines={1}>
+                            {!isLastTestExecutionCurrent && !isDirty
+                              ? 'Saved'
+                              : 'Save without checking'}
+                          </Text>
                         </Button>
+                      </GridItem>
+                      <GridItem area="check-button">
                         {CheckAgainButton}
-                      </Flex>
-                    ) : (
-                      CheckAgainButton
-                    )}
-                  </Flex>
-                </Infobox>
-              </HStack>
-              <TestResult
-                step={step}
-                selectedActionOrTrigger={selectedActionOrTrigger}
-                variables={testVariables}
-                isMock={currentTestExecutionStep?.metadata?.isMock}
-                isOpen={isTestResultOpen}
-                isIfThenStep={isIfThenStep}
-              />
-            </VStack>
-          ) : (
-            <VStack w="100%" gap={2}>
-              {lastErrorDetails && (
-                <Box w="100%">
-                  <ErrorResult
-                    errorDetails={lastErrorDetails}
-                    isTestRun={true}
-                  />
-                </Box>
+                      </GridItem>
+                    </>
+                  ) : (
+                    <GridItem area="check-button">{CheckAgainButton}</GridItem>
+                  )}
+                </Grid>
+              </Infobox>
+            </HStack>
+            <TestResult
+              step={step}
+              selectedActionOrTrigger={selectedActionOrTrigger}
+              variables={testVariables}
+              isMock={currentTestExecutionStep?.metadata?.isMock}
+              isOpen={isTestResultOpen}
+              isIfThenStep={isIfThenStep}
+            />
+          </VStack>
+        ) : (
+          <VStack w="100%" gap={2}>
+            {lastErrorDetails && (
+              <Box w="100%">
+                <ErrorResult errorDetails={lastErrorDetails} isTestRun={true} />
+              </Box>
+            )}
+            <HStack w="100%" justifyContent="flex-end">
+              {!step.webhookUrl && (
+                <Button
+                  isDisabled={readOnly || isSaving || !isDirty}
+                  isLoading={isSaving}
+                  variant="clear"
+                  onClick={handleSave}
+                >
+                  {isDirty ? 'Save' : 'Saved'}
+                </Button>
               )}
-              <HStack w="100%" justifyContent="flex-end">
-                {!step.webhookUrl && (
-                  <Button
-                    isDisabled={readOnly || isSaving || !isDirty}
-                    isLoading={isSaving}
-                    variant="clear"
-                    onClick={handleSave}
-                  >
-                    {isDirty ? 'Save' : 'Saved'}
-                  </Button>
-                )}
-                <CheckStepTooltip
-                  hasDeletedVars={hasDeletedVars}
-                  isDisabled={shouldAllowCheckStep}
-                  isReadOnly={readOnly}
+              <CheckStepTooltip
+                hasDeletedVars={hasDeletedVars}
+                isDisabled={shouldAllowCheckStep}
+                isReadOnly={readOnly}
+              >
+                <Button
+                  onClick={handleSaveAndTest}
+                  data-test="flow-substep-continue-button"
+                  isDisabled={!shouldAllowCheckStep}
+                  isLoading={isTestExecuting}
                 >
-                  <Button
-                    onClick={handleSaveAndTest}
-                    data-test="flow-substep-continue-button"
-                    isDisabled={!shouldAllowCheckStep}
-                    isLoading={isTestExecuting}
-                  >
-                    Check step
-                  </Button>
-                </CheckStepTooltip>
-              </HStack>
-            </VStack>
-          )}
-        </VStack>
-      </Stack>
+                  Check step
+                </Button>
+              </CheckStepTooltip>
+            </HStack>
+          </VStack>
+        )}
+      </VStack>
     </>
   )
 }
diff --git a/packages/frontend/src/components/FlowStepTestController/styles.ts b/packages/frontend/src/components/FlowStepTestController/styles.ts
@@ -9,6 +9,7 @@ export const flowStepTestControllerStyles = {
     borderTop: '1px solid',
     borderTopColor: 'base.divider.medium',
     bg: 'white',
+    backgroundClip: 'border-box',
     position: 'sticky' as PositionProps['position'],
     bottom: 0,
     zIndex: 1,

Original file line number	Diff line number	Diff line change
`@@ -168,7 +168,7 @@ export default function FlowStep(`
`168`	`168`	`}`
`169`	`169`
`170`	`170`	`return (`
`171`		`- <FlowStepWrapper>`
	`171`	`+ <FlowStepWrapper isNested={isNested}>`
`172`	`172`	`{!app \|\| !selectedActionOrTrigger ? (`
`173`	`173`	`<EmptyFlowStepHeader`
`174`	`174`	`isNested={isNested}`