dify Markdown table too wide, scrollbar disappears, data in the latter half not displayed.

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

The Markdown table is too wide, causing the scrollbar to disappear and resulting in the data in the latter half not being displayed.
llm output data :

"下面是2025年1月山东地区的电价详情：\n\n| 电压等级 | 代理购电价格（元） | 容量补偿电价（元） | 上网线损费用（元） | 系统运行费用（元） | 政府性基金及附加（元） | 输配电价（元） | 需量电价（元） | 容量电价（元） | 尖峰时段电价（元） | 高峰时段电价（元） | 平时段电价（元） | 低谷时段电价（元） | 深谷时段电价（元） |\n| --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- |\n| 不满1千伏 | 0.4003 | 0.0705 | 0.0122 | 0.0057 | 0.0272 | 0.2219 | - | - | 1.2669 | 1.1139 | 0.7568 | 0.3998 | 0.2977 |\n| 1-10千伏 | 0.4003 | 0.0705 | 0.0122 | 0.0057 | 0.0272 | 0.2069 | - | - | 1.2519 | 1.0989 | 0.7418 | 0.3848 | 0.2827 |\n| 35千伏及以上 | 0.4003 | 0.0705 | 0.0122 | 0.0057 | 0.0272 | 0.1919 | - | - | 1.2369 | 1.0839 | 0.7268 | 0.3698 | 0.2677 |\n| 1-10千伏 (两部制) | 0.4003 | 0.0705 | 0.0122 | 0.0057 | 0.0272 | 0.1491 | 38.4 | 24.0 | 1.1941 | 1.0411 | 0.684 | 0.327 | 0.2249 |\n| 35-110千伏以下 (两部制) | 0.4003 | 0.0705 | 0.0122 | 0.0057 | 0.0272 | 0.1341 | 35.2 | 22.0 | 1.1791 | 1.0261 | 0.669 | 0.312 | 0.2099 |\n| 110-220千伏以下 (两部制) | 0.4003 | 0.0705 | 0.0122 | 0.0057 | 0.0272 | 0.1191 | 35.2 | 22.0 | 1.1641 | 1.0111 | 0.654 | 0.297 | 0.1949 |\n| 220千伏及以上 (两部制) | 0.4003 | 0.0705 | 0.0122 | 0.0057 | 0.0272 | 0.1041 | 32.0 | 20.0 | 1.1491 | 0.9961 | 0.639 | 0.282 | 0.1799 |\n\n以上信息为不同电压等级和工商业类型的电价详情。如需了解更详细的信息，请告知具体的电压等级和工商业类型。"

✔️ Expected Behavior

❌ Actual Behavior

Mar 12 '25 03:03 suntao2015005848

To address the issue of a Markdown table being too wide and causing the scrollbar to disappear in your self-hosted Dify version 1.0.1 environment, you can modify the CSS for the table to ensure it is scrollable. 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;
  width: max-content;
  max-width: 100%;
  overflow: auto; /* Change this line */
  border: 1px solid var(--color-divider-regular);
  border-radius: 8px;
}

This change will allow a scrollbar to appear when the table exceeds the width of its container, enabling users to scroll and view the entire content of the table ^[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 12 '25 03:03 dosubot[bot]

.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; } @dosu

Mar 12 '25 04:03 omjasoliya

为了解决您自托管的 Dify 1.0.1 版本环境中 Markdown 表格过宽导致滚动条消失的问题，您可以修改表格的 CSS 以确保其可滚动。将overflow表格 CSS 中的属性从hidden更新为auto。以下是您应该使用的修改后的 CSS：

.markdown-body table { border-spacing: 0; border-collapse: separate; display: block; width: max-content; max-width: 100%; overflow: auto; /* Change this line */ border: 1px solid var(--color-divider-regular); border-radius: 8px; } 当表格超出其容器的宽度时，此更改将允许出现滚动条，从而使用户能够滚动并查看表格的全部内容[1]。

要继续与Dosu交谈，请提及@dosu。

帮助 Dosu 学习！提供反馈：很好的回应|不相关的答案|不正确的来源|太冗长|幻觉|错误报告|其他

Do I need to rebuild the image after making the changes?

Mar 12 '25 06:03 suntao2015005848

The CSS you've provided is correct for making a Markdown table scrollable horizontally. This will ensure that when the table content exceeds the container's width, a horizontal scrollbar will appear, allowing users to view the entire table content. This approach maintains the table's border and border-radius formatting ^[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 12 '25 06:03 dosubot[bot]

