From 891c15e8e210671621cddc78587ca0e42f8d74e7 Mon Sep 17 00:00:00 2001 From: retoor Date: Tue, 8 Sep 2026 20:49:14 +0200 Subject: [PATCH] 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 Claude-Session: https://claude.ai/code/session_01Vnp7vzE4hvsytMo5YjszJm --- devplacepy/static/css/base.css | 8 ++++++++ pyproject.toml | 2 +- 2 files changed, 9 insertions(+), 1 deletion(-) diff --git a/devplacepy/static/css/base.css b/devplacepy/static/css/base.css index 327f5ca..4a392bb 100644 --- a/devplacepy/static/css/base.css +++ b/devplacepy/static/css/base.css @@ -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; diff --git a/pyproject.toml b/pyproject.toml index f011dd7..f456abd 100644 --- a/pyproject.toml +++ b/pyproject.toml @@ -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 = [