From b973dac8f125700018047312094ac0da6bfdffab Mon Sep 17 00:00:00 2001
From: Ian Chen <ian@open.gov.sg>
Date: Tue, 24 Dec 2024 14:50:43 +0800
Subject: [PATCH] chore: update styles

---
 .../src/apps/tiles/actions/update-row/index.ts        | 10 +++++++---
 .../frontend/src/components/MultiCol.tsx/index.tsx    | 11 ++++++++---
 .../components/SelectCombobox/SelectCombobox.tsx      | 11 ++---------
 .../components/SingleSelect/components/SelectMenu.tsx |  2 +-
 4 files changed, 18 insertions(+), 16 deletions(-)

diff --git a/packages/backend/src/apps/tiles/actions/update-row/index.ts b/packages/backend/src/apps/tiles/actions/update-row/index.ts
index 01c514930..92dd53b1e 100644
--- a/packages/backend/src/apps/tiles/actions/update-row/index.ts
+++ b/packages/backend/src/apps/tiles/actions/update-row/index.ts
@@ -91,10 +91,14 @@ const action: IRawAction = {
           value: 'set',
           options: [
             { label: '=', value: 'set', description: 'Set as' },
-            { label: '+', value: 'add', description: 'Add by' },
-            { label: '-', value: 'subtract', description: 'Subtract by' },
+            { label: '+', value: 'add', description: 'Add by (numbers only)' },
+            {
+              label: '-',
+              value: 'subtract',
+              description: 'Subtract by (numbers only)',
+            },
           ],
-          customStyle: { flexBasis: '44px' },
+          customStyle: { flexBasis: '71px' },
         },
         {
           placeholder: 'Value',
diff --git a/packages/frontend/src/components/MultiCol.tsx/index.tsx b/packages/frontend/src/components/MultiCol.tsx/index.tsx
index 804e6fdb8..d0b1fd621 100644
--- a/packages/frontend/src/components/MultiCol.tsx/index.tsx
+++ b/packages/frontend/src/components/MultiCol.tsx/index.tsx
@@ -1,7 +1,7 @@
 import type { IFieldMultiRowMultiColSubField } from '@plumber/types'
 
 import { BiTrash } from 'react-icons/bi'
-import { Flex } from '@chakra-ui/react'
+import { Flex, useBreakpointValue } from '@chakra-ui/react'
 import { IconButton } from '@opengovsg/design-system-react'
 
 import InputCreator from '@/components/InputCreator'
@@ -25,11 +25,16 @@ export default function MultiCol(props: MultiColProps) {
     index,
     ...forwardedInputCreatorProps
   } = props
+
+  const isMobile = useBreakpointValue({ base: true, sm: false })
   return (
-    <Flex flexDir="row" gap={2}>
+    <Flex flexDir={isMobile ? 'column' : 'row'} gap={2}>
       {subFields.map((subF) => {
         return (
-          <div key={`${name}.${subF.key}`} style={subF.customStyle}>
+          <div
+            key={`${name}.${subF.key}`}
+            style={isMobile ? { flex: 1 } : subF.customStyle}
+          >
             <InputCreator
               schema={subF}
               namePrefix={name}
diff --git a/packages/frontend/src/components/SingleSelect/components/SelectCombobox/SelectCombobox.tsx b/packages/frontend/src/components/SingleSelect/components/SelectCombobox/SelectCombobox.tsx
index 93848dfd3..75e7597d5 100644
--- a/packages/frontend/src/components/SingleSelect/components/SelectCombobox/SelectCombobox.tsx
+++ b/packages/frontend/src/components/SingleSelect/components/SelectCombobox/SelectCombobox.tsx
@@ -99,14 +99,7 @@ export const SelectCombobox = forwardRef<HTMLInputElement>(
             direction="row"
             spacing="1rem"
             aria-disabled={isDisabled}
-            sx={{
-              ...styles.selected,
-              ...(!isSearchable && {
-                margin: 'auto',
-                pr: 0,
-                pl: 0,
-              }),
-            }}
+            sx={styles.selected}
             aria-hidden
           >
             {selectedItemMeta.icon ? (
@@ -135,7 +128,7 @@ export const SelectCombobox = forwardRef<HTMLInputElement>(
               'aria-expanded': !!isOpen,
             })}
           />
-          {isSearchable && <ToggleChevron />}
+          <ToggleChevron />
         </InputGroup>
         <ComboboxClearButton />
       </Flex>
diff --git a/packages/frontend/src/components/SingleSelect/components/SelectMenu.tsx b/packages/frontend/src/components/SingleSelect/components/SelectMenu.tsx
index 7419ec0f2..29f233249 100644
--- a/packages/frontend/src/components/SingleSelect/components/SelectMenu.tsx
+++ b/packages/frontend/src/components/SingleSelect/components/SelectMenu.tsx
@@ -37,7 +37,7 @@ export const SelectMenu = (): JSX.Element => {
           { suppressRefError: true },
         )}
         style={floatingStyles}
-        sx={{ ...styles.list, minWidth: '150px' }}
+        sx={{ ...styles.list, minWidth: '230px' }}
         zIndex="dropdown"
       >
         {isOpen && items.length > 0 && (