@omjasoliya @crazywoola Do I need to rebuild the image if I modify the markdown.scss?

Mar 12 '25 06:03 suntao2015005848

No, you don’t need to rebuild the image. Simply modifying markdown.scss and restarting the frontend service should apply the changes. You can try clearing the browser cache or refreshing the page if the changes don’t appear immediately

If you want step by step guidance then feel free to ask :) @dosu On Wed, 12 Mar 2025 at 12:12, suntao2015005848 @.***> wrote:

@omjasoliya https://github.com/omjasoliya @crazywoola https://github.com/crazywoola Do I need to rebuild the image if I modify the markdown.scss?

— Reply to this email directly, view it on GitHub https://github.com/langgenius/dify/issues/15560#issuecomment-2716704049, or unsubscribe https://github.com/notifications/unsubscribe-auth/AZV7535G4VKCIWD4VWA2G3D2T7JMNAVCNFSM6AAAAABY2PUYBGVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDOMJWG4YDIMBUHE . You are receiving this because you were mentioned.Message ID: @.***> [image: suntao2015005848]suntao2015005848 left a comment (langgenius/dify#15560) https://github.com/langgenius/dify/issues/15560#issuecomment-2716704049

@omjasoliya https://github.com/omjasoliya @crazywoola https://github.com/crazywoola Do I need to rebuild the image if I modify the markdown.scss?

— Reply to this email directly, view it on GitHub https://github.com/langgenius/dify/issues/15560#issuecomment-2716704049, or unsubscribe https://github.com/notifications/unsubscribe-auth/AZV7535G4VKCIWD4VWA2G3D2T7JMNAVCNFSM6AAAAABY2PUYBGVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDOMJWG4YDIMBUHE . You are receiving this because you were mentioned.Message ID: @.***>

Mar 12 '25 06:03 omjasoliya

