From aeeb19ad29afaf211be82f76fb0362aaaf3ab6c9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nu=C5=A1a=20Puk=C5=A1i=C4=8D?= <nusa.puksic@gmail.com>
Date: Mon, 8 Dec 2025 18:18:23 +0100
Subject: [PATCH] Improve highlights

---
 assets/controllers/ui/highlights_toggle_controller.js | 2 +-
 assets/styles/04-pages/highlights.css                 | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/assets/controllers/ui/highlights_toggle_controller.js b/assets/controllers/ui/highlights_toggle_controller.js
index 415935e..e508e1c 100644
--- a/assets/controllers/ui/highlights_toggle_controller.js
+++ b/assets/controllers/ui/highlights_toggle_controller.js
@@ -49,7 +49,7 @@ export default class extends Controller {
                     range.setEnd(textNode, startIndex + searchText.length);
                     const mark = document.createElement('mark');
                     mark.className = 'article-highlight';
-                    mark.setAttribute('data-highlights-toggle-target', 'highlight');
+                    mark.setAttribute('data-ui--highlights-toggle-target', 'highlight');
                     mark.setAttribute('title', 'Highlighted by others (' + new Date(highlight.created_at * 1000).toLocaleDateString() + ')');
                     try {
                         range.surroundContents(mark);
diff --git a/assets/styles/04-pages/highlights.css b/assets/styles/04-pages/highlights.css
index 1564f79..1328a72 100644
--- a/assets/styles/04-pages/highlights.css
+++ b/assets/styles/04-pages/highlights.css
@@ -164,6 +164,7 @@
     font-size: 0.95rem;
     line-height: 1.4;
     color: var(--color-text);
+    word-wrap: break-word;
 }
 
 .highlight-mark-compact {