refs #15677 [master] handle long texts in facet sidebar

* 1. use hyphens: auto to break long words
* 2. break text of INNER .facet.text within BY WORD
* 3. fallback for chrome et cetera: break text of OUTER .sidebar BY ANY character - for loooong words, not already broken by 1. or 2.

themes/finc/scss/compiled.scss

@@ -1946,6 +1946,23 @@ footer {
   background: $sidebar-item-active-hover-bg;
 }
 
+// #13625 avoid ugly linebreaks with overlong words
+.sidebar {
+  -webkit-hyphens: auto;
+  -moz-hyphens: auto;
+  -ms-hyphens: auto;
+  -o-hyphens: auto;
+  hyphens: auto;
+  .facet {
+    -ms-word-break: break-all;
+    word-break: break-all; // fallback for hyphens: auto (Chrome on Desktop and bug on Mozilla for capitalized words)
+    .text {
+      -ms-word-break: break-word;
+      word-break: break-word;
+    }
+  }
+}
+
 //// OR- and AND-Facets + item counts in My Account
 ///// Style the exclude icons
 .exclude i {