fix(chat): 输入框让出右侧控制列，滚动条不再压住用量环 - #438
Merged
Merged
Conversation
展开/还原按钮、上下文用量环、发送按钮都是 right-3 + w-8，共同占据输入框 卡片右缘 44px 宽的竖直轨道；而编辑器所在行只有 px-4，让位靠编辑器自身的 pr-8。padding 不改变滚动条位置——overflow-y:auto 的滚动条恒贴元素 border box 右缘，pr-8 只把文字推开、留下那条 6px 滚动轨停在距卡片右缘 16–22px 处，正好压在环心与展开图标下方。 改为把让位提升成布局让位：编辑器外层容器 px-4 → pl-4 pr-12（48px = 44px 轨道 + 4px 间隙），收窄编辑器 border box，滚动条随之被推到轨道左侧；编辑器 不再补 pr。文本可用宽度不变（W−16−16−32 = W−16−48），仅溢出时同样多让出 6px 给滚动条。 顺带修掉两个同源表现：占位符 ::before 的包含块是外层 wrapper，此前窄屏会 钻到按钮底下；展开态用量环浮在正文中央同样压字，现在都落在让位区内。 Closes #437
StackCairn
marked this pull request as draft
August 12, 2026 13:52
Contributor
|
PR governance checks failed — this PR has been converted to draft.
Fix the items above, then click Ready for review to re-run the checks. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Linked issue
Closes #437
Summary
提示词输入框里，编辑器的纵向滚动条会从上下文用量环与展开图标上穿过。
三个右侧控件（展开/还原、用量环、发送）都是
right-3+h-8 w-8，共同占据卡片右缘 44px 宽的竖直轨道；而编辑器所在行只有px-4，让位靠编辑器自身的pr-8。padding 不改变滚动条位置 ——overflow-y: auto元素的滚动条恒贴自身 border box 右缘，pr-8只把文字推开 32px，那条全局 6px 滚动轨仍停在距卡片右缘 16–22px 处，正好落在环心与展开图标下方。本 PR 把让位从"内边距"提升成布局让位：编辑器外层容器
px-4→pl-4 pr-12（48px = 44px 轨道 + 4px 间隙），收窄编辑器 border box，滚动条随之被推到轨道左侧；编辑器不再补pr。W−16(pl)−16(pr)−32(编辑器 pr)，改后W−16−48，都是W−64；仅溢出时同样多让出 6px 给滚动条。::before的包含块是外层 wrapper 而非编辑器，此前窄屏会钻到按钮底下；输入框展开态时用量环浮在正文中央同样压字 —— 现在都落在让位区内。index.css镜像。Change scope
crates/agent-ui/src/pages/chat/ChatComposerBar.tsx—— 编辑器行pl-4 pr-12，编辑器 className 去掉pr-8crates/agent-gui/test/chat/context-usage.test.mjs—— 新增布局不变量测试Screenshots / preview
Verification
cd crates/agent-gui && node --test test/chat/*.test.mjs—— 616 passed / 0 failedcd crates/agent-gateway/web && npm test—— 557 passed / 0 failedcd crates/agent-ui && npx biome check src/pages/chat/ChatComposerBar.tsx—— cleancomposer editor row reserves the right control rail so the scrollbar clears the ring锁住不变量：让位必须做在编辑器外层容器上，编辑器不得复活pr-8（下次有人"顺手"把 padding 挪回去会直接红）Pre-submit checklist