adobe / adobe/spectrum-web-components
[Bug]: In sp-dialog prevent footer slot content from stretching button height when text wraps
- Dominant language
- TypeScript
- Stars
- 1.5k
- Forks
- 262
- Avg merge
- 3d 10h
- Merged PRs (30d)
- 68
Description
### Code of conduct
- [x] I agree to follow this project's code of conduct.
### Impacted component(s)
sp-dialog
### Library version
1.6.0
### Expected behavior
- The footer and button slots should remain aligned horizontally, but the buttons should keep their standard fixed height.
- Content in the footer slot (e.g., a checkbox with a multi-line label) should be able to wrap naturally without causing the buttons to grow in height.
### Actual behavior
- The footer and button slots are placed in the same row and share the same height.
- When the content inside the `footer slot` (such as a checkbox placed in the footer slot whose label wraps across multiple lines) grows vertically, the buttons in the `button slot` stretch to match that height.
- This results in unusually tall buttons and a visually inconsistent dialog footer.
### Screenshots
### What browsers are you seeing the problem in?
_No response_
### How can we reproduce this issue?
1. Go to https://stackblitz.com/edit/vitejs-vite-plwz22ly?file=src%2Fmy-element.ts
2. Open Preview in a new tab.
3. Switch to Mobile view using Chrome DevTools.
4. Check that the button occupies the height of the text content.
### Sample code or abstract reproduction which illustrates the problem
_No response_
### Severity
SEV 4
### Logs taken while reproducing problem
_No response_
### Would you like to track this issue in Jira?
- [x] Yes, please tell me the ticket number!
Contributor guide
Research direction
Start by locating the sp-dialog component and reproducing the issue from the linked StackBlitz example in mobile view. Inspect how the footer and button slots are laid out, then verify that wrapping footer content does not change the buttons' standard height while the slots remain horizontally aligned.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100