material-components / material-components/material-web
md-menu with max-width
Nobody has claimed this yet.
- Dominant language
- SCSS
- Stars
- 11.3k
- Forks
- 1.1k
- Avg merge
- 20h 28m
- Merged PRs (30d)
- 13
Description
What is affected?
Component
Description
When using CSS max-width: 50% on a md-menu, the inner div.items inherits the max-width and applies it itself, which leads to wrong display.
Reproduction
https://lit.dev/playground/#gist=fa17bf6ea9bcfbef12c4fbc67f997ffe
Workaround
No workaround
Is this a regression?
Yes, worked with mwc-menu 0.27.0
Affected versions
1.0.1
Browser/OS/Node environment
Browser: Chrome 119.0.6045.123 (arm64)
Mac: Sonoma 14.1.1
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the linked Lit playground reproduction and the md-menu styling entry point, focusing on the inner div.items element and its max-width behavior. Confirm the issue by applying max-width: 50% to md-menu; done means the outer menu respects the constraint without incorrectly constraining div.items.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- scss
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 38/100