unscrollable screen to display full text of long answer on mobile views

[bowenliang123]

Self Checks

• [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] Pleas do not modify this template :) and fill in all the required fields.

Dify version

0.5.6

Cloud or Self Hosted

Self Hosted (Source)

Steps to reproduce

• viewing long answer on mobile views

✔️ Expected Behavior

No response

❌ Actual Behavior

[dosubot[bot]]

🤖

Hey there, @bowenliang123! 😊 Great to see you diving into another challenge with us. How's everything going on your end?

Based on the information provided, it seems like you're experiencing an issue with the scrollability of long texts on mobile views in the self-hosted version 0.5.6 of Dify. This can be resolved by adjusting the CSS properties of the main container of your component to allow for vertical scrolling.

The main container should have a CSS class that sets the overflow-y property to auto or scroll, and a defined height or max-height. In the code you provided, the main container is wrapped with a <div> tag having the class rounded-xl border-[0.5px] border-gray-200 h-full flex flex-col overflow-auto. The overflow-auto class suggests that scrolling is already enabled for both horizontal and vertical overflow. However, if the scrolling does not work as expected on mobile views, you might need to ensure that the height (h-full) is effectively limiting the container's height within the viewport. Sometimes, h-full might not work as expected if the parent containers do not have a defined height.

Here's an example adjustment you can make:

1. Ensure the parent elements of the scrollable container have a defined height. This might involve setting the height of the HTML and body elements to 100%.

2. Adjust the CSS for the main container to ensure it is scrollable on mobile views. You might want to use Tailwind's responsive prefixes to apply different styles on different screen sizes.

/* Add this to your style.module.css if not already present */
.scrollableContainer {
  overflow-y: auto; /* Enable vertical scrolling */
  max-height: 90vh; /* Adjust based on your layout */
}

3. Apply the custom class to your main container:

return (<div className={`rounded-xl border-[0.5px] border-gray-200 flex flex-col ${s.scrollableContainer}`}>
    {/* Rest of your component */}
</div>);

4. Ensure that the rest of your layout supports scrolling by testing on various devices and adjusting the max-height as necessary.

This approach allows you to control the scrollability of the container more explicitly, especially on mobile devices where screen real estate is limited.

As for the current CSS styling applied to the main container in the mobile view of the Dify application, I wasn't able to find an answer within the repository. It's possible that the answer may be available elsewhere or I could have missed it. If you have more information about this, it would be helpful in providing a more accurate solution.

You can refer to the source code here for more details.

Sources

• web/app/components/app/log/list.tsx

About Dosu

This response is meant to be useful and save you time. It is not meant to be a precise solution, but rather a starting point for your own research.

Help me be more useful! Please leave a 👍 if this is helpful and 👎 if it is irrelevant.

If you want to continue the conversation, start your reply with @dosu-bot.

[bowenliang123]

cc @crazywoola

[dosubot[bot]]

Hi, @bowenliang123,

I'm helping the team manage their backlog and am marking this issue as stale. From what I understand, you reported that a screen is unscrollable on mobile views, preventing the full text of a long answer from being displayed. Dosubot responded with a detailed explanation and a suggested solution involving adjusting the CSS properties of the main container to allow for vertical scrolling. It seems like the issue has been resolved.

Could you please confirm if this issue is still relevant to the latest version of the repository? If it is, please let the team know by commenting on the issue. Otherwise, feel free to close the issue yourself, or it will be automatically closed in 7 days.

Thank you!

[bowenliang123]

Seems that it's somehow fixed in the latest releases.