Compliance Download action shrinks beside the ISO certification title

这是 Dify 侧边栏底部帮助菜单「Compliance」区域在前端渲染时出现的 flex 布局问题,当文档标题较长(尤其是 ISO 27001:2022 Certification)时,右侧的 Download 操作会被标题挤压变窄,下载图标随之压缩。优先排查 ComplianceDocRowIt

快速结论:这是 Dify 侧边栏底部帮助菜单「Compliance」区域在前端渲染时出现的 flex 布局问题,当文档标题较长(尤其是 ISO 27001:2022 Certification)时,右侧的 Download 操作会被标题挤压变窄,下载图标随之压缩。优先排查 ComplianceDocRowItem 中 Download 操作视觉容器是否缺少 shrink-0

适用环境:Dify 1.17.1;Self Hosted(Source),本地源码检出点为 d39d9ddb74;未提及具体 Python、CUDA、显卡或后端依赖版本,因此不做推断。

最快修复方案:暂无确认的一步修复方案。Issue 中被确认的原因是 Download 操作缺少 shrink-0,修复方向是为 ComplianceDocActionVisual 渲染的两个容器(下载 <span> 分支与 PremiumBadge/tooltip 分支)补上 shrink-0,使只有标题参与截断。该做法为 Issue 评论中给出的推理方向,尚未见合并的修复提交。

注意事项:该方案属于前端 CSS/flex 层面的改动,仅影响布局,不改动后端逻辑或合规文档数据;由于 Issue 中未提供已合并的补丁,改动后需要自行验证四种合规文档行在英文和较长标题下的显示是否一致。若后续官方已有合并修复,应以官方提交为准。

问题场景

在 Dify Studio 中,以英文界面打开一个 Team workspace,且该 workspace 下所有合规文档均可下载。打开侧边栏底部的帮助菜单,展开「Compliance」区域,即可看到四行合规文档条目。其中 ISO 27001:2022 Certification 这一行的标题比其他三行(GDPR DPA、SOC 2 Type I Report、SOC 2 Type II Report)更长,导致该行右侧的 Download 操作被挤压变窄,下载图标也被压缩。

报错原文

Compliance Download action shrinks beside the ISO certification title

Issue 中的实际行为描述:该行的 Download 操作比其他三行更窄,下载图标被压缩;预期行为是四行 Download 操作保持相同尺寸,较长的文档标题应在剩余空间内截断。

原因分析

已确认这是一个 flex-shrink 布局问题。在 ComplianceDocRowItem 中,每一行将图标、标题 <div>ComplianceDocActionVisual 作为 DropdownMenuItem 内的 flex 兄弟元素排布。标题带有 grow truncate,但操作视觉部分(包裹下载图标的 <span> 以及 PremiumBadge 升级状态)都没有设置 shrink-0

flex 子项默认 flex-shrink: 1,因此当行宽不足时,浏览器会按比例压缩包括 Download 操作在内的所有兄弟元素。标题的 truncate 类只能控制自身截断,无法阻止其兄弟元素被压缩。由于 ISO 27001:2022 Certification 是四个标签中最长的,只有这一行的宽度缺口大到足以让压缩效果肉眼可见。行首图标本身已使用 shrink-0 进行了保护,说明同类模式可以应用到 Download 操作上。

环境排查

  • 确认 Dify 版本是否为 1.17.1,或是否基于源码检出(Issue 中为本地源码 d39d9ddb74)。
  • 确认界面语言是否为英文,且 workspace 类型为 Team,合规文档全部可下载。
  • 检查 web/app/components/header/account-dropdown/compliance.tsxComplianceDocRowItemComplianceDocActionVisual 的当前实现。
  • 确认 shrink-0 是否已加在 Download 操作的两个容器分支上(下载 <span>PremiumBadge/tooltip 分支)。
  • 对照行首图标(如 <Iso aria-hidden className="size-7 shrink-0" />)的写法和位置,确认同类保护是否被遗漏。

解决步骤

  1. 打开 web/app/components/header/account-dropdown/compliance.tsx,定位 ComplianceDocRowItem 中标题与 ComplianceDocActionVisual 的 flex 兄弟结构。
  2. 检查 ComplianceDocActionVisual 渲染的两个分支:下载 <span> 分支,以及 PremiumBadge/tooltip 分支。
  3. 为这两个容器的 className 补上 shrink-0,使其不参与 flex 收缩,从而只让标题在剩余空间内截断。
  4. 参考仓库中同类修复做法:为按钮补 shrink-0(PR #41527),以及将插件卡片组织/名称文本从 flex-1 改为 shrink 并保留 truncate(PR #41514)。
  5. 重新构建前端并刷新页面,在英文 Team workspace 下重新展开 Compliance 区域验证四种文档行的 Download 操作宽度。

验证方法

在 Dify Studio 英文界面中打开侧边栏底部帮助菜单,展开 Compliance。确认四行(GDPR DPA、ISO 27001:2022 Certification、SOC 2 Type I Report、SOC 2 Type II Report)的 Download 操作尺寸一致,下载图标不再被压缩;同时确认 ISO 行的长标题仍在剩余空间内正常截断,没有换行或溢出。若还涉及 PremiumBadge 升级状态,也应在文档不可下载的 workspace 中检查该状态是否保持不被压缩。

参考来源

langgenius/dify #42514

GamsGo AI

AI 工具推荐

想把多个 AI 模型放在一个入口?

GamsGo AI 集成 ChatGPT、DeepSeek、Gemini、Claude、Midjourney、Veo 等常用模型,适合写作、绘图、视频和日常 AI 工作流。

了解 GamsGo AI

推广链接:通过此链接购买,我可能获得佣金,不影响你的价格。

这个方案解决了吗?

celebrityanime
celebrityanime
文章: 24322

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注