Accordion chevron padding

[laurimiller]

I ran into an issue with long accordion headings in the summary tags pushing the chevron onto the next line or out of the button element on certain screen sizes.

I'm wondering if there's an easy way I could add padding to either the summary tag or the ::after element in order to force the text to wrap and have the chevron stay inline with the first row of text?

Environment

Mac OS, Firefox 135.0b6

[Yohn]

I agree, this would be super helpful.
If anyone has come up with a solution for this that would be awesome to see! If not I'll probably try to tackle it here in the coming days.

[Yohn]

The following would need a little more testing, but should work.

details summary {
  position: relative;
}

details summary::after {
  float: none;
  position: absolute;
  top: calc(var(--pico-block-spacing-vertical) * .5);
  right: calc(var(--pico-block-spacing-horizontal) * .5);
}

[Leftium]

I think I fixed this in my project by forcing the summary text to one line with ellipses:

Live Demo

Relevant source: https://github.com/Leftium/multi-launch/blob/298e80ae83981d2fb0d76bb7df1f060f348b55c5/src/routes/%2Bpage.svelte#L628-L632

	.editor > summary > div > span:first-child {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

[Yohn]

Yeah that's a nice clean way to do it without using relative and absolute positioning!