Fix related-post sidebar preview text overflowing its card

.related-title/.related-meta (the "Gists from X"/"Projects from X"/
"Related Discussions" preview lines in the post-page sidebar) had no
overflow protection at all - no overflow, word-break, text-overflow,
or min-width. They're plain-text previews from content_preview(), not
run through the render_content markdown pipeline that normal post/
comment bodies get (which already has word-break: break-word) - so
this bug was unique to these sidebar previews. Combined with
.related-link being a flex-direction: column container with
align-items: flex-start, each line sizes to its own content width
instead of the card's, so one long unbroken token (a URL) runs past
the card edge with nothing to stop it.

Reported case (a project description ending in a bare GitHub URL)
happens to fit by half a pixel in one exact browser/width/font
combination, which is why it doesn't always reproduce - proved the
underlying CSS is still unsafe by reproducing the real content in an
isolated harness against the actual CSS and forcing a worst-case
unbroken string: it overflowed the card by 72px.

Added min-width: 0 to .related-link and single-line ellipsis
truncation (max-width: 100%, overflow: hidden, text-overflow:
ellipsis, white-space: nowrap) to both .related-title and
.related-meta - the same pattern already used correctly by the
messages conversation list. Checked every other consumer of
content_preview() and every visually similar flex-column card
sitewide; this was the only remaining gap.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Vnp7vzE4hvsytMo5YjszJm
This commit is contained in:
2026-09-08 20:49:14 +02:00
co-authored by Claude Sonnet 5
parent d88b3cea8e
commit 891c15e8e2
2 changed files with 9 additions and 1 deletions
+8
View File
@@ -188,11 +188,19 @@
gap: 0.25rem;
padding: 0.75rem;
width: 100%;
min-width: 0;
border-radius: var(--radius);
}
.related-link:hover {
background: var(--bg-card);
}
.related-title,
.related-meta {
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.related-title {
color: var(--text-primary);
font-size: 0.875rem;
+1 -1
View File
@@ -1,6 +1,6 @@
[project]
name = "devplacepy"
version = "1.0.11"
version = "1.0.12"
description = "DevPlace - The Developer Social Network"
requires-python = ">=3.12"
dependencies = [