fix: 修复评论区表情面板被裁剪及分类切换抖动 - #636
Merged
Merged
Conversation
评论区（Waline）在回复编辑器里打开表情面板时，面板下半截连同底部分类 tab 会被主题自身的 overflow:hidden 裁掉；切换表情分类时表情网格与分类 tab 还会发生位移。 卡片与内容列改为「只裁横向、纵向放开」，网格高度与滚动条槽位改为恒定，并统一分类 tab 的占位尺寸。
|
@ImYufish is attempting to deploy a commit to the xiaye's projects Team on Vercel. A member of the Team first needs to authorize it. |
✅ Deploy Preview for demo-firefly ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
审查者指南通过分离装饰层与评论内容的裁剪责任、放开评论区及内容列的纵向溢出，并为 Waline 表情面板统一滚动条、网格高度和 tab 边框占位，修复表情面板被裁剪及分类切换时的布局抖动。 文件级变更
提示和命令使用 Sourcery
自定义你的使用体验访问你的控制面板以：
获取帮助Original review guide in EnglishReviewer's Guide通过分离装饰层与评论内容的裁剪责任、放开评论区及内容列的纵向溢出，并为 Waline 表情面板统一滚动条、网格高度和 tab 边框占位，修复表情面板被裁剪及分类切换时的布局抖动。 File-Level Changes
Tips and commandsInteracting with Sourcery
Customizing Your ExperienceAccess your dashboard to:
Getting Help
|
![sourcery-ai[bot]](https://avatars.githubusercontent.com/in/48477?s=60&v=4){kind=small}
Owner
|
感谢PR |
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
2 participants
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.
PR：修复评论区表情面板被裁剪及分类切换抖动
涉及 3 个文件：
src/components/comment/index.astrosrc/components/comment/Waline.astrosrc/utils/sidebar-effective-utils.tsType of change
Checklist
Related Issue
本修复暂无直接关联 issue
Changes
修复 Waline 回复编辑器内表情面板被主题自身
overflow:hidden纵向裁切、以及切换分类时表情网格与分类 tab 发生位移的问题。涉及 3 个文件：
1.
src/components/comment/index.astro评论卡片
#post-comments由overflow-hidden改为overflow-x-clip overflow-y-visible：只裁横向溢出、纵向放开，表情面板浮层不再被裁。原本靠overflow-hidden实现的右上角装饰圆裁切，移入独立的绝对定位裁剪层（.absolute.inset-0.overflow-hidden.rounded-(--radius-large).pointer-events-none），圆角裁剪效果保留、且不影响评论区浮层。2.
src/utils/sidebar-effective-utils.ts内容列
staticBarClass由min-w-0 overflow-hidden改为min-w-0 overflow-x-clip overflow-y-visible。overflow-x: clip不生成滚动容器、不影响列内元素吸顶，纵向放开后浮层可完整显示。3.
src/components/comment/Waline.astro针对 Waline 表情面板新增全局样式，逐项消除切换分类时的位移：
.wl-tab-wrapper加scrollbar-gutter: stable—— 预留滚动条槽位，避免内容溢出时的滚动条挤掉约 6px 宽度导致网格重排；.wl-tab-wrapper固定height: 145px（取自 Waline 自身max-height）—— 内容不足的分类网格区不再按内容收缩、避免比顶满时矮 1px；.wl-tabs .wl-tab:not(.active)补border: solid transparent; border-width: 0 1px 1px—— Waline 给选中态加了0 1px 1px边框使激活 tab 比未激活宽 2px 高 1px，未选中态补等宽透明边框统一占位，切换时相邻 tab 不再左右挪动。How To Test
commentConfig.type: "waline"与serverURL）。:bb_doge:）。npx astro sync && npx tsc --noEmit -p tsconfig.json无错误，npx biome check无修复项。Screenshots (if applicable)
修复前
修复后
Additional Notes
无
Sourcery 总结
修复 Waline 表情选择器的可见性问题，并防止切换表情分类时发生布局偏移。
Bug 修复：
增强功能：
Original summary in English
Summary by Sourcery
Fix Waline emoji picker visibility and prevent layout shifts when switching emoji categories.
Bug Fixes:
Enhancements:
Original summary in English