Thanks to visit codestin.com
Credit goes to github.com

Skip to content

fix(dialog-box): [dialog-box] modify the style of the dialog box #2757

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Jan 8, 2025
Merged

fix(dialog-box): [dialog-box] modify the style of the dialog box #2757

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion packages/theme/src/dialog-box/index.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -116,9 +116,11 @@

& &__body {
text-align: left;
padding: 0 var(--tv-DialogBox-padding);
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;
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ensure that the max-height of 65vh does not cause content clipping in smaller viewports. Consider making this value responsive if necessary.

Comment on lines +122 to +123
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 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 65vh value 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:

  1. Fixed max-height: 65vh might not work well on smaller screens
  2. Could conflict with .is-fullscreen behavior
  3. No mobile-specific adjustments for the max-height

Consider these improvements:

  1. Add mobile-specific max-height adjustment
  2. Handle interaction with .is-fullscreen class
  3. 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


.@{css-prefix}upload {
overflow: hidden;
Expand Down
2 changes: 2 additions & 0 deletions packages/theme/src/dialog-box/vars.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,4 +54,6 @@
--tv-DialogBox-resize-icon-color-hover: var(--tv-color-icon-hover);
// 缩放按钮大小
--tv-DialogBox-resize-icon-size: var(--tv-icon-size);
// 弹窗容器与上下内容间距
--tv-DialogBox-vertical-padding: var(--tv-space-xs);
}
Loading