Fix CSS to repair overflow of sidebar items

Author: pikinier20

scaladoc-js/src/Main.scala

@@ -3,4 +3,5 @@ package dotty.tools.scaladoc
 object Main extends App {
   Searchbar()
   SocialLinks()
+  Ux()
 }

scaladoc-js/src/ux/Ux.scala

@@ -0,0 +1,20 @@
+package dotty.tools.scaladoc
+
+import org.scalajs.dom._
+import org.scalajs.dom.ext._
+
+import scala.util.matching.Regex._
+import scala.util.matching._
+
+class Ux():
+  def sideMenuItemsWordBreaking(): Unit =
+    val matchingRegex = raw"([.A-Z])".r
+    def modifyingFunc = (e: Node) => e.nodeValue = matchingRegex.replaceAllIn(e.nodeValue, m => s"\u200B${m.group(0)}")
+    val nodes = document.querySelectorAll("#sideMenu2 a span").collect {
+        case e: html.Element => e
+      }
+      .flatMap { e => e.childNodes }
+      .filter(_.nodeType == 3)
+    nodes.foreach(modifyingFunc)
+
+  sideMenuItemsWordBreaking()

scaladoc/resources/dotty_res/styles/scalastyle.css

@@ -157,7 +157,6 @@ th {
 #sideMenu2 {
   overflow: auto;
   overflow-x: hidden;
-  overflow-y: scroll;
   scrollbar-width: thin;
   height: 100%;
   font-size: var(--leftbar-font-size);
@@ -199,19 +198,21 @@ th {
   display: flex;
   align-items: center;
   flex: 1;
-  overflow-x: hidden;
   overflow-wrap: anywhere;
   color: var(--leftbar-fg);
   margin-right: .5rem;
-  padding-top: 3px;
-  padding-bottom: 3px;
-  margin-top: 1px;
-  margin-bottom: 1px;
-  width: 100%;
-  /* This trick adds selected background stretching to the left side of screen */
-  margin-left: calc(0px - var(--side-width));
-  padding-left: var(--side-width);
-  width: calc(2 * var(--side-width));
+  padding-top: 2%;
+  padding-bottom: 2%;
+  width: calc(var(--side-width));
+  padding-left: calc(0.05 * var(--side-width));
+  padding-right: calc(0.3 * var(--side-width));
+  box-sizing: border-box;
+}
+
+#sideMenu2 a span:not(.micon) {
+  padding-left: 1.5em;
+  text-indent: -1.5em;
+  width: calc(0.55 * var(--side-width));
 }
 
 #sideMenu2 a.selected {

scaladoc/src/dotty/tools/scaladoc/renderers/HtmlRenderer.scala

@@ -158,7 +158,7 @@ class HtmlRenderer(rootPackage: Member, val members: Map[DRI, Member])(using ctx
           case m: Member => navigationIcon(m)
           case _ => Nil
         }
-        Seq(a(href := pathToPage(pageLink.dri, nav.link.dri), attrs)(icon, nav.link.name))
+        Seq(a(href := pathToPage(pageLink.dri, nav.link.dri), attrs)(icon, span(nav.link.name)))
 
       nav.children match
         case Nil => isSelected -> div(linkHtml())