No, you don't need to rebuild the Docker image after modifying markdown.scss. You should modify the markdown.scss file, restart the frontend service, and clear your browser cache or refresh the page if the changes don't appear immediately ^[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 12 '25 07:03 dosubot[bot]

I updated the markdown.scss and restarted the docker-web-1, but the format of the markdown table did not take effect. @dosu

Mar 12 '25 07:03 suntao2015005848

After updating markdown.scss, you need to restart the frontend service, not just docker-web-1. Additionally, clear your browser cache or refresh the page to ensure the changes take effect ^[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 12 '25 07:03 dosubot[bot]

may be there is restarting problem have you tried this command?

docker compose restart frontend

On Wed, 12 Mar 2025 at 13:27, suntao2015005848 @.***> wrote:

I updated the markdown.scss and restarted the docker-web-1, but the format of the markdown table did not take effect. @dosu https://github.com/dosu

— Reply to this email directly, view it on GitHub https://github.com/langgenius/dify/issues/15560#issuecomment-2716965870, or unsubscribe https://github.com/notifications/unsubscribe-auth/AZV7533XQZZDTH4NLFSD3CT2T7SFVAVCNFSM6AAAAABY2PUYBGVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDOMJWHE3DKOBXGA . You are receiving this because you were mentioned.Message ID: @.***> [image: suntao2015005848]suntao2015005848 left a comment (langgenius/dify#15560) https://github.com/langgenius/dify/issues/15560#issuecomment-2716965870

I updated the markdown.scss and restarted the docker-web-1, but the format of the markdown table did not take effect. @dosu https://github.com/dosu

— Reply to this email directly, view it on GitHub https://github.com/langgenius/dify/issues/15560#issuecomment-2716965870, or unsubscribe https://github.com/notifications/unsubscribe-auth/AZV7533XQZZDTH4NLFSD3CT2T7SFVAVCNFSM6AAAAABY2PUYBGVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDOMJWHE3DKOBXGA . You are receiving this because you were mentioned.Message ID: @.***>

Mar 12 '25 07:03 omjasoliya

Well, you need to rebuild the frontend image @suntao2015005848

Mar 12 '25 08:03 crazywoola

Try using the command docker compose restart frontend to ensure the frontend service is properly restarted. Additionally, clear your browser cache or refresh the page to see if the changes take effect. If the issue persists, double-check that the changes in markdown.scss are saved correctly and that there are no syntax errors.

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 12 '25 08:03 dosubot[bot]

Well, you need to rebuild the frontend image @suntao2015005848

thanks , After rebuilding, it was successful.Executing docker compose restart frontend resulted in an error: no such service: frontend.

Mar 12 '25 08:03 suntao2015005848

Well, you need to rebuild the frontend image @suntao2015005848

thanks , After rebuilding, it was successful.Executing docker compose restart frontend resulted in an error: no such service: frontend.

请问一下你是怎么重建的呀，我重建web镜像之后启动还是不可以， cd web && docker build . -t dify-web

然后修改docker-compose.yml 文件中的web镜像版本

Mar 12 '25 08:03 cyh-97

Possible Reasons & Fixes: 1️⃣ Service Name Mismatch 🔹 The service name might be different in the docker-compose.yml file. 🔹 Run the following command to check all available services:

docker compose ps Look for the correct service name and replace frontend in your restart command.

2️⃣ Missing or Incorrect docker-compose.yml 🔹 Ensure you're in the correct directory where docker-compose.yml is located. 🔹 Try running:

ls docker-compose.yml

If it doesn’t exist, navigate to the correct directory.

3️⃣ Docker Compose Version Issue 🔹 If using older Docker versions, try:

docker-compose restart frontend (Use a hyphen docker-compose instead of a space docker compose)

4️⃣ Containers Are Not Running

docker compose up -d This ensures all services are started.

Mar 12 '25 08:03 omjasoliya

Well, you need to rebuild the frontend image @suntao2015005848

thanks , After rebuilding, it was successful.Executing docker compose restart frontend resulted in an error: no such service: frontend.

请问一下你是怎么重建的呀，我重建web镜像之后启动还是不可以， cd web && docker build . -t dify-web

然后修改docker-compose.yml 文件中的web镜像版本

1、更改 markdown.scss

2、修改 docker-compose.yml

web:
#    image: langgenius/dify-web:1.0.1
    build: ../web
    restart: always
    environment:
      CONSOLE_API_URL: ${CONSOLE_API_URL:-}
      APP_API_URL: ${APP_API_URL:-}
      SENTRY_DSN: ${WEB_SENTRY_DSN:-}
      NEXT_TELEMETRY_DISABLED: ${NEXT_TELEMETRY_DISABLED:-0}
      TEXT_GENERATION_TIMEOUT_MS: ${TEXT_GENERATION_TIMEOUT_MS:-60000}
      CSP_WHITELIST: ${CSP_WHITELIST:-}
      MARKETPLACE_API_URL: ${MARKETPLACE_API_URL:-https://marketplace.dify.ai}
      MARKETPLACE_URL: ${MARKETPLACE_URL:-https://marketplace.dify.ai}
      TOP_K_MAX_VALUE: ${TOP_K_MAX_VALUE:-}
      INDEXING_MAX_SEGMENTATION_TOKENS_LENGTH: ${INDEXING_MAX_SEGMENTATION_TOKENS_LENGTH:-}
      PM2_INSTANCES: ${PM2_INSTANCES:-2}
      LOOP_NODE_MAX_COUNT: `${LOOP_NODE_MAX_COUNT:-100}```

3、执行: docker compose up -d

Mar 12 '25 09:03 suntao2015005848

Well, you need to rebuild the frontend image @suntao2015005848

thanks , After rebuilding, it was successful.Executing docker compose restart frontend resulted in an error: no such service: frontend.

请问一下你是怎么重建的呀，我重建web镜像之后启动还是不可以， cd web && docker build . -t dify-web 然后修改docker-compose.yml 文件中的web镜像版本

1、更改 markdown.scss

2、修改 docker-compose.yml
web:
#    image: langgenius/dify-web:1.0.1
    build: ../web
    restart: always
    environment:
      CONSOLE_API_URL: ${CONSOLE_API_URL:-}
      APP_API_URL: ${APP_API_URL:-}
      SENTRY_DSN: ${WEB_SENTRY_DSN:-}
      NEXT_TELEMETRY_DISABLED: ${NEXT_TELEMETRY_DISABLED:-0}
      TEXT_GENERATION_TIMEOUT_MS: ${TEXT_GENERATION_TIMEOUT_MS:-60000}
      CSP_WHITELIST: ${CSP_WHITELIST:-}
      MARKETPLACE_API_URL: ${MARKETPLACE_API_URL:-https://marketplace.dify.ai}
      MARKETPLACE_URL: ${MARKETPLACE_URL:-https://marketplace.dify.ai}
      TOP_K_MAX_VALUE: ${TOP_K_MAX_VALUE:-}
      INDEXING_MAX_SEGMENTATION_TOKENS_LENGTH: ${INDEXING_MAX_SEGMENTATION_TOKENS_LENGTH:-}
      PM2_INSTANCES: ${PM2_INSTANCES:-2}
      LOOP_NODE_MAX_COUNT: `${LOOP_NODE_MAX_COUNT:-100}```

3、执行: docker compose up -d

可以了，谢谢你 👍

Mar 12 '25 09:03 cyh-97

Yes! Based on the steps you've taken, you should now execute:

docker compose up -d --build

Explanation:

docker compose up -d → Runs containers in detached mode (in the background). --build → Ensures Docker rebuilds the image to apply the changes you made in markdown.scss and docker-compose.yml. Additional Steps:

If you previously had containers running, you may want to stop them first:

docker compose down

Then, rebuild and restart:

docker compose up -d --build

Now, your changes should take effect. Let me know if you run into issues!

Mar 12 '25 09:03 omjasoliya

Same issue here but web rebuild fails with the below error. Hopefully this will be fixed in v1.0.2 next week.

188.7  ELIFECYCLE  Command failed.
------
failed to solve: process "/bin/sh -c pnpm build" did not complete successfully: exit code: 1

Mar 12 '25 12:03 infinitnet

https://github.com/langgenius/dify/pull/15601 Seems will be fixed with this PR.

Mar 13 '25 08:03 fdb02983rhy

我在1.0.1、1.1.0、1.1.1版本都遇到这个问题，但在0.15.3版本是正常的，按上面的方法更改markdown.scss、docker-compose.yaml然后重建iamage（1.0.1版本）都未能解决，升级新版本（1.1.0、1.1.1）也是同样的问题，感觉很困惑，希望能得到解答，谢谢！

Mar 21 '25 02:03 mrifoxer

@mrifoxer 这个问题你解决了嘛？我也遇到了同样的问题

Mar 27 '25 02:03 mlzxdzl

@mrifoxer 这个问题你解决了嘛？我也遇到了同样的问题

@mlzxdzl 没有解决尝试过替换0.15.3版本web\app\styles下面的所有文件，重建后样式确认生效了的但表格文本太长之后依旧会超宽导致显示不完整，目前退回到0.15.3版本在使用 @crazywoola 希望大佬们能早日解决这个bug

Mar 27 '25 02:03 mrifoxer

@mrifoxer 这个问题你解决了嘛？我也遇到了同样的问题 @mlzxdzl 这个问题已经解决了，方法：在\wep\app\stayles\globals.css文件最后加上 div.h-full.grow { overflow:hidden; } 然后按上面提到的方法更改docker-compose.yalm文件，再重建docker镜像

Mar 27 '25 08:03 mrifoxer

Well, you need to rebuild the frontend image @suntao2015005848

thanks , After rebuilding, it was successful.Executing docker compose restart frontend resulted in an error: no such service: frontend.

请问一下你是怎么重建的呀，我重建web镜像之后启动还是不可以， cd web && docker build . -t dify-web 然后修改docker-compose.yml 文件中的web镜像版本

1、更改 markdown.scss 2、修改 docker-compose.yml
web:
#    image: langgenius/dify-web:1.0.1
    build: ../web
    restart: always
    environment:
      CONSOLE_API_URL: ${CONSOLE_API_URL:-}
      APP_API_URL: ${APP_API_URL:-}
      SENTRY_DSN: ${WEB_SENTRY_DSN:-}
      NEXT_TELEMETRY_DISABLED: ${NEXT_TELEMETRY_DISABLED:-0}
      TEXT_GENERATION_TIMEOUT_MS: ${TEXT_GENERATION_TIMEOUT_MS:-60000}
      CSP_WHITELIST: ${CSP_WHITELIST:-}
      MARKETPLACE_API_URL: ${MARKETPLACE_API_URL:-https://marketplace.dify.ai}
      MARKETPLACE_URL: ${MARKETPLACE_URL:-https://marketplace.dify.ai}
      TOP_K_MAX_VALUE: ${TOP_K_MAX_VALUE:-}
      INDEXING_MAX_SEGMENTATION_TOKENS_LENGTH: ${INDEXING_MAX_SEGMENTATION_TOKENS_LENGTH:-}
      PM2_INSTANCES: ${PM2_INSTANCES:-2}
      LOOP_NODE_MAX_COUNT: `${LOOP_NODE_MAX_COUNT:-100}```

3、执行: docker compose up -d
可以了，谢谢你 👍 修改下面的内容，之前创建的工作流还在吗？
image: langgenius/dify-web:1.0.1
build: ../web

Apr 14 '25 09:04 DocKris