Conversation
…e max-width - Add native title attribute to truncated option label and description in MenuItemContent.vue - Add responsive max-width containment to menuClasses.content - Add unit test suite in MenuItemContent.test.ts
 |
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
| export const menuClasses = { | ||
| content: | ||
| 'menu-content z-[100] min-w-40 divide-y divide-outline-elevation-2 rounded-6 bg-surface-elevation-2 shadow-2xl ring-1 ring-black ring-opacity-5 focus:outline-none', | ||
| 'menu-content z-[100] min-w-40 max-w-[min(26rem,calc(100vw-2rem))] divide-y divide-outline-elevation-2 rounded-6 bg-surface-elevation-2 shadow-2xl ring-1 ring-black ring-opacity-5 focus:outline-none', |
There was a problem hiding this comment.
When matchTriggerWidth is enabled and the trigger is wider than 26rem, this shared maximum width clamps the menu instead of matching the trigger exactly. Apply the responsive cap only when trigger-width matching is disabled.
Prompt To Fix With AI
This is a comment left during a code review.
Path: src/components/Menu/utils.ts
Line: 19
Comment:
**Trigger width gets capped**
When `matchTriggerWidth` is enabled and the trigger is wider than 26rem, this shared maximum width clamps the menu instead of matching the trigger exactly. Apply the responsive cap only when trigger-width matching is disabled.
---
For each issue above, determine whether it is valid and should be fixed. If so, fix it directly.There was a problem hiding this comment.
Fixed in bcee21a: extracted menuClasses.contentMaxWidth and applied it to Dropdown.vue only when trigger-width matching is disabled (!matchTriggerWidth && menuClasses.contentMaxWidth). Also added the required ## Changelog section to the PR description.
- Isolate contentMaxWidth to avoid clamping menus when matchTriggerWidth is enabled - Apply contentMaxWidth to Dropdown only when matchTriggerWidth is disabled - Apply contentMaxWidth to ContextMenu and submenu containers
2 participants
Summary
When dropdown menus contain items with long labels or descriptions (e.g. site/subdomain switchers in Frappe Cloud, multi-account selectors, or workflow actions), the text is truncated with
.truncate.Currently, hovering over a truncated item does not reveal the underlying full string, forcing users to click blindly or guess between items with similar prefixes. Additionally, unconstrained dropdowns can overflow narrow viewport widths.
This PR introduces two focused enhancements:
:title="item.label"and:title="item.description"on the label and description containers inMenuItemContent.vue.max-w-[min(26rem,calc(100vw-2rem))]to unconstrained menus, while preserving trigger matching whenmatchTriggerWidthis enabled.Before & After
frappe-enterprise-sandbox-migrat...) cannot be inspected on hover, leaving critical subdomain information hidden.frappe-enterprise-sandbox-migration-test.frappe.cloud) via the browser's native accessible tooltip.Verification
src/components/Menu/MenuItemContent.test.ts.yarn type-checkpasses with 0 errors.Changelog
:titleto truncated item label and description for hover inspection.max-w-[min(26rem,calc(100vw-2rem))]containment to prevent viewport overflow while preserving trigger width matching whenmatchTriggerWidth: true.