(search) Improve hyphenation logic for titles

code/services-application/search-service/java/nu/marginalia/search/model/UrlDetails.java

@@ -92,8 +92,20 @@ public class UrlDetails implements Comparable<UrlDetails> {
     public String displayTitle() {
         StringBuilder sb = new StringBuilder();
 
+        int distSinceBreak = 0;
+
+        char c = ' ';
+        int prevC = ' ';
         for (int i = 0; i < title.length(); i++) {
-            char c = title.charAt(i);
+            prevC = c;
+            c = title.charAt(i);
+
+            if (Character.isSpaceChar(c)) {
+                distSinceBreak = 0;
+            }
+            else {
+                distSinceBreak ++;
+            }
 
             if (c == '<') {
                 sb.append("&lt;");
@@ -105,9 +117,20 @@ public class UrlDetails implements Comparable<UrlDetails> {
                 sb.append("&amp;");
             }
             else if (!Character.isAlphabetic(c) && !Character.isWhitespace(c)) {
+                distSinceBreak = 0;
                 sb.append(c);
                 sb.append("&shy;");
             }
+            else if (Character.isUpperCase(c) && Character.isLowerCase(prevC)) {
+                distSinceBreak = 0;
+                sb.append("&shy;");
+                sb.append(c);
+            }
+            else if (distSinceBreak > 16) {
+                distSinceBreak = 0;
+                sb.append("&shy;");
+                sb.append(c);
+            }
             else {
                 sb.append(c);
             }

code/services-application/search-service/resources/static/search/css/style.css

@@ -590,12 +590,8 @@ video {
   inset: 0px;
 }
 
-.bottom-0 {
-  bottom: 0px;
-}
-
-.left-0 {
-  left: 0px;
+.bottom-10 {
+  bottom: 2.5rem;
 }
 
 .right-5 {
@@ -614,10 +610,6 @@ video {
   top: 1rem;
 }
 
-.top-5 {
-  top: 1.25rem;
-}
-
 .z-50 {
   z-index: 50;
 }
@@ -917,6 +909,12 @@ video {
   gap: 1.5rem;
 }
 
+.space-x-0 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-x-reverse: 0;
+  margin-right: calc(0px * var(--tw-space-x-reverse));
+  margin-left: calc(0px * calc(1 - var(--tw-space-x-reverse)));
+}
+
 .space-x-1 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-x-reverse: 0;
   margin-right: calc(0.25rem * var(--tw-space-x-reverse));
@@ -1029,6 +1027,10 @@ video {
   border-radius: 0.125rem;
 }
 
+.rounded-xl {
+  border-radius: 0.75rem;
+}
+
 .border {
   border-width: 1px;
 }
@@ -1115,10 +1117,6 @@ video {
   background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
 }
 
-.bg-gray-50\/90 {
-  background-color: rgb(249 250 251 / 0.9);
-}
-
 .bg-green-50 {
   --tw-bg-opacity: 1;
   background-color: rgb(240 253 244 / var(--tw-bg-opacity, 1));
@@ -1520,6 +1518,14 @@ video {
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
+.outline-1 {
+  outline-width: 1px;
+}
+
+.outline-margeblue {
+  outline-color: #3e5f6f;
+}
+
 .filter {
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
@@ -1594,6 +1600,15 @@ video {
   --tw-ring-offset-width: 2px;
 }
 
+.active\:text-slate-200:active {
+  --tw-text-opacity: 1;
+  color: rgb(226 232 240 / var(--tw-text-opacity, 1));
+}
+
+.active\:outline:active {
+  outline-style: solid;
+}
+
 .has-\[\:checked\]\:bg-gray-100:has(:checked) {
   --tw-bg-opacity: 1;
   background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
@@ -1620,10 +1635,6 @@ video {
 }
 
 @media (min-width: 640px) {
-  .sm\:static {
-    position: static;
-  }
-
   .sm\:m-0 {
     margin: 0px;
   }
@@ -1664,21 +1675,14 @@ video {
     margin-bottom: calc(0px * var(--tw-space-y-reverse));
   }
 
-  .sm\:border-none {
-    border-style: none;
+  .sm\:space-y-6 > :not([hidden]) ~ :not([hidden]) {
+    --tw-space-y-reverse: 0;
+    margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
+    margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
   }
 
-  .sm\:bg-white {
-    --tw-bg-opacity: 1;
-    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
-  }
-
-  .sm\:p-0 {
-    padding: 0px;
-  }
-
-  .sm\:p-3 {
-    padding: 0.75rem;
+  .sm\:p-4 {
+    padding: 1rem;
   }
 
   .sm\:px-2 {