fix(datetime-picker): fix datetime-picker's display to flex in mobilefirst #2969
Conversation
WalkthroughThis change modifies the CSS class definitions in the Changes
Suggested labels
Suggested reviewers
Poem
Warning There were issues while running some tools. Please review the errors and either fix the tool’s configuration or disable the tool if it’s a critical failure. 🔧 ESLint
packages/vue/src/picker/src/token.tsOops! Something went wrong! :( ESLint: 8.57.1 ESLint couldn't find the plugin "eslint-plugin-vue". (The package "eslint-plugin-vue" was not found when loaded as a Node module from the directory "".) It's likely that the plugin isn't installed correctly. Try reinstalling by running the following: The plugin "eslint-plugin-vue" was referenced from the config file in ".eslintrc.js » @antfu/eslint-config » @antfu/eslint-config-vue". If you still can't figure out the problem, please stop by https://eslint.org/chat/help to chat with the team. Tip CodeRabbit's docstrings feature is now available as part of our Pro Plan! Simply use the command 📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (1)
🔇 Additional comments (1)
✨ Finishing Touches
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 (
|
Walkthrough此PR修复了datetime-picker在移动端的显示问题，将其显示样式调整为flex布局，以便更好地适应容器宽度。 Changes
|
![petercat-assistant[bot]](https://avatars.githubusercontent.com/in/875736?s=60&v=4){kind=small}
| @@ -1,7 +1,7 @@ | |||
| export const classes = { | |||
| 'input-label': 'text-color-text-placeholder text-xs sm:text-sm mr-2 inline-block text-left max-w-[100px] truncate', | |||
| 'range-editor': | |||
| 'bg-color-bg-1 relative inline-flex items-center py-1 sm:px-3 border-0 sm:border border-color-border hover:border-color-border-hover rounded mt-0.5', | |||
| 'bg-color-bg-1 relative flex items-center py-1 sm:px-3 border-0 sm:border border-color-border hover:border-color-border-hover rounded mt-0.5', | |||
There was a problem hiding this comment.
The change from inline-flex to flex in the range-editor class may affect layout behavior. Ensure this change is tested across all supported devices to confirm it doesn't introduce any layout issues.
WalkthroughThis PR fixes the display problem of datetime-picker on mobile, adjusting its display style to flex layout to better adapt to container width. Changes
|
|
[e2e-test-warn] The title of the Pull request should look like "fix(vue-renderless): [action-menu, alert] fix xxx bug". Please make sure you've read our contributing guide |
PR
datetime-picker的多端模板中，宽度自适应容器
PR Checklist
Please check if your PR fulfills the following requirements:
PR Type
What kind of change does this PR introduce?
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