fix: adjust buttons for different builder type

Author: kevinkim-ogp

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

@@ -102,6 +102,7 @@ export const AIFormModalContent = ({
                 onClick={(idea: AiChatIdea | AiFormIdea) =>
                   handleIdeaClick(idea)
                 }
+                builderType="form"
               />
             )}
           </Flex>

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

@@ -152,6 +152,7 @@ export default function PromptInput({
             // trigger resize after state update
             setTimeout(() => handleResize(), 0)
           }}
+          builderType="chat"
         />
       )}
 

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

@@ -8,10 +8,16 @@ import { AiChatIdea, AiFormIdea } from '../constants'
 interface IdeaButtonsProps {
   ideas: AiChatIdea[] | AiFormIdea[]
   onClick: (idea: AiChatIdea | AiFormIdea) => void
+  builderType: 'chat' | 'form'
 }
 
-export default function IdeaButtons({ ideas, onClick }: IdeaButtonsProps) {
+export default function IdeaButtons({
+  ideas,
+  onClick,
+  builderType,
+}: IdeaButtonsProps) {
   const isMobile = useIsMobile()
+  const isForm = builderType === 'form'
 
   return (
     <Flex flexDir="column">
@@ -36,13 +42,13 @@ export default function IdeaButtons({ ideas, onClick }: IdeaButtonsProps) {
               bgColor: 'interaction.sub-subtle.hover',
             }}
             onClick={() => onClick(idea)}
-            px={3}
+            px={isForm ? 2 : 3}
             minH={4}
             w={isMobile ? 'calc(50% - 4px)' : 'auto'}
             flexShrink={0}
           >
             <TemplateIcon iconName={idea.icon} fontSize="1rem" />
-            <Text textStyle="caption-1" ml="0.25rem">
+            <Text textStyle="caption-1" ml={isForm ? 0 : '0.25rem'}>
               {idea.label}
             </Text>
           </Button>