MacOS下DOM终端右边框字体超出问题

[RipperTs]

我这边是必现的， 字体大小设置的是 16px

[J3n5en]

咋关了🤔

[RipperTs]

小问题， 而且好像只有 codex 能出现这个问题

[Mieluoxxx]

其实在claudecode中也还是会有这样的问题

[J3n5en]

@claude 看看是什么问题

[github-actions]

Claude finished @J3n5en's task in 2m 38s —— View job

---

分析 MacOS 下 DOM 终端右边框字体超出问题

• 查看问题截图了解具体表现
• 分析终端相关代码定位问题
• 确定问题根因
• 提供修复方案

问题现象： 终端内容文字在右侧超出容器边界

---

根因分析

在 src/renderer/components/terminal/ShellTerminal.tsx:145 中，终端容器使用了 px-[5px] padding：

<div ref={containerRef} className="h-full w-full px-[5px] py-[2px]" />

这个 padding 导致了问题：

1. xterm 的 FitAddon.fit() 方法根据容器的总宽度计算终端列数
2. 但 xterm 渲染的实际文本区域会被 padding 压缩 10px（左右各 5px）
3. 由于 contain: 'strict' 样式的存在，xterm 计算出的列数和实际可用空间可能不匹配
4. 特别是在使用 DOM 渲染器时，某些字符宽度计算可能有微小差异，导致文本渲染超出可见区域

---

修复方案

在终端容器添加 overflow-hidden 样式，防止 xterm 渲染内容超出容器边界：

- <div ref={containerRef} className="h-full w-full px-[5px] py-[2px]" />
+ <div ref={containerRef} className="h-full w-full overflow-hidden px-[5px] py-[2px]" />

注意： 我无法直接推送代码到仓库（权限限制）。请手动应用上述修改，或授予 GitHub Actions 写入权限。

文件路径：src/renderer/components/terminal/ShellTerminal.tsx 第 145 行

---

[J3n5en]

已修复并推送至 main 分支。

问题根因：xterm.js 的 FitAddon 在 box-sizing: border-box（Tailwind CSS 4 默认）下计算终端列数时，错误地将容器 padding 计入可用宽度，导致渲染字符超出右边界。

修复方案：给终端容器添加 style={{ boxSizing: 'content-box' }}，让 FitAddon 正确计算实际内容区域宽度。

这是 xterm.js 的已知问题 (xtermjs/xterm.js#1283)。

修复 commit: ecd6cca

[RipperTs]

这么修改其实是没有效果的， 还是一样的问题。

我这边稳定的复现方法是直接让 codex 回答：hi, 讲个故事

回答的内容就会出现超出的边界的问题， 我也简单尝试几种修复方案， 发现其实有点棘手

[J3n5en]

不清楚什么情况，我这复现不出来

[RipperTs]

我拉了最新的提交，我这边是依旧有问题，很奇怪， 字体无论设置 18px 16px 还是 14px 都一样， 加边距加超出隐藏都不行

[J3n5en]

看起来像是滚动条遮挡了？我这滚动条半透明的，你这什么主题？