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

web/app/components/base/chat/chat-with-history/chat-wrapper.tsx

@@ -188,7 +188,7 @@ const ChatWrapper = () => {
       return null
     if (welcomeMessage.suggestedQuestions && welcomeMessage.suggestedQuestions?.length > 0) {
       return (
-        <div className='flex h-[50vh] items-center justify-center px-4 py-12'>
+        <div className='flex min-h-[50vh] items-center justify-center px-4 py-12'>
           <div className='flex max-w-[720px] grow gap-4'>
             <AppIcon
               size='xl'
@@ -197,9 +197,11 @@ const ChatWrapper = () => {
               background={appData?.site.icon_background}
               imageUrl={appData?.site.icon_url}
             />
-            <div className='body-lg-regular grow rounded-2xl bg-chat-bubble-bg px-4 py-3 text-text-primary'>
-              <Markdown content={welcomeMessage.content} />
-              <SuggestedQuestions item={welcomeMessage} />
+            <div className='w-0 grow'>
+              <div className='body-lg-regular grow rounded-2xl bg-chat-bubble-bg px-4 py-3 text-text-primary'>
+                <Markdown content={welcomeMessage.content} />
+                <SuggestedQuestions item={welcomeMessage} />
+              </div>
             </div>
           </div>
         </div>

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}