fix(dialog-box): [dialog-box] modify the style of the dialog box #2757
Conversation
WalkthroughThe pull request introduces modifications to the dialog box component's styling in the theme package. The changes focus on enhancing the dialog box's body section by adding vertical padding and implementing scrolling behavior. A new CSS variable for vertical padding is introduced, allowing more flexible styling. The modifications aim to improve the dialog box's layout and usability, particularly when dealing with content that exceeds the viewport height. Changes
Possibly related PRs
Suggested labels
Suggested reviewers
Poem
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 PR modifies the style of the dialog box by adjusting padding, adding overflow and max-height properties to improve layout and usability. It introduces a new CSS variable for vertical padding. Changes
|
| color: var(--tv-DialogBox-body-text-color); | ||
| font-size: var(--tv-DialogBox-body-font-size); | ||
| overflow: auto; | ||
| max-height: 65vh; |
There was a problem hiding this comment.
Ensure that the max-height of 65vh does not cause content clipping in smaller viewports. Consider making this value responsive if necessary.
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
packages/theme/src/dialog-box/vars.less (1)
57-58: LGTM! Consider adding English comments.The new CSS variable follows the existing naming convention and properly uses the design system's spacing scale. However, consider adding English translations for comments to maintain consistency with the project's international nature.
- // 弹窗容器与上下内容间距 + // 弹窗容器与上下内容间距 + // Vertical padding between dialog container and content --tv-DialogBox-vertical-padding: var(--tv-space-xs);
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
packages/theme/src/dialog-box/index.less(1 hunks)packages/theme/src/dialog-box/vars.less(1 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: PR E2E Test (pnpm test:e2e3)
🔇 Additional comments (1)
packages/theme/src/dialog-box/index.less (1)
119-119: LGTM! Padding implementation looks good.The padding implementation correctly uses the new vertical padding variable while maintaining the existing horizontal padding.
| overflow: auto; | ||
| max-height: 65vh; |
There was a problem hiding this comment.
💡 Codebase verification
🛠️ Refactor suggestion
Consider implementing responsive max-height with CSS custom properties
The codebase analysis confirms the review's concerns:
- Other components like Tooltip use CSS custom properties for vh-based heights
- No mobile-specific height adjustments exist
- Current fixed
65vhvalue lacks configurability
The suggested improvements in the review are valid and align with the existing patterns in the codebase.
🔗 Analysis chain
Review max-height implementation for mobile responsiveness.
The current implementation has potential issues:
- Fixed
max-height: 65vhmight not work well on smaller screens - Could conflict with
.is-fullscreenbehavior - No mobile-specific adjustments for the max-height
Consider these improvements:
- Add mobile-specific max-height adjustment
- Handle interaction with
.is-fullscreenclass - Consider using CSS custom properties for configurable heights
&__body {
text-align: left;
padding: var(--tv-DialogBox-vertical-padding) var(--tv-DialogBox-padding);
color: var(--tv-DialogBox-body-text-color);
font-size: var(--tv-DialogBox-body-font-size);
overflow: auto;
- max-height: 65vh;
+ max-height: var(--tv-DialogBox-body-max-height, 65vh);
}
&.is-fullscreen &__body {
flex: 1;
overflow: scroll;
+ max-height: none; // Override max-height when fullscreen
}
@media (max-width: 480px) {
.@{dialog-box-prefix-cls} {
width: 100% !important;
top: 0 !important;
left: 0 !important;
+ &__body {
+ max-height: var(--tv-DialogBox-body-max-height-mobile, 80vh);
+ }
}
}Let me verify the current mobile handling in the codebase:
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Check for other mobile-specific dialog box styles and max-height usage
rg -l "max-height.*vh" packages/theme/src/
rg -l "@media.*480px" packages/theme/src/
Length of output: 282
Script:
#!/bin/bash
# Check vh-based max-height implementations and fullscreen styles
rg "max-height:.*vh" packages/theme/src/ -A 2
rg "is-fullscreen" packages/theme/src/
rg "tv-DialogBox.*height" packages/theme/src/
Length of output: 1068
PR
PR Checklist
Please check if your PR fulfills the following requirements:
PR Type
What kind of change does this PR introduce?
Modify the style of the dialog box
What is the current behavior?
Issue Number: N/A
What is the new behavior?
Does this PR introduce a breaking change?
Other information
Summary by CodeRabbit
New Features
Style