Apply review suggestions from PR #11822

Author: KacperFKorban

scaladoc-js/resources/scaladoc-searchbar.css

@@ -103,7 +103,29 @@
     margin-left: auto;
 }
 
-.hide-snippet-comments-button {
+.snippet-comment-button {
     position: absolute;
-    left: 90%;
+    left: 50%;
+    width: 24px;
+    height: 24px;
+}
+
+.show-snippet-comments-button {
+    -ms-transform: translate(calc(-50% + 5em), -50%);
+    transform: translate(calc(-50% + 5em), -50%);
+    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Ccircle cx='12' cy='12' r='12' fill='white'/%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M19 11.0053L19 13.1085H12.9873L12.988 19H10.8714L10.8721 13.1085L5 13.1085L5 11.0053L10.8721 11.0053V5L12.9865 5.00074L12.988 11.0045L19 11.0053Z' fill='%2327282C' fill-opacity='0.75'/%3E %3C/svg%3E");
+}
+
+.show-snippet-comments-button:hover {
+    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Ccircle cx='12' cy='12' r='12' fill='light grey'/%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M19 11.0053L19 13.1085H12.9873L12.988 19H10.8714L10.8721 13.1085L5 13.1085L5 11.0053L10.8721 11.0053V5L12.9865 5.00074L12.988 11.0045L19 11.0053Z' fill='%2327282C' fill-opacity='0.75'/%3E %3C/svg%3E");
+}
+
+.hide-snippet-comments-button {
+    -ms-transform: translate(calc(-50% + 5em), -50%) rotate(45deg);
+    transform: translate(calc(-50% + 5em), -50%) rotate(45deg);
+    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Ccircle cx='12' cy='12' r='12' fill='white'/%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M19 11.0053L19 13.1085H12.9873L12.988 19H10.8714L10.8721 13.1085L5 13.1085L5 11.0053L10.8721 11.0053V5L12.9865 5.00074L12.988 11.0045L19 11.0053Z' fill='%2327282C' fill-opacity='0.75'/%3E %3C/svg%3E");
+}
+
+.hide-snippet-comments-button:hover {
+    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Ccircle cx='12' cy='12' r='12' fill='light grey'/%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M19 11.0053L19 13.1085H12.9873L12.988 19H10.8714L10.8721 13.1085L5 13.1085L5 11.0053L10.8721 11.0053V5L12.9865 5.00074L12.988 11.0045L19 11.0053Z' fill='%2327282C' fill-opacity='0.75'/%3E %3C/svg%3E");
 }

scaladoc-js/src/searchbar/code-snippets/CodeSnippets.scala

@@ -25,13 +25,19 @@ class CodeSnippets:
   toggleHide(document)
 
   document.querySelectorAll("pre").foreach {
-    case e: html.Element =>
+    case e: html.Element if e.querySelectorAll("code span.hideable").nonEmpty =>
       val a = document.createElement("a")
-      a.textContent = "Show"
       a.addEventListener("click", { (_: MouseEvent) =>
-        a.textContent = if a.textContent == "Show" then "Hide" else "Show"
+        if(a.classList.contains("hide-snippet-comments-button")) {
+          a.classList.add("show-snippet-comments-button")
+          a.classList.remove("hide-snippet-comments-button")
+        } else {
+          a.classList.add("hide-snippet-comments-button")
+          a.classList.remove("show-snippet-comments-button")
+        }
         toggleHide(e)
       })
-      a.classList.add("hide-snippet-comments-button")
+      a.classList.add("snippet-comment-button")
+      a.classList.add("show-snippet-comments-button")
       e.insertBefore(a, e.firstChild)
   }

scaladoc-testcases/src/tests/snippetComments.scala

@@ -16,7 +16,7 @@ package tests.snippetComments
  * /*
  *  multi line comment
  *  */
- *
+ * val reallyFLongDeclaration = "1234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890"
  * val y = 2 // comment in the same line
  * // comment in new line
  * val z = 3

scaladoc/resources/dotty_res/styles/scalastyle.css

@@ -5,7 +5,9 @@
   --border-light: #DADFE6;
   --border-medium: #abc;
 
+  --body-bg: #f0f3f6;
   --code-bg: #F4F5FA;
+  --documentable-bg: #FFFFFF;
   --symbol-fg: #333;
   --link-fg: #00607D;
   --link-hover-fg: #00A0D0;
@@ -45,6 +47,7 @@ body {
   padding: 0;
   font-family: "Lato", sans-serif;
   font-size: 16px;
+  background-color: var(--body-bg);
 }
 
 /* Page layout */
@@ -75,7 +78,12 @@ h1, h2, h3 {
   font-family: var(--title-font);
   color: var(--title-fg);
 }
-pre, code, .monospace, .hljs {
+.monospace {
+  font-family: var(--mono-font);
+  background: var(--documentable-bg);
+  font-variant-ligatures: none;
+}
+pre, code, .hljs {
   font-family: var(--mono-font);
   background: var(--code-bg);
   font-variant-ligatures: none;
@@ -84,12 +92,15 @@ code {
   font-size: .8em;
   padding: 0 .3em;
 }
+pre {
+  overflow-x: auto;
+}
 pre code, pre code.hljs {
   font-size: 1em;
   padding: 0;
 }
 pre, .symbol.monospace {
-  padding: 10px 8px 10px 12px;
+  padding: 12px 8px 10px 12px;
   font-weight: 500;
   font-size: 12px;
 }
@@ -468,12 +479,18 @@ footer .pull-right {
   padding-right: 0.5em;
   min-width: 10em;
   max-width: 10em;
+  width: 10em;
   overflow: hidden;
   direction: rtl;
   white-space: nowrap;
   text-indent: 0em;
 }
 
+.documentableElement .docs {
+  width: 100%;
+  table-layout: fixed;
+}
+
 .documentableElement .modifiers .other-modifiers {
   color: gray;
 }
@@ -514,8 +531,8 @@ footer .pull-right {
   padding: 5px 4px 5px 4px;
   font-weight: 500;
   font-size: 12px;
-  background: var(--code-bg);
-  border: 0.25em solid white;
+  background: var(--documentable-bg);
+  border: 0.25em solid var(--body-bg);
 }
 
 .documentableElement>div {
@@ -524,12 +541,11 @@ footer .pull-right {
 
 .expand.documentableElement>div {
   display: block;
-  padding-left: 3em;
 }
 
 .expand.documentableElement>div.header {
   display: block;
-  padding-left: 7.5em;
+  padding-left: 4.5em;
   text-indent: -4.5em;
 }