Fix truncated text on sidebar with long packages

4 files changed, 29 insertions, 9 deletions

diff --git a/plugins/base/src/main/kotlin/renderers/html/HtmlRenderer.kt b/plugins/base/src/main/kotlin/renderers/html/HtmlRenderer.kt
index 614d8f6e..d25bedb7 100644
--- a/plugins/base/src/main/kotlin/renderers/html/HtmlRenderer.kt
+++ b/plugins/base/src/main/kotlin/renderers/html/HtmlRenderer.kt
@@ -618,12 +618,15 @@ open class HtmlRenderer(
         }
     }
 
-    override fun FlowContent.buildText(textNode: ContentText) {
+    override fun FlowContent.buildText(textNode: ContentText) =
         when {
-            textNode.hasStyle(TextStyle.Indented) -> consumer.onTagContentEntity(Entities.nbsp)
+            textNode.hasStyle(TextStyle.Indented) -> {
+                consumer.onTagContentEntity(Entities.nbsp)
+                text(textNode.text)
+            }
+            textNode.hasStyle(TextStyle.Cover) -> buildBreakableDotSeparatedHtml(textNode.text)
+            else -> text(textNode.text)
         }
-        text(textNode.text)
-    }
 
     private fun generatePagesList() =
         pageList.entries
diff --git a/plugins/base/src/main/kotlin/renderers/html/NavigationPage.kt b/plugins/base/src/main/kotlin/renderers/html/NavigationPage.kt
index 8fe2a6c8..46295d71 100644
--- a/plugins/base/src/main/kotlin/renderers/html/NavigationPage.kt
+++ b/plugins/base/src/main/kotlin/renderers/html/NavigationPage.kt
@@ -25,9 +25,9 @@ class NavigationPage(val root: NavigationNode) : RendererSpecificPage {
                 id = navId
                 attributes["pageId"] = node.dri.toString()
                 div("overview") {
-                    buildLink(node.dri, node.sourceSets.toList()) { +node.name }
+                    buildLink(node.dri, node.sourceSets.toList()) { buildBreakableDotSeparatedHtml(node.name) }
                     if (node.children.isNotEmpty()) {
-                        span("navButton") {
+                        span("navButton pull-right") {
                             onClick = """document.getElementById("$navId").classList.toggle("hidden");"""
                             span("navButtonContent")
                         }
diff --git a/plugins/base/src/main/kotlin/renderers/html/htmlFormatingUtils.kt b/plugins/base/src/main/kotlin/renderers/html/htmlFormatingUtils.kt
new file mode 100644
index 00000000..1102b86d
--- /dev/null
+++ b/plugins/base/src/main/kotlin/renderers/html/htmlFormatingUtils.kt
@@ -0,0 +1,17 @@
+package org.jetbrains.dokka.base.renderers.html
+
+import kotlinx.html.FlowContent
+import kotlinx.html.span
+
+fun FlowContent.buildBreakableDotSeparatedHtml(name: String) {
+    val phrases = name.split(".")
+    phrases.dropLast(1).forEach {
+        span {
+            +"$it."
+        }
+        wbr { }
+    }
+    span {
+        +phrases.last()
+    }
+}
\ No newline at end of file
diff --git a/plugins/base/src/main/resources/dokka/styles/style.css b/plugins/base/src/main/resources/dokka/styles/style.css
index e275e493..b0bf8141 100644
--- a/plugins/base/src/main/resources/dokka/styles/style.css
+++ b/plugins/base/src/main/resources/dokka/styles/style.css
@@ -301,17 +301,16 @@ code.paragraph {
 }
 
 .sideMenuPart > .overview {
-    height: 40px;
     display: flex;
     align-items: center;
     position: relative;
     user-select: none; /* there's a weird bug with text selection */
+    padding: 8px 0;
 }
 
 .sideMenuPart a {
-    display: flex;
+    display: block;
     align-items: center;
-    flex: 1;
     height: 100%;
     color: #637282;
     overflow: hidden;
@@ -454,6 +453,7 @@ h1.cover {
 
     margin-bottom: 0;
     padding-bottom: 32px;
+    display: block;
 }
 
 h2 {