adobe / adobe/spectrum-web-components

[Bug]: In sp-dialog prevent footer slot content from stretching button height when text wraps

Open
#5,905 1 comment 0 reactions 0 assignees View on GitHub
bug Component:Button Component:Dialog SEV 4 triage
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

Image

Image

### 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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.