dify Mobile access cannot scroll

Self Checks

[x] This is only for bug report, if you would like to ask a question, please head to Discussions.
[x] I have searched for existing issues search for existing issues, including closed ones.
[x] I confirm that I am using English to submit this report (我已阅读并同意 Language Policy).
[x] [FOR CHINESE USERS] 请务必使用英文提交 Issue，否则会被关闭。谢谢！:）
[x] Please do not modify this template :) and fill in all the required fields.

Dify version

1.0.1

Cloud or Self Hosted

Self Hosted (Docker)

Steps to reproduce

Use a mobile browser to access public links, such as: http://10.0.202.91/chat/xxxxxxxxx Although the page can be opened, the scrollbar is missing during the conversation, and the entire dialog box cannot be scrolled.

✔️ Expected Behavior

Under normal circumstances, there is a scrollbar where I can scroll up and down to view some conversation records

❌ Actual Behavior

As shown in the picture, I am unable to scroll down to view the latest reply content while having a conversation. I am sure this is a bug on the mobile device...

Mar 15 '25 12:03 rechardwang

I found a similar open issue regarding the inability to scroll on mobile devices in Dify version 1.0.1. The suggested solution is to add the CSS class overflow-y-scroll to the chat container. This should enable proper scrolling functionality and make the input field visible ^[1].

To continue talking to Dosu, mention @dosu.

^{Help Dosu learn! Give it feedback: Great Response | Irrelevant Answer | Incorrect Sources | Too Verbose | Hallucination | Bug Report | Other}

Mar 15 '25 12:03 dosubot[bot]

I deployed using Docker, how do I add this CSS? I can go into the container to modify some content, but I don't know which files to modify. If there is a clear fix plan, please let me know so that I can temporarily fix this bug in the container first

Mar 15 '25 13:03 rechardwang

To fix the scrolling issue on mobile devices in your Docker-deployed environment, you need to modify the CSS class in the chat container. Here's how you can do it:

Access the Docker container where the Dify application is running. You can do this by executing the following command in your terminal:
```
docker exec -it <container_name> /bin/sh
```
Replace <container_name> with the name of your Docker container.
Navigate to the file index.tsx located at web/app/components/base/chat/embedded-chatbot/ within the container.
Open the file and locate the div element responsible for the chat container. Modify the class name from overflow-y-auto to overflow-y-scroll. The line should look like this:
```
<div className={cn('grow flex flex-col overflow-y-scroll', isMobile && '!h-[calc(100vh_-_3rem)] bg-chatbot-bg rounded-2xl')}>
```
Save the changes and exit the container.
Rebuild the Docker image for the web component and restart the containers to apply the changes. You can do this by running:
```
docker-compose down
docker-compose up -d
```

This should resolve the scrolling issue on mobile devices ^[1].

To continue talking to Dosu, mention @dosu.

^{Help Dosu learn! Give it feedback: Great Response | Irrelevant Answer | Incorrect Sources | Too Verbose | Hallucination | Bug Report | Other}

Mar 15 '25 13:03 dosubot[bot]

I entered the container docker-web-1, But I couldn't find this directory: web/app/components/base/chat/embedded-chatbot

To fix the scrolling issue on mobile devices in your Docker-deployed environment, you need to modify the CSS class in the chat container. Here's how you can do it:

Access the Docker container where the Dify application is running. You can do this by executing the following command in your terminal: docker exec -it <container_name> /bin/sh

Replace <container_name> with the name of your Docker container.

Navigate to the file index.tsx located at web/app/components/base/chat/embedded-chatbot/ within the container.

Open the file and locate the div element responsible for the chat container. Modify the class name from overflow-y-auto to overflow-y-scroll. The line should look like this:

Save the changes and exit the container.

Rebuild the Docker image for the web component and restart the containers to apply the changes. You can do this by running: docker-compose down docker-compose up -d

This should resolve the scrolling issue on mobile devices [1].

To continue talking to Dosu, mention @dosu.

Help Dosu learn! Give it feedback: Great Response | Irrelevant Answer | Incorrect Sources | Too Verbose | Hallucination | Bug Report | Other