Improve highlights

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);

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 {