Yanked info box breaks layout

[uranusjr]

Describe the bug

https://pypi.org/project/aiohttp/#history

Looks like the box does not wrap correctly.

Expected behavior

The box should fit inside the version card, with the mesage correctly wrapped.

To Reproduce

Visit a history page with a sufficiently long yanked message in a sufficiently narrow browser window.

My Platform

The screenshot is from Firefox, but I see a similar layout on Safari too. This is on macOS 15.5.

Additional context

[woodruffw]

(Triage: I can confirm the bug.)

As a first blush, my guess is that white-space: nowrap in __yanked_reason is causing the problem here:

warehouse/warehouse/static/sass/blocks/_release.scss

Lines 114 to 118 in 51ffd8f

	&__yanked-reason p {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	}

[woodruffw]

Removing nowrap makes the yank reason match the layout bounds:

[miketheman]

The intent of the original css was to not wrap the message, rather to end it with an ellipsis, to prevent adding a wall of text that would hamper the ability to view the timeline.

[woodruffw]

Gotcha! In that case I think the problem is a missing display: block; in release__yanked-reason (i.e. the containing div) -- with that I get:

(I'm not 100% sure what the "right" thing to do here is -- should hovering over the ellipsis show a tooltip with the full yank reason?)

[miketheman]

display: block;

Yay! I think if you click on the "card", you get taken to the release's page, and show the full content of the yank reason up top, no ellipsis?

[woodruffw]

you get taken to the release's page, and show the full content of the yank reason up top, no ellipsis?

Oh yeah, you're 100% right. I forgot about that 🤦 -- no need for fancy tooltips then.