From 6d9a694756eff99a344e7e88c15eaaa26947e034 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sascha=20I=C3=9Fbr=C3=BCcker?=
 <sascha.issbruecker@googlemail.com>
Date: Sun, 10 Aug 2025 10:05:46 +0200
Subject: [PATCH] Wrap long titles in bookmark details modal (#1150)

---
 bookmarks/styles/bookmark-details.css            | 8 ++++++++
 bookmarks/templates/bookmarks/details/modal.html | 2 +-
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/bookmarks/styles/bookmark-details.css b/bookmarks/styles/bookmark-details.css
index 0dad87d..303f8e3 100644
--- a/bookmarks/styles/bookmark-details.css
+++ b/bookmarks/styles/bookmark-details.css
@@ -1,5 +1,13 @@
 /* Common styles */
 .bookmark-details {
+  .title {
+    word-break: break-word;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 5;
+    overflow: hidden;
+  }
+
   & .weblinks {
     display: flex;
     flex-direction: column;
diff --git a/bookmarks/templates/bookmarks/details/modal.html b/bookmarks/templates/bookmarks/details/modal.html
index 2773077..2937ed7 100644
--- a/bookmarks/templates/bookmarks/details/modal.html
+++ b/bookmarks/templates/bookmarks/details/modal.html
@@ -3,7 +3,7 @@
   <div class="modal-overlay"></div>
   <div class="modal-container" role="dialog" aria-modal="true">
     <div class="modal-header">
-      <h2>{{ details.bookmark.resolved_title }}</h2>
+      <h2 class="title">{{ details.bookmark.resolved_title }}</h2>
       <button class="close" aria-label="Close dialog">
         <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" stroke-width="2"
              stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">