Fix CSS to repair overflow of sidebar items

Author: pikinier20

scaladoc-js/src/Main.scala

@@ -5,4 +5,5 @@ object Main extends App {
   SocialLinks()
   CodeSnippets()
   DropdownHandler()
+  Ux()
 }

scaladoc-js/src/ux/Ux.scala

@@ -0,0 +1,23 @@
+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 modifySpan = (span: html.Span) => {
+      val textNodes = span.childNodes.filter(_.nodeType == 3)
+      val texts = textNodes.map(_.nodeValue).mkString
+      span.innerHTML = matchingRegex.replaceAllIn(texts, m => s"<wbr>${m.group(0)}")
+    }
+
+    val nodes = document.querySelectorAll("#sideMenu2 a span").collect {
+        case e: html.Span => e
+      }.foreach(modifySpan)
+
+  sideMenuItemsWordBreaking()

scaladoc/resources/dotty_res/styles/scalastyle.css

@@ -265,10 +265,10 @@ th {
 #sideMenu2 {
   overflow: auto;
   overflow-x: hidden;
-  overflow-y: scroll;
   scrollbar-width: thin;
   height: 100%;
   font-size: var(--leftbar-font-size);
+  margin-top: 5%;
 }
 
 /* divs in sidebar represent entry and its children */
@@ -307,19 +307,25 @@ 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) {
+  margin-right: 0.75ex;
+  text-indent: -1.5em;
+  padding-left: 1.5em;
+}
+
+#sideMenu2 a.selected span:not(.micon) {
+  margin-right: 0.5ex;
 }
 
 #sideMenu2 a.selected {
@@ -340,14 +346,12 @@ span.ar {
   position: absolute;
   right: 1em;
   top: 0px;
-  padding: 4px;
 }
 
 span.ar::before {
   content: "\e903"; /* arrow down */
   font-family: "dotty-icons" !important;
   font-size: 20px;
-  line-height: var(--leftbar-font-size);
   color: var(--leftbar-fg);
   display: flex;
   flex-direction: row;

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

@@ -166,7 +166,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())