no wordwrap for bookmark widget link text

Author: ilude

app/static/css/bookmark_bar.css

@@ -39,7 +39,7 @@
 }
 
 #bookmarkBar li:hover > a {
-  
+
   background-color: #525252;
 }
 
@@ -55,6 +55,15 @@
   vertical-align: text-bottom;
 }
 
+#bookmarkBar .bookmark-name {
+  display: inline-block;
+  max-width: 10rem; /* reasonable cap so long names don't blow out the bar */
+  white-space: nowrap; /* prevent wrapping */
+  overflow: hidden; /* hide overflow */
+  text-overflow: ellipsis; /* show ellipsis when truncated */
+  vertical-align: middle;
+}
+
 #bookmarkBar ul ul {
   display: none;
   position: absolute;
@@ -77,4 +86,4 @@
 #bookmarkBar li:hover > ul {
   display: block;
   background-color: #2c2c2c;
-}
+}

app/static/css/links.css

@@ -15,3 +15,20 @@ a:hover, a:focus {
 .box-header-link, .box-header-link:visited, .header a:visited {
   color: #D3D3D3;
 }
+
+/* Prevent bookmark link text from wrapping and show ellipsis when too long */
+.bookmarks-link {
+  display: inline-block; /* allow width control while remaining inline */
+  max-width: 12rem; /* adjust as needed for your layout */
+  min-width: 0; /* allows shrinking inside flex containers */
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  vertical-align: middle;
+  word-break: normal;
+  overflow-wrap: normal;
+}
+
+.bookmarks-link:visited {
+  color: #98c379; /* keep same color for visited when using the class */
+}

app/templates/bookmark_bar.html

@@ -4,7 +4,7 @@
   <li>
     {% if bookmark.contents %}
       <a href="#">
-        <i class="fa fa-folder"></i> {{ bookmark.name }}
+        <i class="fa fa-folder"></i> <span class="bookmark-name">{{ bookmark.name }}</span>
       </a>
       {% with bookmarks = bookmark.contents %}
         {% include('bookmark_bar.html') %}
@@ -17,10 +17,10 @@
         {% else %}
           <i class="fa fa-link"></i>
         {% endif %}
-        {{ bookmark.name }}
+        <span class="bookmark-name">{{ bookmark.name }}</span>
       </a>
     {% endif %}
   </li>
 {% endfor %}
 </ul>
-{% endif %}
+{% endif %}