Settings dialog is shifted to the right at laptop widths

问题场景

在 Dify 本地开发环境中打开工作区的 Settings → Preferences（账户/工作区设置弹窗），把浏览器视口调到笔记本常见的 1159 × 863 或 1024 × 863，再与 1440px 宽视口对比。可以看到设置弹窗整体向右偏移：左侧留下不必要的空白，右侧内容被压缩甚至裁切，导航栏与内容区不再作为一组居中。

报错原文

Settings dialog is shifted to the right at laptop widths

原因分析

根据 Issue 讨论，这属于账户设置弹窗标记层面的布局缺陷。外层容器在 sm 及以上所有断点统一套用固定的 pl-58（232px）左内边距，没有区分 1024–1159px 与宽屏桌面：

<div className="flex h-screen w-full max-w-full pl-0 sm:pl-58">

同一 sm 断点下，导航侧栏从 w-11（44px 图标栏）跳到 w-56（224px），而内容面板是硬编码的 w-206（824px），没有随视口收窄。

由此在 1024px 或 1159px 视口下，232px 内边距 + 224px 侧栏 + 824px 内容已超过 1280px，大于视口宽度，于是整组被推挤并裁切，而不是居中并收缩；1440px 下空间足够，看起来才居中，这就是偏移只在更窄宽度出现的原因。可能原因也包括该固定宽度模式被复用到其他设置类弹窗，但 Issue 中未逐一确认。

环境排查

• 确认复现视口宽度：1024 × 863、1159 × 863，并准备 1440px 作为对照。
• 确认浏览器缩放为 100%，排除缩放造成的等效视口变化。
• 确认 Dify Web 端 account-setting 组件中 sm:pl-58、w-11 sm:w-56、w-206 的实际取值与生效断点。
• Issue 未提供 Python、CUDA、PyTorch、显卡、节点或依赖版本信息，无需按这些项排查。

解决步骤

1. 在 1024 × 863 与 1159 × 863 下打开 Settings → Preferences，复现右移现象并记录导航与内容区的位置。
2. 定位到 web/app/components/header/account-setting/index.tsx，检查外层容器的 pl-0 sm:pl-58、侧栏的 w-11 sm:w-56 以及内容区的 w-206。
3. 确认这三处的固定值与生效断点：232px + 224px + 824px 的最小容纳宽度已超过 1280px，是偏移的直接来源。
4. 按 Issue 建议方向调整：让左内边距与内容列一起响应式收缩（流体 / clamp / 容器查询），或在 sm 与实际可容纳宽度之间增加中间断点。可优先尝试，但 Issue 未标注为已验证修复。
5. 如采用中间断点方案，需验证新断点在 1024px、1159px 两个复现宽度下都不再触发跳变或裁切。

验证方法

在 1024 × 863、1159 × 863 和 1440px 三种视口下分别打开 Settings → Preferences，确认导航栏与内容区始终作为一组居中，内容随视口收窄而收缩，且笔记本宽度下不再出现突然的水平右移或裁切；再确认 sm 断点附近的宽度过渡平滑、无跳变。

参考来源

langgenius/dify #42119

AI 工具推荐

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

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

了解 GamsGo AI

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