chore: update styles

opengovsg · Dec 24, 2024 · b973dac · b973dac
1 parent 8c961fa
commit b973dac
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 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
@@ -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
@@ -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
@@ -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
@@ -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 && (