fix: mobile mode

Author: kevinkim-ogp

packages/frontend/src/pages/AiBuilder/components/AIFormModalContent.tsx

@@ -108,7 +108,11 @@ export const AIFormModalContent = ({
           </Flex>
         </ModalBody>
         <ModalFooter>
-          <Flex justifyContent="space-between" alignItems="center" w="100%">
+          <Flex
+            justifyContent={isMobile ? 'flex-end' : 'space-between'}
+            alignItems="center"
+            w="100%"
+          >
             {!isMobile && (
               <Flex gap={1} alignItems="center" justifyContent="center">
                 <Text fontSize="xs" color="gray.500">

packages/frontend/src/pages/AiBuilder/components/ChatInterface/PromptInput.tsx

@@ -8,6 +8,7 @@ import {
 import { FaArrowCircleRight } from 'react-icons/fa'
 import { FaCircleStop } from 'react-icons/fa6'
 import { Box, Flex, Icon, Text, Textarea } from '@chakra-ui/react'
+import { useIsMobile } from '@opengovsg/design-system-react'
 
 import pairLogo from '@/assets/pair-logo.svg'
 import { ImageBox } from '@/components/FlowStepConfigurationModal/ChooseAndAddConnection/ConfigureExcelConnection'
@@ -29,6 +30,7 @@ export default function PromptInput({
   sendMessage,
   cancelStream,
 }: PromptInputProps) {
+  const isMobile = useIsMobile()
   const [input, setInput] = useState<string>('')
   const textareaRef = useRef<HTMLTextAreaElement>(null)
 
@@ -74,7 +76,7 @@ export default function PromptInput({
         w="full"
         minH={showIdeas ? '120px' : '50px'}
         height="auto"
-        mb={6}
+        mb={isMobile ? 0 : 6}
       >
         <Textarea
           ref={textareaRef}
@@ -157,12 +159,14 @@ export default function PromptInput({
         />
       )}
 
-      <Flex gap={1} alignItems="center" justify="center" mt={3}>
-        <Text fontSize="xs" color="gray.500">
-          Powered by{' '}
-        </Text>
-        <ImageBox imageUrl={pairLogo} boxSize={6} />
-      </Flex>
+      {!isMobile && (
+        <Flex gap={1} alignItems="center" justify="center" mt={3}>
+          <Text fontSize="xs" color="gray.500">
+            Powered by{' '}
+          </Text>
+          <ImageBox imageUrl={pairLogo} boxSize={6} />
+        </Flex>
+      )}
     </Box>
   )
 }

packages/frontend/src/pages/AiBuilder/components/IdeaButtons.tsx

@@ -25,10 +25,11 @@ export default function IdeaButtons({
         Try:
       </FormLabel>
       <Flex
-        flexDir="row"
+        flexDir={isMobile ? 'column' : 'row'}
         gap={2}
         justifyContent="space-between"
         flexWrap="wrap"
+        w={isMobile ? 'full' : 'auto'}
       >
         {ideas.map((idea) => (
           <Button
@@ -43,7 +44,7 @@ export default function IdeaButtons({
             onClick={() => onClick(idea)}
             px={isForm ? 2 : 3}
             minH={4}
-            w={isMobile ? 'calc(50% - 4px)' : 'auto'}
+            w={isMobile ? 'full' : 'auto'}
             flexShrink={0}
           >
             <TemplateIcon iconName={idea.icon} fontSize="1rem" />