feat(Menu): add style prevent text overflow #7124
Conversation
Reviewer's GuideThis PR adds a new CSS class to prevent text from overflowing in menu items by applying flex and overflow rules, refactors the Menu component SCSS to use nested syntax and improve readability, and updates the Razor component to apply the new style. Class diagram for updated MenuLink component structureclassDiagram
class MenuLink {
+NavLink
+submenu-link : div
+menu-text : span
+IconString : i
}
MenuLink --|> BootstrapComponentBase
File-Level Changes
Assessment against linked issues
Possibly linked issues
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}
There was a problem hiding this comment.
Hey there - I've reviewed your changes - here's some feedback:
- Verify that the nested SCSS selectors maintain the same specificity and don’t inadvertently alter existing menu styles (e.g., bottom or cascade variants).
- Consider renaming the
submenu-linkclass to something more descriptive of its overflow‐handling role rather than implying it only applies to submenus. - Test the new overflow truncation across various viewport sizes and RTL layouts to ensure menu text remains legible and unclipped.
Prompt for AI Agents
Please address the comments from this code review:
## Overall Comments
- Verify that the nested SCSS selectors maintain the same specificity and don’t inadvertently alter existing menu styles (e.g., bottom or cascade variants).
- Consider renaming the `submenu-link` class to something more descriptive of its overflow‐handling role rather than implying it only applies to submenus.
- Test the new overflow truncation across various viewport sizes and RTL layouts to ensure menu text remains legible and unclipped.Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #7124 +/- ##
=========================================
Coverage 100.00% 100.00%
=========================================
Files 745 745
Lines 32548 32548
Branches 4510 4510
=========================================
Hits 32548 32548
Flags with carried forward coverage won't be shown. Click here to find out more. ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
There was a problem hiding this comment.
Pull Request Overview
This PR adds CSS styles to prevent text overflow in menu items, addressing issue #7121. The changes introduce a wrapper div with overflow handling to ensure long menu text is properly truncated.
- Changed the menu link content wrapper from generic
flex-fillclass to a specificsubmenu-linkclass - Added CSS rules for text overflow prevention with flexbox-based truncation
- Reformatted the entire SCSS file with consistent indentation
Reviewed Changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 2 comments.
| File | Description |
|---|---|
| src/BootstrapBlazor/Components/Menu/MenuLink.razor | Updated the div wrapper class from flex-fill to submenu-link to support overflow styling |
| src/BootstrapBlazor/Components/Menu/Menu.razor.scss | Added new .submenu-link style rules with flex and overflow properties to handle text truncation; reformatted entire file with consistent indentation |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| min-width: 0; | ||
| width: 1%; | ||
| white-space: nowrap; | ||
| overflow: hidden; |
There was a problem hiding this comment.
The overflow prevention is missing text-overflow: ellipsis; to show an ellipsis (...) when text is truncated. Without this property, the text will be cut off abruptly. Consider adding text-overflow: ellipsis; to improve the user experience when menu text overflows.
| overflow: hidden; | |
| overflow: hidden; | |
| text-overflow: ellipsis; |
| .menu .nav-link > .submenu-link { | ||
| flex: 1 1 auto; | ||
| min-width: 0; | ||
| width: 1%; |
There was a problem hiding this comment.
[nitpick] The width: 1% property appears to be used as a flexbox hack to force the container to respect min-width: 0. While this is a known technique, it may not be necessary here since min-width: 0 with flex: 1 1 auto is typically sufficient for text truncation. Consider testing if removing width: 1% still achieves the desired overflow behavior.
| width: 1%; |
Link issues
fixes #7121
Summary By Copilot
Regression?
Risk
Verification
Packaging changes reviewed?
☑️ Self Check before Merge
Summary by Sourcery
Prevent text overflow in menu items by introducing a .submenu-link wrapper with overflow hidden and updating the SCSS structure accordingly.
Bug Fixes:
Enhancements: