From 785be6aa9e16cbb6e07c4344f2b52d8ba285ff38 Mon Sep 17 00:00:00 2001 From: Gigi Date: Wed, 26 Nov 2025 23:12:48 +0100 Subject: [PATCH] style: make highlight text wrapping more aggressive --- src/styles/layout/highlights.css | 15 ++++++++++++++- 1 file changed, 14 insertions(+), 1 deletion(-) diff --git a/src/styles/layout/highlights.css b/src/styles/layout/highlights.css index e5905f5d..4bb2f515 100644 --- a/src/styles/layout/highlights.css +++ b/src/styles/layout/highlights.css @@ -149,7 +149,20 @@ .highlight-item.level-nostrverse .highlight-quote-icon { color: var(--highlight-color-nostrverse, #9333ea); } .highlight-content { flex: 1; display: flex; flex-direction: column; gap: 0.5rem; padding: 2.25rem 0.75rem 2.5rem; } -.highlight-text { margin: 0; padding: 0 0 0 1.25rem; font-style: italic; color: var(--color-text); line-height: 1.6; border-left: none; font-size: 0.95rem; } +.highlight-text { + margin: 0; + padding: 0 0 0 1.25rem; + font-style: italic; + color: var(--color-text); + line-height: 1.6; + border-left: none; + font-size: 0.95rem; + /* Aggressive wrapping for long words/URLs inside highlights */ + overflow-wrap: break-word; + word-wrap: break-word; + word-break: break-word; + hyphens: auto; +} .highlight-core { background: color-mix(in srgb, var(--highlight-color, #fde047) 35%, transparent); padding: 0 0.1em;