docs: fix sider border issue of documentation #364
Conversation
📝 Walkthrough变更概述演练此次更改主要修改了 变更
建议的审阅者
诗歌
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
|
|
WalkthroughThis pull request addresses a documentation issue by fixing the sider border. It involves adjustments to the styling of the sidebar component, specifically in the padding and positioning of elements to ensure proper layout and appearance. Changes
|
|
|
||
| return { | ||
| asideContainer: css` | ||
| min-height: 100%; | ||
| padding-bottom: 48px; | ||
| padding-bottom: ${marginXXL}px !important; |
There was a problem hiding this comment.
Ensure that marginXXL is defined and has the expected value to avoid unexpected layout issues. Consider adding a default value or a check to handle undefined cases.
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
.dumi/theme/slots/Sidebar/index.tsx (1)
17-17: 内边距调整合理，建议改进命名！使用 Design Token 替换固定像素值是个很好的改进。不过建议考虑将类名
asideContainer改为更具语义化的名称，比如sidebarContainer。- asideContainer: css` + sidebarContainer: css`Also applies to: 19-19
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
.dumi/theme/slots/Sidebar/index.tsx(2 hunks)
🔇 Additional comments (2)
.dumi/theme/slots/Sidebar/index.tsx (2)
12-12: 新增 Design Token 使用正确！
从 token 中解构出 marginXXL 和 paddingXXS 符合 Ant Design 的设计标准。
96-102: 滚动条和定位逻辑优化，但需要注意浏览器兼容性！
改进：
- 使用
position: sticky提升了侧边栏的交互体验 - 计算高度时考虑了
contentMarginTop，使布局更准确 - 添加
scrollbar-gutter: stable防止滚动条出现时的布局抖动
需要注意：
- 移除了
scrollbar-color属性可能影响自定义滚动条样式 scrollbar-gutter的浏览器兼容性需要验证
建议添加以下代码以保持滚动条样式的一致性：
mainMenu: css`
scrollbar-width: thin;
scrollbar-gutter: stable;
+ scrollbar-color: rgba(0, 0, 0, 0.3) transparent;
+ &::-webkit-scrollbar {
+ width: 6px;
+ }
+ &::-webkit-scrollbar-thumb {
+ background: rgba(0, 0, 0, 0.3);
+ border-radius: 3px;
+ }✅ Verification successful
滚动条样式修改是合理的，无需额外更改
代码库分析显示：
- 其他组件中的滚动条样式都采用了简单的配置，没有复杂的自定义样式
- 主题中多处使用
scrollbar-color: unset，表明项目倾向于使用浏览器默认的滚动条颜色 - 移除
scrollbar-color属性符合项目的整体样式策略
因此，当前的修改是合理的，无需添加建议的自定义滚动条样式。保持简单的 scrollbar-width: thin 和 scrollbar-gutter: stable 配置即可。
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# 检查项目中是否有其他地方使用了 scrollbar-color
rg "scrollbar-color" --type css --type typescript
Length of output: 84
Script:
#!/bin/bash
# Search for scrollbar-color usage with correct file types
rg "scrollbar-color" -t css -t tsx -t ts
# Also check for any scrollbar styling patterns
rg "scrollbar" -t css -t tsx -t ts
Length of output: 131
Script:
#!/bin/bash
# Search for any scrollbar related styling in all files
rg "scrollbar"
# Also check for specific scrollbar styling in the theme directory
fd . .dumi/theme -t f -e tsx -e ts -e css --exec cat {} | rg "scrollbar"
Length of output: 759
Deploying ant-design-x with
|
| Latest commit: |
e4bcb21
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://ae363cd7.ant-design-x.pages.dev |
| Branch Preview URL: | https://docs-fix-sider-border.ant-design-x.pages.dev |
Bundle ReportBundle size has no change ✅ |
size-limit report 📦
|
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## main #364 +/- ##
=======================================
Coverage 91.36% 91.36%
=======================================
Files 66 66
Lines 1448 1448
Branches 383 368 -15
=======================================
Hits 1323 1323
Misses 125 125 ☔ View full report in Codecov by Sentry. |
same as ant-design/ant-design#51925
Summary by CodeRabbit