fix: fix ui layout when in mobile mode (#16793)

web/app/components/base/chat/chat/answer/suggested-questions.tsx

@@ -3,6 +3,7 @@ import { memo } from 'react'
 import type { ChatItem } from '../../types'
 import { useChatContext } from '../context'
 import Button from '@/app/components/base/button'
+import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
 
 type SuggestedQuestionsProps = {
   item: ChatItem
@@ -11,6 +12,10 @@ const SuggestedQuestions: FC<SuggestedQuestionsProps> = ({
   item,
 }) => {
   const { onSend } = useChatContext()
+  const media = useBreakpoints()
+  const isMobile = media === MediaType.mobile
+  const klassName = `mr-1 mt-1 ${isMobile ? 'block overflow-hidden text-ellipsis' : ''} max-w-full shrink-0 last:mr-0`
+
   const {
     isOpeningStatement,
     suggestedQuestions,
@@ -25,7 +30,7 @@ const SuggestedQuestions: FC<SuggestedQuestionsProps> = ({
         <Button
           key={index}
           variant='secondary-accent'
-          className='mr-1 mt-1 max-w-full shrink-0 last:mr-0'
+          className={klassName}
           onClick={() => onSend?.(question)}
         >
           {question}