Workflow Page markdown table scrollbar disappears

[mlzxdzl]

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.13

Cloud or Self Hosted

Self Hosted (Docker)

Steps to reproduce

In Workflow Page, When markdown table is too wide,causing the scrollbar to disappear and resulting in the data in the latter half not being displayed.

✔️ Expected Behavior

No response

❌ Actual Behavior

No response

[dosubot[bot]]

I found a similar open issue regarding a Markdown table being too wide and causing the scrollbar to disappear. The suggested solution is to modify the CSS for the table to ensure it is scrollable. You can update the overflow property in the CSS for tables from hidden to auto. Here is the modified CSS you should use:

.markdown-body table {
  border-spacing: 0;
  border-collapse: separate;
  display: block;
  max-width: 100%;
  overflow-x: auto;
  border: 1px solid var(--color-divider-regular);
  border-radius: 8px;
}

After updating markdown.scss, restart the frontend service using the command docker compose restart frontend. If the service name is different, check the correct service name using docker compose ps and replace frontend in your restart command. Additionally, clear your browser cache or refresh the page to ensure the changes take effect. If the issue persists, ensure that the changes in markdown.scss are saved correctly and that there are no syntax errors ^[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}

[mlzxdzl]

@dosu the overflow is auto,but the scrollbar still disappear

[dosubot[bot]]

Ensure that the CSS is correctly applied with the display property set to block, as this is necessary for the overflow-x: auto; property to function correctly and provide a horizontal scrollbar for wide tables. Verify that the CSS is implemented as follows:

.markdown-body table {
    border-spacing: 0;
    border-collapse: separate;
    display: block;
    max-width: 100%;
    overflow-x: auto;
    border: 1px solid var(--color-divider-regular);
    border-radius: 8px;
}

Additionally, check the list.tsx file to ensure that the overflow-x-auto class is correctly applied to the parent div of the table:

<div className='overflow-x-auto'>
  <table className={cn('mt-2 w-full min-w-[440px] border-collapse border-0')}>
    ...
  </table>
</div>

Make sure both the CSS and the JSX structure are correctly implemented in your application to resolve the issue ^[1][2].

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}

[mlzxdzl]

@dosu my css is like: .markdown-body table { border-spacing: 0; border-collapse: separate; display: block; width: -moz-max-content; width: max-content; max-width: 100%; overflow: auto; border: 1px solid var(--color-divider-regular); border-radius: 8px; } but the scrollbar still disappear

[dosubot[bot]]

To ensure the scrollbar appears for wide tables, you should specifically use overflow-x: auto instead of overflow: auto. This targets horizontal overflow, which is necessary for the scrollbar to appear when the table content exceeds the container's width. Update your CSS as follows:

.markdown-body table {
    border-spacing: 0;
    border-collapse: separate;
    display: block;
    width: -moz-max-content;
    width: max-content;
    max-width: 100%;
    overflow-x: auto; /* Change this line */
    border: 1px solid var(--color-divider-regular);
    border-radius: 8px;
}

Additionally, ensure that the parent container of the table has the overflow-x-auto class applied, as this helps manage horizontal scrolling in the JSX structure. If the issue persists, verify that there are no conflicting styles or JavaScript code affecting the table's layout ^[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}