fix(chat): adapt compact tool wheel on mobile#1670
Conversation
|
Complex PR? Review this PR in Change Stack to move by importance, not file order. No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Repository UI Review profile: CHILL Plan: Pro Plus Run ID: 📒 Files selected for processing (2)
🚧 Files skipped from review as they are similar to previous changes (2)
Walkthrough该 PR 为紧凑输入模式的工具轮盘实现视口感知的布局判定与同步：打开时测量 DOM/CSS 与 visualViewport，估算默认槽位是否溢出并在 default / viewport-fit 间切换，同时新增相应样式与测试覆盖喵。 Changes紧凑工具轮盘响应式布局
Sequence DiagramsequenceDiagram
participant User as 用户点击工具开关
participant OpenFan as openCompactInputToolFan
participant ResetLayout as 重置布局为 'default'
participant useLayoutEffect as useLayoutEffect 副作用
participant SyncLayout as syncCompactInputToolWheelLayout
participant ResolveFn as resolveCompactInputToolWheelLayout
participant DOM as 轮盘 DOM 与 CSS 变量
participant VisualViewport as window.visualViewport
participant State as compactInputToolWheelLayout
participant Render as 渲染 data-compact-tool-wheel-layout
User->>OpenFan: 点击打开轮盘
OpenFan->>ResetLayout: 将布局设为 'default'
OpenFan->>useLayoutEffect: 触发/绑定副作用监听
useLayoutEffect->>SyncLayout: 调用同步函数
SyncLayout->>DOM: 读取 getBoundingClientRect 与 CSS 变量
SyncLayout->>VisualViewport: 读取视口尺寸/offset
SyncLayout->>ResolveFn: 传入测量数据进行判定
ResolveFn-->>SyncLayout: 返回 'default' 或 'viewport-fit'
SyncLayout->>State: 更新 compactInputToolWheelLayout
State->>Render: 渲染属性变化
Render->>Render: 样式根据属性选择视角与可见性
Estimated Code Review Effort🎯 4 (Complex) | ⏱️ ~45 minutes Possibly related PRs
Poem
🚥 Pre-merge checks | ✅ 4✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: f4fdd37db7
ℹ️ About Codex in GitHub
Codex has been enabled to automatically review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback".
| const viewportWidth = window.innerWidth; | ||
| const viewportHeight = window.innerHeight; |
There was a problem hiding this comment.
On mobile when the soft keyboard or browser chrome shrinks the visible area, window.innerWidth/innerHeight still describe the layout viewport, so this comparison can decide that the default arc fits even though it is clipped or covered in the visual viewport. The effect already listens to visualViewport resize/scroll, but those events cannot change the result while the resolver ignores visualViewport.width/height and offsets.
Useful? React with 👍 / 👎.
There was a problem hiding this comment.
Accepted and fixed in 6804728. The resolver now uses visualViewport width/height plus offsetLeft/offsetTop when available, while keeping innerWidth/innerHeight as the fallback. Added a mobile visual viewport clipping test. Verified with npm.cmd run build and npm.cmd test -- App.test.tsx.
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@frontend/react-neko-chat/src/styles.css`:
- Around line 4212-4220: In viewport-fit mode the edge-slot gradient masks
should be disabled so items at data-compact-tool-wheel-slot="-2" and "2" are
fully visible; add CSS overrides targeting
.compact-input-tool-fan[data-compact-tool-wheel-layout="viewport-fit"]
.compact-input-tool-item[data-compact-tool-wheel-slot="-2"], and the same
selector for slot="2", and set -webkit-mask-image: none; mask-image: none;
background: none; and also override any ::after pseudo-element and direct
img/svg children (e.g.
.compact-input-tool-item[data-compact-tool-wheel-slot="-2"]::after and img, svg)
to remove the fade-left/fade-right masks so the directional gradient is
explicitly disabled in viewport-fit layout.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro Plus
Run ID: 5156d79d-c2ee-47ff-ad6b-bf8f6d399ace
📒 Files selected for processing (3)
frontend/react-neko-chat/src/App.test.tsxfrontend/react-neko-chat/src/App.tsxfrontend/react-neko-chat/src/styles.css
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 680472890f
ℹ️ About Codex in GitHub
Codex has been enabled to automatically review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback".
| .compact-input-tool-fan[data-compact-input-tool-fan-open="true"][data-compact-tool-wheel-layout="viewport-fit"] .compact-input-tool-item[data-compact-tool-wheel-slot="2"] { | ||
| transform: translate(var(--compact-tool-wheel-center-x), var(--compact-tool-wheel-center-y)) rotate(-80deg) translateX(var(--compact-tool-wheel-orbit-radius)) rotate(80deg) scale(0.86); | ||
| } |
There was a problem hiding this comment.
When the compact surface is positioned near the top of a narrow viewport, the resolver switches to viewport-fit as soon as the default arc clips, but this fallback can make that case worse: the right preview slot moves from the default -17.35deg position to -80deg, which raises it by roughly another 55px at the current 80px radius. Since the compact shell can be fixed via --desktop-compact-surface-top, opening the wheel near the top edge still leaves the item clipped even though the layout is marked viewport-fit; the fallback needs to account for which edge overflowed or use a placement that is verified to fit.
Useful? React with 👍 / 👎.
There was a problem hiding this comment.
Accepted and fixed in ec6009d. The resolver now verifies both candidate geometries: it keeps default when the default arc fits, switches to viewport-fit only when that fallback also fully fits the visual viewport, and otherwise falls back to default instead of making top-edge clipping worse. Added a top-edge regression test. Verified with npm.cmd run build and npm.cmd test -- App.test.tsx.
解决冲突(均来自 #1670 compact 工具轮盘移动端适配 + 本分支 compact 改动撞同区): - App.tsx: 合并 #1670 的 compactInputToolWheel{Default,ViewportFit}VisibleSlots(移动端轮盘 slots) + 本分支 COMPACT_SURFACE_RESIZE_MIN_WIDTH=280 / COMPACT_SURFACE_DEFAULT_WIDTH=430(取 280 是本分支最短宽度功能) - App.test.tsx: 保留 #1670 的 mockMobileMatchMedia(被 4 处 mobile 用例引用),删去本分支去气泡拖拽后已 unused 的 setupAvatarDropBounds/setupDesktopAvatarDropBounds 合并后 build + vitest 168 + python 44 全绿。 Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2 participants
Summary
Verification
Summary by CodeRabbit