AI/dify
1
0
Fork 0
mirror of https://git.mirrors.martin98.com/https://github.com/langgenius/dify.git synced 2025-08-12 06:49:03 +08:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Good Wood 2025-03-26 11:01:13 +08:00 committed by GitHub
parent 37134c5987
commit 71edaba9df
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 12 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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>

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

@ -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}