Platform tag is created only if content has one platform. Adjusted css: deleted animation. Div should handle multiple signatures.

40 files changed, 295 insertions, 567 deletions

diff --git a/plugins/base/src/main/kotlin/renderers/html/HtmlRenderer.kt b/plugins/base/src/main/kotlin/renderers/html/HtmlRenderer.kt
index c53b1b6d..4f0c1e55 100644
--- a/plugins/base/src/main/kotlin/renderers/html/HtmlRenderer.kt
+++ b/plugins/base/src/main/kotlin/renderers/html/HtmlRenderer.kt
@@ -141,20 +141,22 @@ open class HtmlRenderer(
                                         else -> div { it.build(this, pageContext, platformRestriction) }
                                     }
                                 }
-                            if (ContentKind.shouldBePlatformTagged(node.dci.kind)) {
+                            if (ContentKind.shouldBePlatformTagged(node.dci.kind) && node.platforms.size == 1) {
                                 createPlatformTags(node)
                             }
                         }
                     }
                     it.filter { it.dci.kind == ContentKind.Symbol }.takeIf { it.isNotEmpty() }?.let {
                         div("signature-subrow") {
-                            div("signature"){
-                                it.first().build(this, pageContext, platformRestriction)
+                            div("signatures"){
+                                it.forEach {
+                                    it.build(this, pageContext, platformRestriction)
+                                }
                             }
                         }
                     }
                 }
-            }
+        }
     }
 
     private fun FlowContent.createPlatformTags( node: ContentNode ) {
diff --git a/plugins/base/src/test/resources/expect/annotatedFunction/out/html/root/[jvm root]/index.html b/plugins/base/src/test/resources/expect/annotatedFunction/out/html/root/[jvm root]/index.html
index dae12276..19d0dfb8 100644
--- a/plugins/base/src/test/resources/expect/annotatedFunction/out/html/root/[jvm root]/index.html
+++ b/plugins/base/src/test/resources/expect/annotatedFunction/out/html/root/[jvm root]/index.html
@@ -36,7 +36,7 @@
                 </div>
               </div>
               <div class="signature-subrow">
-                <div class="signature">
+                <div class="signatures">
                   <div class="platform-hinted" data-platform-hinted="data-platform-hinted"><div class="content" data-active="" data-togglable="jvm"><div class="symbol "><div class="symbol monospace">final fun <a href="f.html">f</a>()</div></div></div></div>
                 </div>
               </div>
diff --git a/plugins/base/src/test/resources/expect/annotatedFunction/out/html/styles/style.css b/plugins/base/src/test/resources/expect/annotatedFunction/out/html/styles/style.css
index fc032e29..687a14e1 100644
--- a/plugins/base/src/test/resources/expect/annotatedFunction/out/html/styles/style.css
+++ b/plugins/base/src/test/resources/expect/annotatedFunction/out/html/styles/style.css
@@ -399,18 +399,12 @@ footer {
 }
 
 .platform-tag {
-    text-indent: 100%;
-    white-space: nowrap;
-    overflow: hidden;
-    width: 10px;
-    height: 10px;
-    max-width: 10px;
-    max-height: 10px;
-    border-radius: 8px;
-    transition: width 1s, height 1s;
-    margin-left: 14px;
-    margin-top: auto;
-    margin-bottom: auto;
+    display: flex;
+    flex-direction: row;
+    padding: 4px 8px;
+    height: 16px;
+    border-radius: 100px;
+
     font-family: Inter, Arial, sans-serif;
     font-size: 12px;
     font-weight: 400;
@@ -419,40 +413,25 @@ footer {
     line-height: normal;
     letter-spacing: normal;
     text-align: center;
+
     color: #fff
-}
 
-.table-row:hover .platform-tag,
-.table-row:hover > .platform-tag {
-    text-indent: 0;
-    white-space: nowrap;
-    padding: 0 7px;
-    border-radius: 9px;
-    margin-left: 8px;
-    width: auto;
-    height: 15px;
-    max-width: 500px;
-    max-height: 500px;
-    transition: max-width 1s, max-height 1s
 }
 
 .platform-tags {
     flex: auto;
     display: flex;
     flex-direction: row;
-    padding: 0px;
-    min-width: 230px;
     align-items: flex-start;
     justify-content: flex-end;
 }
 
 .platform-tags > .platform-tag {
     align-self: center;
-    margin: 10px;
 }
 
 .platform-tag:nth-child(1) {
-    background-color: blue;
+    background-color: #4DBB5F;
     color: white;
 }
 
@@ -497,6 +476,7 @@ td.content {
 
 .platform-hinted {
     display: block;
+    margin-bottom: 5px;
 }
 
 .platform-hinted > .platform-bookmarks-row {
@@ -518,7 +498,7 @@ td.content {
 }
 
 .platform-hinted > .platform-bookmarks-row > .platform-bookmark:nth-child(1):hover {
-    border-top: 2px solid blue;
+    border-top: 2px solid #4DBB5F;
 }
 
 .platform-hinted > .platform-bookmarks-row > .platform-bookmark:nth-child(2):hover {
@@ -556,6 +536,7 @@ td.content {
 .table {
     display: flex;
     flex-direction: column;
+    flex-direction: column;
 }
 
 .table-row {
@@ -593,8 +574,11 @@ td.content {
     order: 4;
 }
 
-.signature-subrow > .signature {
+.signature-subrow > .signatures {
     grid-column-start: 2;
+    display: flex;
+    flex-direction: column;
+    margin-top: 5px;
 }
 
 .signature-subrow > * {
diff --git a/plugins/base/src/test/resources/expect/annotatedFunctionWithAnnotationParameters/out/html/root/[jvm root]/-fancy/index.html b/plugins/base/src/test/resources/expect/annotatedFunctionWithAnnotationParameters/out/html/root/[jvm root]/-fancy/index.html
index e7ae1aae..458ec3fb 100644
--- a/plugins/base/src/test/resources/expect/annotatedFunctionWithAnnotationParameters/out/html/root/[jvm root]/-fancy/index.html
+++ b/plugins/base/src/test/resources/expect/annotatedFunctionWithAnnotationParameters/out/html/root/[jvm root]/-fancy/index.html
@@ -37,7 +37,7 @@
                 </div>
               </div>
               <div class="signature-subrow">
-                <div class="signature">
+                <div class="signatures">
                   <div class="platform-hinted" data-platform-hinted="data-platform-hinted"><div class="content" data-active="" data-togglable="jvm"><div class="symbol "><div class="symbol monospace">open fun <a href="equals.html">equals</a>(other: <a href="">Any</a>): <a href="">Boolean</a></div></div></div></div>
                 </div>
               </div>
@@ -53,7 +53,7 @@
                 </div>
               </div>
               <div class="signature-subrow">
-                <div class="signature">
+                <div class="signatures">
                   <div class="platform-hinted" data-platform-hinted="data-platform-hinted"><div class="content" data-active="" data-togglable="jvm"><div class="symbol "><div class="symbol monospace">open fun <a href="hash-code.html">hashCode</a>(): <a href="">Int</a></div></div></div></div>
                 </div>
               </div>
@@ -69,7 +69,7 @@
                 </div>
               </div>
               <div class="signature-subrow">
-                <div class="signature">
+                <div class="signatures">
                   <div class="platform-hinted" data-platform-hinted="data-platform-hinted"><div class="content" data-active="" data-togglable="jvm"><div class="symbol "><div class="symbol monospace">open fun <a href="to-string.html">toString</a>(): <a href="">String</a></div></div></div></div>
                 </div>
               </div>
@@ -88,8 +88,8 @@
                 </div>
               </div>
               <div class="signature-subrow">
-                <div class="signature">
-                  <div class="platform-hinted" data-platform-hinted="data-platform-hinted"><div class="content" data-active="" data-togglable="jvm"><div class="symbol "><div class="symbol monospace"><a href="">Int</a></div></div></div></div>
+                <div class="signatures">
+                  <div class="platform-hinted" data-platform-hinted="data-platform-hinted"><div class="content" data-active="" data-togglable="jvm"><div class="symbol "><div class="symbol monospace">final val <a href="">size</a>: <a href="">Int</a></div></div></div></div>
                 </div>
               </div>
             </div>
diff --git a/plugins/base/src/test/resources/expect/annotatedFunctionWithAnnotationParameters/out/html/root/[jvm root]/index.html b/plugins/base/src/test/resources/expect/annotatedFunctionWithAnnotationParameters/out/html/root/[jvm root]/index.html
index 15cc28a6..e125478b 100644
--- a/plugins/base/src/test/resources/expect/annotatedFunctionWithAnnotationParameters/out/html/root/[jvm root]/index.html
+++ b/plugins/base/src/test/resources/expect/annotatedFunctionWithAnnotationParameters/out/html/root/[jvm root]/index.html
@@ -36,7 +36,7 @@
                 </div>
               </div>
               <div class="signature-subrow">
-                <div class="signature">
+                <div class="signatures">
                   <div class="platform-hinted" data-platform-hinted="data-platform-hinted"><div class="content" data-active="" data-togglable="jvm"><div class="symbol "><div class="symbol monospace">annotation class <a href="-fancy/index.html">Fancy</a></div></div></div></div>
                 </div>
               </div>
@@ -55,7 +55,7 @@
                 </div>
               </div>
               <div class="signature-subrow">
-                <div class="signature">
+                <div class="signatures">
                   <div class="platform-hinted" data-platform-hinted="data-platform-hinted"><div class="content" data-active="" data-togglable="jvm"><div class="symbol "><div class="symbol monospace">final fun <a href="f.html">f</a>()</div></div></div></div>
                 </div>
               </div>
diff --git a/plugins/base/src/test/resources/expect/annotatedFunctionWithAnnotationParameters/out/html/scripts/pages.js b/plugins/base/src/test/resources/expect/annotatedFunctionWithAnnotationParameters/out/html/scripts/pages.js
index f321c8a8..b2d4e338 100644
--- a/plugins/base/src/test/resources/expect/annotatedFunctionWithAnnotationParameters/out/html/scripts/pages.js
+++ b/plugins/base/src/test/resources/expect/annotatedFunctionWithAnnotationParameters/out/html/scripts/pages.js
@@ -3,8 +3,7 @@ var pages = [
 { "name": "[jvm root]",  "location": "root/[jvm root]/index.html" },
 { "name": "f",  "location": "root/[jvm root]/f.html" },
 { "name": "Fancy", "class": "Fancy", "location": "root/[jvm root]/-fancy/index.html" },
-{ "name": "<init>",  "location": "root/[jvm root]/-fancy/-init-.html" },
-{ "name": "equals",  "location": "root/[jvm root]/-fancy/equals.html" },
 { "name": "toString",  "location": "root/[jvm root]/-fancy/to-string.html" },
-{ "name": "hashCode",  "location": "root/[jvm root]/-fancy/hash-code.html" }
+{ "name": "equals",  "location": "root/[jvm root]/-fancy/equals.html" },
+{ "name": "<init>",  "location": "root/[jvm root]/-fancy/-init-.html" }
 ]
diff --git a/plugins/base/src/test/resources/expect/annotatedFunctionWithAnnotationParameters/out/html/styles/style.css b/plugins/base/src/test/resources/expect/annotatedFunctionWithAnnotationParameters/out/html/styles/style.css
index fc032e29..687a14e1 100644
--- a/plugins/base/src/test/resources/expect/annotatedFunctionWithAnnotationParameters/out/html/styles/style.css
+++ b/plugins/base/src/test/resources/expect/annotatedFunctionWithAnnotationParameters/out/html/styles/style.css
@@ -399,18 +399,12 @@ footer {
 }
 
 .platform-tag {
-    text-indent: 100%;
-    white-space: nowrap;
-    overflow: hidden;
-    width: 10px;
-    height: 10px;
-    max-width: 10px;
-    max-height: 10px;
-    border-radius: 8px;
-    transition: width 1s, height 1s;
-    margin-left: 14px;
-    margin-top: auto;
-    margin-bottom: auto;
+    display: flex;
+    flex-direction: row;
+    padding: 4px 8px;
+    height: 16px;
+    border-radius: 100px;
+
     font-family: Inter, Arial, sans-serif;
     font-size: 12px;
     font-weight: 400;
@@ -419,40 +413,25 @@ footer {
     line-height: normal;
     letter-spacing: normal;
     text-align: center;
+
     color: #fff
-}
 
-.table-row:hover .platform-tag,
-.table-row:hover > .platform-tag {
-    text-indent: 0;
-    white-space: nowrap;
-    padding: 0 7px;
-    border-radius: 9px;
-    margin-left: 8px;
-    width: auto;
-    height: 15px;
-    max-width: 500px;
-    max-height: 500px;
-    transition: max-width 1s, max-height 1s
 }
 
 .platform-tags {
     flex: auto;
     display: flex;
     flex-direction: row;
-    padding: 0px;
-    min-width: 230px;
     align-items: flex-start;
     justify-content: flex-end;
 }
 
 .platform-tags > .platform-tag {
     align-self: center;
-    margin: 10px;
 }
 
 .platform-tag:nth-child(1) {
-    background-color: blue;
+    background-color: #4DBB5F;
     color: white;
 }
 
@@ -497,6 +476,7 @@ td.content {
 
 .platform-hinted {
     display: block;
+    margin-bottom: 5px;
 }
 
 .platform-hinted > .platform-bookmarks-row {
@@ -518,7 +498,7 @@ td.content {
 }
 
 .platform-hinted > .platform-bookmarks-row > .platform-bookmark:nth-child(1):hover {
-    border-top: 2px solid blue;
+    border-top: 2px solid #4DBB5F;
 }
 
 .platform-hinted > .platform-bookmarks-row > .platform-bookmark:nth-child(2):hover {
@@ -556,6 +536,7 @@ td.content {
 .table {
     display: flex;
     flex-direction: column;
+    flex-direction: column;
 }
 
 .table-row {
@@ -593,8 +574,11 @@ td.content {
     order: 4;
 }
 
-.signature-subrow > .signature {
+.signature-subrow > .signatures {
     grid-column-start: 2;
+    display: flex;
+    flex-direction: column;
+    margin-top: 5px;
 }
 
 .signature-subrow > * {
diff --git a/plugins/base/src/test/resources/expect/function/out/html/root/[jvm root]/index.html b/plugins/base/src/test/resources/expect/function/out/html/root/[jvm root]/index.html
index 3d09b17e..8254c41b 100644
--- a/plugins/base/src/test/resources/expect/function/out/html/root/[jvm root]/index.html
+++ b/plugins/base/src/test/resources/expect/function/out/html/root/[jvm root]/index.html
@@ -36,7 +36,7 @@
                 </div>
               </div>
               <div class="signature-subrow">
-                <div class="signature">
+                <div class="signatures">
                   <div class="platform-hinted" data-platform-hinted="data-platform-hinted"><div class="content" data-active="" data-togglable="jvm"><div class="symbol "><div class="symbol monospace">final fun <a href="fn.html">fn</a>()</div></div></div></div>
                 </div>
               </div>
diff --git a/plugins/base/src/test/resources/expect/function/out/html/styles/style.css b/plugins/base/src/test/resources/expect/function/out/html/styles/style.css
index fc032e29..687a14e1 100644
--- a/plugins/base/src/test/resources/expect/function/out/html/styles/style.css
+++ b/plugins/base/src/test/resources/expect/function/out/html/styles/style.css
@@ -399,18 +399,12 @@ footer {
 }
 
 .platform-tag {
-    text-indent: 100%;
-    white-space: nowrap;
-    overflow: hidden;
-    width: 10px;
-    height: 10px;
-    max-width: 10px;
-    max-height: 10px;
-    border-radius: 8px;
-    transition: width 1s, height 1s;
-    margin-left: 14px;
-    margin-top: auto;
-    margin-bottom: auto;
+    display: flex;
+    flex-direction: row;
+    padding: 4px 8px;
+    height: 16px;
+    border-radius: 100px;
+
     font-family: Inter, Arial, sans-serif;
     font-size: 12px;
     font-weight: 400;
@@ -419,40 +413,25 @@ footer {
     line-height: normal;
     letter-spacing: normal;
     text-align: center;
+
     color: #fff
-}
 
-.table-row:hover .platform-tag,
-.table-row:hover > .platform-tag {
-    text-indent: 0;
-    white-space: nowrap;
-    padding: 0 7px;
-    border-radius: 9px;
-    margin-left: 8px;
-    width: auto;
-    height: 15px;
-    max-width: 500px;
-    max-height: 500px;
-    transition: max-width 1s, max-height 1s
 }
 
 .platform-tags {
     flex: auto;
     display: flex;
     flex-direction: row;
-    padding: 0px;
-    min-width: 230px;
     align-items: flex-start;
     justify-content: flex-end;
 }
 
 .platform-tags > .platform-tag {
     align-self: center;
-    margin: 10px;
 }
 
 .platform-tag:nth-child(1) {
-    background-color: blue;
+    background-color: #4DBB5F;
     color: white;
 }
 
@@ -497,6 +476,7 @@ td.content {
 
 .platform-hinted {
     display: block;
+    margin-bottom: 5px;
 }
 
 .platform-hinted > .platform-bookmarks-row {
@@ -518,7 +498,7 @@ td.content {
 }
 
 .platform-hinted > .platform-bookmarks-row > .platform-bookmark:nth-child(1):hover {
-    border-top: 2px solid blue;
+    border-top: 2px solid #4DBB5F;
 }
 
 .platform-hinted > .platform-bookmarks-row > .platform-bookmark:nth-child(2):hover {
@@ -556,6 +536,7 @@ td.content {
 .table {
     display: flex;
     flex-direction: column;
+    flex-direction: column;
 }
 
 .table-row {
@@ -593,8 +574,11 @@ td.content {
     order: 4;
 }
 
-.signature-subrow > .signature {
+.signature-subrow > .signatures {
     grid-column-start: 2;
+    display: flex;
+    flex-direction: column;
+    margin-top: 5px;
 }
 
 .signature-subrow > * {
diff --git a/plugins/base/src/test/resources/expect/functionWithAnnotatedParam/out/html/root/[jvm root]/-fancy/index.html b/plugins/base/src/test/resources/expect/functionWithAnnotatedParam/out/html/root/[jvm root]/-fancy/index.html
index f9f62321..6e63f9bd 100644
--- a/plugins/base/src/test/resources/expect/functionWithAnnotatedParam/out/html/root/[jvm root]/-fancy/index.html
+++ b/plugins/base/src/test/resources/expect/functionWithAnnotatedParam/out/html/root/[jvm root]/-fancy/index.html
@@ -37,7 +37,7 @@
                 </div>
               </div>
               <div class="signature-subrow">
-                <div class="signature">
+                <div class="signatures">
                   <div class="platform-hinted" data-platform-hinted="data-platform-hinted"><div class="content" data-active="" data-togglable="jvm"><div class="symbol "><div class="symbol monospace">open fun <a href="equals.html">equals</a>(other: <a href="">Any</a>): <a href="">Boolean</a></div></div></div></div>
                 </div>
               </div>
@@ -53,7 +53,7 @@
                 </div>
               </div>
               <div class="signature-subrow">
-                <div class="signature">
+                <div class="signatures">
                   <div class="platform-hinted" data-platform-hinted="data-platform-hinted"><div class="content" data-active="" data-togglable="jvm"><div class="symbol "><div class="symbol monospace">open fun <a href="hash-code.html">hashCode</a>(): <a href="">Int</a></div></div></div></div>
                 </div>
               </div>
@@ -69,7 +69,7 @@
                 </div>
               </div>
               <div class="signature-subrow">
-                <div class="signature">
+                <div class="signatures">
                   <div class="platform-hinted" data-platform-hinted="data-platform-hinted"><div class="content" data-active="" data-togglable="jvm"><div class="symbol "><div class="symbol monospace">open fun <a href="to-string.html">toString</a>(): <a href="">String</a></div></div></div></div>
                 </div>
               </div>
diff --git a/plugins/base/src/test/resources/expect/functionWithAnnotatedParam/out/html/root/[jvm root]/index.html b/plugins/base/src/test/resources/expect/functionWithAnnotatedParam/out/html/root/[jvm root]/index.html
index ae5add43..34c24707 100644
--- a/plugins/base/src/test/resources/expect/functionWithAnnotatedParam/out/html/root/[jvm root]/index.html
+++ b/plugins/base/src/test/resources/expect/functionWithAnnotatedParam/out/html/root/[jvm root]/index.html
@@ -36,7 +36,7 @@
                 </div>
               </div>
               <div class="signature-subrow">
-                <div class="signature">
+                <div class="signatures">
                   <div class="platform-hinted" data-platform-hinted="data-platform-hinted"><div class="content" data-active="" data-togglable="jvm"><div class="symbol "><div class="symbol monospace">annotation class <a href="-fancy/index.html">Fancy</a></div></div></div></div>
                 </div>
               </div>
@@ -55,7 +55,7 @@
                 </div>
               </div>
               <div class="signature-subrow">
-                <div class="signature">
+                <div class="signatures">
                   <div class="platform-hinted" data-platform-hinted="data-platform-hinted"><div class="content" data-active="" data-togglable="jvm"><div class="symbol "><div class="symbol monospace">final fun <a href="function.html">function</a>(notInlined: <div class="symbol monospace">() -&gt; <a href="">Unit</a></div>)</div></div></div></div>
                 </div>
               </div>
diff --git a/plugins/base/src/test/resources/expect/functionWithAnnotatedParam/out/html/scripts/pages.js b/plugins/base/src/test/resources/expect/functionWithAnnotatedParam/out/html/scripts/pages.js
index 45fc038f..5ed8d042 100644
--- a/plugins/base/src/test/resources/expect/functionWithAnnotatedParam/out/html/scripts/pages.js
+++ b/plugins/base/src/test/resources/expect/functionWithAnnotatedParam/out/html/scripts/pages.js
@@ -3,8 +3,8 @@ var pages = [
 { "name": "[jvm root]",  "location": "root/[jvm root]/index.html" },
 { "name": "function",  "location": "root/[jvm root]/function.html" },
 { "name": "Fancy", "class": "Fancy", "location": "root/[jvm root]/-fancy/index.html" },
-{ "name": "<init>",  "location": "root/[jvm root]/-fancy/-init-.html" },
 { "name": "toString",  "location": "root/[jvm root]/-fancy/to-string.html" },
-{ "name": "equals",  "location": "root/[jvm root]/-fancy/equals.html" },
-{ "name": "hashCode",  "location": "root/[jvm root]/-fancy/hash-code.html" }
+{ "name": "<init>",  "location": "root/[jvm root]/-fancy/-init-.html" },
+{ "name": "hashCode",  "location": "root/[jvm root]/-fancy/hash-code.html" },
+{ "name": "equals",  "location": "root/[jvm root]/-fancy/equals.html" }
 ]
diff --git a/plugins/base/src/test/resources/expect/functionWithAnnotatedParam/out/html/styles/style.css b/plugins/base/src/test/resources/expect/functionWithAnnotatedParam/out/html/styles/style.css
index fc032e29..687a14e1 100644
--- a/plugins/base/src/test/resources/expect/functionWithAnnotatedParam/out/html/styles/style.css
+++ b/plugins/base/src/test/resources/expect/functionWithAnnotatedParam/out/html/styles/style.css
@@ -399,18 +399,12 @@ footer {
 }
 
 .platform-tag {
-    text-indent: 100%;
-    white-space: nowrap;
-    overflow: hidden;
-    width: 10px;
-    height: 10px;
-    max-width: 10px;
-    max-height: 10px;
-    border-radius: 8px;
-    transition: width 1s, height 1s;
-    margin-left: 14px;
-    margin-top: auto;
-    margin-bottom: auto;
+    display: flex;
+    flex-direction: row;
+    padding: 4px 8px;
+    height: 16px;
+    border-radius: 100px;
+
     font-family: Inter, Arial, sans-serif;
     font-size: 12px;
     font-weight: 400;
@@ -419,40 +413,25 @@ footer {
     line-height: normal;
     letter-spacing: normal;
     text-align: center;
+
     color: #fff
-}
 
-.table-row:hover .platform-tag,
-.table-row:hover > .platform-tag {
-    text-indent: 0;
-    white-space: nowrap;
-    padding: 0 7px;
-    border-radius: 9px;
-    margin-left: 8px;
-    width: auto;
-    height: 15px;
-    max-width: 500px;
-    max-height: 500px;
-    transition: max-width 1s, max-height 1s
 }
 
 .platform-tags {
     flex: auto;
     display: flex;
     flex-direction: row;
-    padding: 0px;
-    min-width: 230px;
     align-items: flex-start;
     justify-content: flex-end;
 }
 
 .platform-tags > .platform-tag {
     align-self: center;
-    margin: 10px;
 }
 
 .platform-tag:nth-child(1) {
-    background-color: blue;
+    background-color: #4DBB5F;
     color: white;
 }
 
@@ -497,6 +476,7 @@ td.content {
 
 .platform-hinted {
     display: block;
+    margin-bottom: 5px;
 }
 
 .platform-hinted > .platform-bookmarks-row {
@@ -518,7 +498,7 @@ td.content {
 }
 
 .platform-hinted > .platform-bookmarks-row > .platform-bookmark:nth-child(1):hover {
-    border-top: 2px solid blue;
+    border-top: 2px solid #4DBB5F;
 }
 
 .platform-hinted > .platform-bookmarks-row > .platform-bookmark:nth-child(2):hover {
@@ -556,6 +536,7 @@ td.content {
 .table {
     display: flex;
     flex-direction: column;
+    flex-direction: column;
 }
 
 .table-row {
@@ -593,8 +574,11 @@ td.content {
     order: 4;
 }
 
-.signature-subrow > .signature {
+.signature-subrow > .signatures {
     grid-column-start: 2;
+    display: flex;
+    flex-direction: column;
+    margin-top: 5px;
 }
 
 .signature-subrow > * {
diff --git a/plugins/base/src/test/resources/expect/functionWithDefaultParameter/out/html/root/[jvm root]/index.html b/plugins/base/src/test/resources/expect/functionWithDefaultParameter/out/html/root/[jvm root]/index.html
index 5797c1f5..9debafe5 100644
--- a/plugins/base/src/test/resources/expect/functionWithDefaultParameter/out/html/root/[jvm root]/index.html
+++ b/plugins/base/src/test/resources/expect/functionWithDefaultParameter/out/html/root/[jvm root]/index.html
@@ -36,7 +36,7 @@
                 </div>
               </div>
               <div class="signature-subrow">
-                <div class="signature">
+                <div class="signatures">
                   <div class="platform-hinted" data-platform-hinted="data-platform-hinted"><div class="content" data-active="" data-togglable="jvm"><div class="symbol "><div class="symbol monospace">final fun <a href="f.html">f</a>(x: <a href="">String</a>)</div></div></div></div>
                 </div>
               </div>
diff --git a/plugins/base/src/test/resources/expect/functionWithDefaultParameter/out/html/styles/style.css b/plugins/base/src/test/resources/expect/functionWithDefaultParameter/out/html/styles/style.css
index fc032e29..687a14e1 100644
--- a/plugins/base/src/test/resources/expect/functionWithDefaultParameter/out/html/styles/style.css
+++ b/plugins/base/src/test/resources/expect/functionWithDefaultParameter/out/html/styles/style.css
@@ -399,18 +399,12 @@ footer {
 }
 
 .platform-tag {
-    text-indent: 100%;
-    white-space: nowrap;
-    overflow: hidden;
-    width: 10px;
-    height: 10px;
-    max-width: 10px;
-    max-height: 10px;
-    border-radius: 8px;
-    transition: width 1s, height 1s;
-    margin-left: 14px;
-    margin-top: auto;
-    margin-bottom: auto;
+    display: flex;
+    flex-direction: row;
+    padding: 4px 8px;
+    height: 16px;
+    border-radius: 100px;
+
     font-family: Inter, Arial, sans-serif;
     font-size: 12px;
     font-weight: 400;
@@ -419,40 +413,25 @@ footer {
     line-height: normal;
     letter-spacing: normal;
     text-align: center;
+
     color: #fff
-}
 
-.table-row:hover .platform-tag,
-.table-row:hover > .platform-tag {
-    text-indent: 0;
-    white-space: nowrap;
-    padding: 0 7px;
-    border-radius: 9px;
-    margin-left: 8px;
-    width: auto;
-    height: 15px;
-    max-width: 500px;
-    max-height: 500px;
-    transition: max-width 1s, max-height 1s
 }
 
 .platform-tags {
     flex: auto;
     display: flex;
     flex-direction: row;
-    padding: 0px;
-    min-width: 230px;
     align-items: flex-start;
     justify-content: flex-end;
 }
 
 .platform-tags > .platform-tag {
     align-self: center;
-    margin: 10px;
 }
 
 .platform-tag:nth-child(1) {
-    background-color: blue;
+    background-color: #4DBB5F;
     color: white;
 }
 
@@ -497,6 +476,7 @@ td.content {
 
 .platform-hinted {
     display: block;
+    margin-bottom: 5px;
 }
 
 .platform-hinted > .platform-bookmarks-row {
@@ -518,7 +498,7 @@ td.content {
 }
 
 .platform-hinted > .platform-bookmarks-row > .platform-bookmark:nth-child(1):hover {
-    border-top: 2px solid blue;
+    border-top: 2px solid #4DBB5F;
 }
 
 .platform-hinted > .platform-bookmarks-row > .platform-bookmark:nth-child(2):hover {
@@ -556,6 +536,7 @@ td.content {
 .table {
     display: flex;
     flex-direction: column;
+    flex-direction: column;
 }
 
 .table-row {
@@ -593,8 +574,11 @@ td.content {
     order: 4;
 }
 
-.signature-subrow > .signature {
+.signature-subrow > .signatures {
     grid-column-start: 2;
+    display: flex;
+    flex-direction: column;
+    margin-top: 5px;
 }
 
 .signature-subrow > * {
diff --git a/plugins/base/src/test/resources/expect/functionWithNoinlineParam/out/html/root/[jvm root]/index.html b/plugins/base/src/test/resources/expect/functionWithNoinlineParam/out/html/root/[jvm root]/index.html
index de3d845d..f1df6b9a 100644
--- a/plugins/base/src/test/resources/expect/functionWithNoinlineParam/out/html/root/[jvm root]/index.html
+++ b/plugins/base/src/test/resources/expect/functionWithNoinlineParam/out/html/root/[jvm root]/index.html
@@ -36,7 +36,7 @@
                 </div>
               </div>
               <div class="signature-subrow">
-                <div class="signature">
+                <div class="signatures">
                   <div class="platform-hinted" data-platform-hinted="data-platform-hinted"><div class="content" data-active="" data-togglable="jvm"><div class="symbol "><div class="symbol monospace">final fun <a href="function.html">function</a>(notInlined: <div class="symbol monospace">() -&gt; <a href="">Unit</a></div>)</div></div></div></div>
                 </div>
               </div>
diff --git a/plugins/base/src/test/resources/expect/functionWithNoinlineParam/out/html/styles/style.css b/plugins/base/src/test/resources/expect/functionWithNoinlineParam/out/html/styles/style.css
index fc032e29..687a14e1 100644
--- a/plugins/base/src/test/resources/expect/functionWithNoinlineParam/out/html/styles/style.css
+++ b/plugins/base/src/test/resources/expect/functionWithNoinlineParam/out/html/styles/style.css
@@ -399,18 +399,12 @@ footer {
 }
 
 .platform-tag {
-    text-indent: 100%;
-    white-space: nowrap;
-    overflow: hidden;
-    width: 10px;
-    height: 10px;
-    max-width: 10px;
-    max-height: 10px;
-    border-radius: 8px;
-    transition: width 1s, height 1s;
-    margin-left: 14px;
-    margin-top: auto;
-    margin-bottom: auto;
+    display: flex;
+    flex-direction: row;
+    padding: 4px 8px;
+    height: 16px;
+    border-radius: 100px;
+
     font-family: Inter, Arial, sans-serif;
     font-size: 12px;
     font-weight: 400;
@@ -419,40 +413,25 @@ footer {
     line-height: normal;
     letter-spacing: normal;
     text-align: center;
+
     color: #fff
-}
 
-.table-row:hover .platform-tag,
-.table-row:hover > .platform-tag {
-    text-indent: 0;
-    white-space: nowrap;
-    padding: 0 7px;
-    border-radius: 9px;
-    margin-left: 8px;
-    width: auto;
-    height: 15px;
-    max-width: 500px;
-    max-height: 500px;
-    transition: max-width 1s, max-height 1s
 }
 
 .platform-tags {
     flex: auto;
     display: flex;
     flex-direction: row;
-    padding: 0px;
-    min-width: 230px;
     align-items: flex-start;
     justify-content: flex-end;
 }
 
 .platform-tags > .platform-tag {
     align-self: center;
-    margin: 10px;
 }
 
 .platform-tag:nth-child(1) {
-    background-color: blue;
+    background-color: #4DBB5F;
     color: white;
 }
 
@@ -497,6 +476,7 @@ td.content {
 
 .platform-hinted {
     display: block;
+    margin-bottom: 5px;
 }
 
 .platform-hinted > .platform-bookmarks-row {
@@ -518,7 +498,7 @@ td.content {
 }
 
 .platform-hinted > .platform-bookmarks-row > .platform-bookmark:nth-child(1):hover {
-    border-top: 2px solid blue;
+    border-top: 2px solid #4DBB5F;
 }
 
 .platform-hinted > .platform-bookmarks-row > .platform-bookmark:nth-child(2):hover {
@@ -556,6 +536,7 @@ td.content {
 .table {
     display: flex;
     flex-direction: column;
+    flex-direction: column;
 }
 
 .table-row {
@@ -593,8 +574,11 @@ td.content {
     order: 4;
 }
 
-.signature-subrow > .signature {
+.signature-subrow > .signatures {
     grid-column-start: 2;
+    display: flex;
+    flex-direction: column;
+    margin-top: 5px;
 }
 
 .signature-subrow > * {
diff --git a/plugins/base/src/test/resources/expect/functionWithNotDocumentedAnnotation/out/html/root/[jvm root]/index.html b/plugins/base/src/test/resources/expect/functionWithNotDocumentedAnnotation/out/html/root/[jvm root]/index.html
index dae12276..19d0dfb8 100644
--- a/plugins/base/src/test/resources/expect/functionWithNotDocumentedAnnotation/out/html/root/[jvm root]/index.html
+++ b/plugins/base/src/test/resources/expect/functionWithNotDocumentedAnnotation/out/html/root/[jvm root]/index.html
@@ -36,7 +36,7 @@
                 </div>
               </div>
               <div class="signature-subrow">
-                <div class="signature">
+                <div class="signatures">
                   <div class="platform-hinted" data-platform-hinted="data-platform-hinted"><div class="content" data-active="" data-togglable="jvm"><div class="symbol "><div class="symbol monospace">final fun <a href="f.html">f</a>()</div></div></div></div>
                 </div>
               </div>
diff --git a/plugins/base/src/test/resources/expect/functionWithNotDocumentedAnnotation/out/html/styles/style.css b/plugins/base/src/test/resources/expect/functionWithNotDocumentedAnnotation/out/html/styles/style.css
index fc032e29..687a14e1 100644
--- a/plugins/base/src/test/resources/expect/functionWithNotDocumentedAnnotation/out/html/styles/style.css
+++ b/plugins/base/src/test/resources/expect/functionWithNotDocumentedAnnotation/out/html/styles/style.css
@@ -399,18 +399,12 @@ footer {
 }
 
 .platform-tag {
-    text-indent: 100%;
-    white-space: nowrap;
-    overflow: hidden;
-    width: 10px;
-    height: 10px;
-    max-width: 10px;
-    max-height: 10px;
-    border-radius: 8px;
-    transition: width 1s, height 1s;
-    margin-left: 14px;
-    margin-top: auto;
-    margin-bottom: auto;
+    display: flex;
+    flex-direction: row;
+    padding: 4px 8px;
+    height: 16px;
+    border-radius: 100px;
+
     font-family: Inter, Arial, sans-serif;
     font-size: 12px;
     font-weight: 400;
@@ -419,40 +413,25 @@ footer {
     line-height: normal;
     letter-spacing: normal;
     text-align: center;
+
     color: #fff
-}
 
-.table-row:hover .platform-tag,
-.table-row:hover > .platform-tag {
-    text-indent: 0;
-    white-space: nowrap;
-    padding: 0 7px;
-    border-radius: 9px;
-    margin-left: 8px;
-    width: auto;
-    height: 15px;
-    max-width: 500px;
-    max-height: 500px;
-    transition: max-width 1s, max-height 1s
 }
 
 .platform-tags {
     flex: auto;
     display: flex;
     flex-direction: row;
-    padding: 0px;
-    min-width: 230px;
     align-items: flex-start;
     justify-content: flex-end;
 }
 
 .platform-tags > .platform-tag {
     align-self: center;
-    margin: 10px;
 }
 
 .platform-tag:nth-child(1) {
-    background-color: blue;
+    background-color: #4DBB5F;
     color: white;
 }
 
@@ -497,6 +476,7 @@ td.content {
 
 .platform-hinted {
     display: block;
+    margin-bottom: 5px;
 }
 
 .platform-hinted > .platform-bookmarks-row {
@@ -518,7 +498,7 @@ td.content {
 }
 
 .platform-hinted > .platform-bookmarks-row > .platform-bookmark:nth-child(1):hover {
-    border-top: 2px solid blue;
+    border-top: 2px solid #4DBB5F;
 }
 
 .platform-hinted > .platform-bookmarks-row > .platform-bookmark:nth-child(2):hover {
@@ -556,6 +536,7 @@ td.content {
 .table {
     display: flex;
     flex-direction: column;
+    flex-direction: column;
 }
 
 .table-row {
@@ -593,8 +574,11 @@ td.content {
     order: 4;
 }
 
-.signature-subrow > .signature {
+.signature-subrow > .signatures {
     grid-column-start: 2;
+    display: flex;
+    flex-direction: column;
+    margin-top: 5px;
 }
 
 .signature-subrow > * {
diff --git a/plugins/base/src/test/resources/expect/functionWithParams/out/html/root/[jvm root]/index.html b/plugins/base/src/test/resources/expect/functionWithParams/out/html/root/[jvm root]/index.html
index 61b5e4aa..d5b21862 100644
--- a/plugins/base/src/test/resources/expect/functionWithParams/out/html/root/[jvm root]/index.html
+++ b/plugins/base/src/test/resources/expect/functionWithParams/out/html/root/[jvm root]/index.html
@@ -36,7 +36,7 @@
                 </div>
               </div>
               <div class="signature-subrow">
-                <div class="signature">
+                <div class="signatures">
                   <div class="platform-hinted" data-platform-hinted="data-platform-hinted"><div class="content" data-active="" data-togglable="jvm"><div class="symbol "><div class="symbol monospace">final fun <a href="function.html">function</a>(x: <a href="">Int</a>)</div></div></div></div>
                 </div>
               </div>
diff --git a/plugins/base/src/test/resources/expect/functionWithParams/out/html/styles/style.css b/plugins/base/src/test/resources/expect/functionWithParams/out/html/styles/style.css
index fc032e29..687a14e1 100644
--- a/plugins/base/src/test/resources/expect/functionWithParams/out/html/styles/style.css
+++ b/plugins/base/src/test/resources/expect/functionWithParams/out/html/styles/style.css
@@ -399,18 +399,12 @@ footer {
 }
 
 .platform-tag {
-    text-indent: 100%;
-    white-space: nowrap;
-    overflow: hidden;
-    width: 10px;
-    height: 10px;
-    max-width: 10px;
-    max-height: 10px;
-    border-radius: 8px;
-    transition: width 1s, height 1s;
-    margin-left: 14px;
-    margin-top: auto;
-    margin-bottom: auto;
+    display: flex;
+    flex-direction: row;
+    padding: 4px 8px;
+    height: 16px;
+    border-radius: 100px;
+
     font-family: Inter, Arial, sans-serif;
     font-size: 12px;
     font-weight: 400;
@@ -419,40 +413,25 @@ footer {
     line-height: normal;
     letter-spacing: normal;
     text-align: center;
+
     color: #fff
-}
 
-.table-row:hover .platform-tag,
-.table-row:hover > .platform-tag {
-    text-indent: 0;
-    white-space: nowrap;
-    padding: 0 7px;
-    border-radius: 9px;
-    margin-left: 8px;
-    width: auto;
-    height: 15px;
-    max-width: 500px;
-    max-height: 500px;
-    transition: max-width 1s, max-height 1s
 }
 
 .platform-tags {
     flex: auto;
     display: flex;
     flex-direction: row;
-    padding: 0px;
-    min-width: 230px;
     align-items: flex-start;
     justify-content: flex-end;
 }
 
 .platform-tags > .platform-tag {
     align-self: center;
-    margin: 10px;
 }
 
 .platform-tag:nth-child(1) {
-    background-color: blue;
+    background-color: #4DBB5F;
     color: white;
 }
 
@@ -497,6 +476,7 @@ td.content {
 
 .platform-hinted {
     display: block;
+    margin-bottom: 5px;
 }
 
 .platform-hinted > .platform-bookmarks-row {
@@ -518,7 +498,7 @@ td.content {
 }
 
 .platform-hinted > .platform-bookmarks-row > .platform-bookmark:nth-child(1):hover {
-    border-top: 2px solid blue;
+    border-top: 2px solid #4DBB5F;
 }
 
 .platform-hinted > .platform-bookmarks-row > .platform-bookmark:nth-child(2):hover {
@@ -556,6 +536,7 @@ td.content {
 .table {
     display: flex;
     flex-direction: column;
+    flex-direction: column;
 }
 
 .table-row {
@@ -593,8 +574,11 @@ td.content {
     order: 4;
 }
 
-.signature-subrow > .signature {
+.signature-subrow > .signatures {
     grid-column-start: 2;
+    display: flex;
+    flex-direction: column;
+    margin-top: 5px;
 }
 
 .signature-subrow > * {
diff --git a/plugins/base/src/test/resources/expect/functionWithReceiver/out/html/root/[jvm root]/index.html b/plugins/base/src/test/resources/expect/functionWithReceiver/out/html/root/[jvm root]/index.html
index 51da56c2..b946084e 100644
--- a/plugins/base/src/test/resources/expect/functionWithReceiver/out/html/root/[jvm root]/index.html
+++ b/plugins/base/src/test/resources/expect/functionWithReceiver/out/html/root/[jvm root]/index.html
@@ -36,7 +36,7 @@
                 </div>
               </div>
               <div class="signature-subrow">
-                <div class="signature">
+                <div class="signatures">
                   <div class="platform-hinted" data-platform-hinted="data-platform-hinted"><div class="content" data-active="" data-togglable="jvm"><div class="symbol "><div class="symbol monospace">final fun <a href="">String</a>.<a href="fn.html">fn</a>()</div></div></div></div>
                 </div>
               </div>
@@ -52,7 +52,7 @@
                 </div>
               </div>
               <div class="signature-subrow">
-                <div class="signature">
+                <div class="signatures">
                   <div class="platform-hinted" data-platform-hinted="data-platform-hinted"><div class="content" data-active="" data-togglable="jvm"><div class="symbol "><div class="symbol monospace">final fun <a href="">String</a>.<a href="fn.html">fn</a>(x: <a href="">Int</a>)</div></div></div></div>
                 </div>
               </div>
diff --git a/plugins/base/src/test/resources/expect/functionWithReceiver/out/html/styles/style.css b/plugins/base/src/test/resources/expect/functionWithReceiver/out/html/styles/style.css
index fc032e29..687a14e1 100644
--- a/plugins/base/src/test/resources/expect/functionWithReceiver/out/html/styles/style.css
+++ b/plugins/base/src/test/resources/expect/functionWithReceiver/out/html/styles/style.css
@@ -399,18 +399,12 @@ footer {
 }
 
 .platform-tag {
-    text-indent: 100%;
-    white-space: nowrap;
-    overflow: hidden;
-    width: 10px;
-    height: 10px;
-    max-width: 10px;
-    max-height: 10px;
-    border-radius: 8px;
-    transition: width 1s, height 1s;
-    margin-left: 14px;
-    margin-top: auto;
-    margin-bottom: auto;
+    display: flex;
+    flex-direction: row;
+    padding: 4px 8px;
+    height: 16px;
+    border-radius: 100px;
+
     font-family: Inter, Arial, sans-serif;
     font-size: 12px;
     font-weight: 400;
@@ -419,40 +413,25 @@ footer {
     line-height: normal;
     letter-spacing: normal;
     text-align: center;
+
     color: #fff
-}
 
-.table-row:hover .platform-tag,
-.table-row:hover > .platform-tag {
-    text-indent: 0;
-    white-space: nowrap;
-    padding: 0 7px;
-    border-radius: 9px;
-    margin-left: 8px;
-    width: auto;
-    height: 15px;
-    max-width: 500px;
-    max-height: 500px;
-    transition: max-width 1s, max-height 1s
 }
 
 .platform-tags {
     flex: auto;
     display: flex;
     flex-direction: row;
-    padding: 0px;
-    min-width: 230px;
     align-items: flex-start;
     justify-content: flex-end;
 }
 
 .platform-tags > .platform-tag {
     align-self: center;
-    margin: 10px;
 }
 
 .platform-tag:nth-child(1) {
-    background-color: blue;
+    background-color: #4DBB5F;
     color: white;
 }
 
@@ -497,6 +476,7 @@ td.content {
 
 .platform-hinted {
     display: block;
+    margin-bottom: 5px;
 }
 
 .platform-hinted > .platform-bookmarks-row {
@@ -518,7 +498,7 @@ td.content {
 }
 
 .platform-hinted > .platform-bookmarks-row > .platform-bookmark:nth-child(1):hover {
-    border-top: 2px solid blue;
+    border-top: 2px solid #4DBB5F;
 }
 
 .platform-hinted > .platform-bookmarks-row > .platform-bookmark:nth-child(2):hover {
@@ -556,6 +536,7 @@ td.content {
 .table {
     display: flex;
     flex-direction: column;
+    flex-direction: column;
 }
 
 .table-row {
@@ -593,8 +574,11 @@ td.content {
     order: 4;
 }
 
-.signature-subrow > .signature {
+.signature-subrow > .signatures {
     grid-column-start: 2;
+    display: flex;
+    flex-direction: column;
+    margin-top: 5px;
 }
 
 .signature-subrow > * {
diff --git a/plugins/base/src/test/resources/expect/genericFunction/out/html/root/[jvm root]/index.html b/plugins/base/src/test/resources/expect/genericFunction/out/html/root/[jvm root]/index.html
index d24ae9cb..67396260 100644
--- a/plugins/base/src/test/resources/expect/genericFunction/out/html/root/[jvm root]/index.html
+++ b/plugins/base/src/test/resources/expect/genericFunction/out/html/root/[jvm root]/index.html
@@ -36,7 +36,7 @@
                 </div>
               </div>
               <div class="signature-subrow">
-                <div class="signature">
+                <div class="signatures">
                   <div class="platform-hinted" data-platform-hinted="data-platform-hinted"><div class="content" data-active="" data-togglable="jvm"><div class="symbol "><div class="symbol monospace">private final fun &lt;<a href="generic.html">T</a> : <a href="">Any</a>&gt; <a href="generic.html">generic</a>()</div></div></div></div>
                 </div>
               </div>
diff --git a/plugins/base/src/test/resources/expect/genericFunction/out/html/styles/style.css b/plugins/base/src/test/resources/expect/genericFunction/out/html/styles/style.css
index fc032e29..687a14e1 100644
--- a/plugins/base/src/test/resources/expect/genericFunction/out/html/styles/style.css
+++ b/plugins/base/src/test/resources/expect/genericFunction/out/html/styles/style.css
@@ -399,18 +399,12 @@ footer {
 }
 
 .platform-tag {
-    text-indent: 100%;
-    white-space: nowrap;
-    overflow: hidden;
-    width: 10px;
-    height: 10px;
-    max-width: 10px;
-    max-height: 10px;
-    border-radius: 8px;
-    transition: width 1s, height 1s;
-    margin-left: 14px;
-    margin-top: auto;
-    margin-bottom: auto;
+    display: flex;
+    flex-direction: row;
+    padding: 4px 8px;
+    height: 16px;
+    border-radius: 100px;
+
     font-family: Inter, Arial, sans-serif;
     font-size: 12px;
     font-weight: 400;
@@ -419,40 +413,25 @@ footer {
     line-height: normal;
     letter-spacing: normal;
     text-align: center;
+
     color: #fff
-}
 
-.table-row:hover .platform-tag,
-.table-row:hover > .platform-tag {
-    text-indent: 0;
-    white-space: nowrap;
-    padding: 0 7px;
-    border-radius: 9px;
-    margin-left: 8px;
-    width: auto;
-    height: 15px;
-    max-width: 500px;
-    max-height: 500px;
-    transition: max-width 1s, max-height 1s
 }
 
 .platform-tags {
     flex: auto;
     display: flex;
     flex-direction: row;
-    padding: 0px;
-    min-width: 230px;
     align-items: flex-start;
     justify-content: flex-end;
 }
 
 .platform-tags > .platform-tag {
     align-self: center;
-    margin: 10px;
 }
 
 .platform-tag:nth-child(1) {
-    background-color: blue;
+    background-color: #4DBB5F;
     color: white;
 }
 
@@ -497,6 +476,7 @@ td.content {
 
 .platform-hinted {
     display: block;
+    margin-bottom: 5px;
 }
 
 .platform-hinted > .platform-bookmarks-row {
@@ -518,7 +498,7 @@ td.content {
 }
 
 .platform-hinted > .platform-bookmarks-row > .platform-bookmark:nth-child(1):hover {
-    border-top: 2px solid blue;
+    border-top: 2px solid #4DBB5F;
 }
 
 .platform-hinted > .platform-bookmarks-row > .platform-bookmark:nth-child(2):hover {
@@ -556,6 +536,7 @@ td.content {
 .table {
     display: flex;
     flex-direction: column;
+    flex-direction: column;
 }
 
 .table-row {
@@ -593,8 +574,11 @@ td.content {
     order: 4;
 }
 
-.signature-subrow > .signature {
+.signature-subrow > .signatures {
     grid-column-start: 2;
+    display: flex;
+    flex-direction: column;
+    margin-top: 5px;
 }
 
 .signature-subrow > * {
diff --git a/plugins/base/src/test/resources/expect/genericFunctionWithConstraints/out/html/root/[jvm root]/index.html b/plugins/base/src/test/resources/expect/genericFunctionWithConstraints/out/html/root/[jvm root]/index.html
index 4d4d0e17..95083903 100644
--- a/plugins/base/src/test/resources/expect/genericFunctionWithConstraints/out/html/root/[jvm root]/index.html
+++ b/plugins/base/src/test/resources/expect/genericFunctionWithConstraints/out/html/root/[jvm root]/index.html
@@ -36,7 +36,7 @@
                 </div>
               </div>
               <div class="signature-subrow">
-                <div class="signature">
+                <div class="signatures">
                   <div class="platform-hinted" data-platform-hinted="data-platform-hinted"><div class="content" data-active="" data-togglable="jvm"><div class="symbol "><div class="symbol monospace">final fun &lt;<a href="generic.html">T</a> : R, <a href="generic.html">R</a> : <a href="">Any</a>&gt; <a href="generic.html">generic</a>()</div></div></div></div>
                 </div>
               </div>
diff --git a/plugins/base/src/test/resources/expect/genericFunctionWithConstraints/out/html/styles/style.css b/plugins/base/src/test/resources/expect/genericFunctionWithConstraints/out/html/styles/style.css
index fc032e29..687a14e1 100644
--- a/plugins/base/src/test/resources/expect/genericFunctionWithConstraints/out/html/styles/style.css
+++ b/plugins/base/src/test/resources/expect/genericFunctionWithConstraints/out/html/styles/style.css
@@ -399,18 +399,12 @@ footer {
 }
 
 .platform-tag {
-    text-indent: 100%;
-    white-space: nowrap;
-    overflow: hidden;
-    width: 10px;
-    height: 10px;
-    max-width: 10px;
-    max-height: 10px;
-    border-radius: 8px;
-    transition: width 1s, height 1s;
-    margin-left: 14px;
-    margin-top: auto;
-    margin-bottom: auto;
+    display: flex;
+    flex-direction: row;
+    padding: 4px 8px;
+    height: 16px;
+    border-radius: 100px;
+
     font-family: Inter, Arial, sans-serif;
     font-size: 12px;
     font-weight: 400;
@@ -419,40 +413,25 @@ footer {
     line-height: normal;
     letter-spacing: normal;
     text-align: center;
+
     color: #fff
-}
 
-.table-row:hover .platform-tag,
-.table-row:hover > .platform-tag {
-    text-indent: 0;
-    white-space: nowrap;
-    padding: 0 7px;
-    border-radius: 9px;
-    margin-left: 8px;
-    width: auto;
-    height: 15px;
-    max-width: 500px;
-    max-height: 500px;
-    transition: max-width 1s, max-height 1s
 }
 
 .platform-tags {
     flex: auto;
     display: flex;
     flex-direction: row;
-    padding: 0px;
-    min-width: 230px;
     align-items: flex-start;
     justify-content: flex-end;
 }
 
 .platform-tags > .platform-tag {
     align-self: center;
-    margin: 10px;
 }
 
 .platform-tag:nth-child(1) {
-    background-color: blue;
+    background-color: #4DBB5F;
     color: white;
 }
 
@@ -497,6 +476,7 @@ td.content {
 
 .platform-hinted {
     display: block;
+    margin-bottom: 5px;
 }
 
 .platform-hinted > .platform-bookmarks-row {
@@ -518,7 +498,7 @@ td.content {
 }
 
 .platform-hinted > .platform-bookmarks-row > .platform-bookmark:nth-child(1):hover {
-    border-top: 2px solid blue;
+    border-top: 2px solid #4DBB5F;
 }
 
 .platform-hinted > .platform-bookmarks-row > .platform-bookmark:nth-child(2):hover {
@@ -556,6 +536,7 @@ td.content {
 .table {
     display: flex;
     flex-direction: column;
+    flex-direction: column;
 }
 
 .table-row {
@@ -593,8 +574,11 @@ td.content {
     order: 4;
 }
 
-.signature-subrow > .signature {
+.signature-subrow > .signatures {
     grid-column-start: 2;
+    display: flex;
+    flex-direction: column;
+    margin-top: 5px;
 }
 
 .signature-subrow > * {
diff --git a/plugins/base/src/test/resources/expect/inlineFunction/out/html/root/[jvm root]/index.html b/plugins/base/src/test/resources/expect/inlineFunction/out/html/root/[jvm root]/index.html
index 50e67373..a0958fce 100644
--- a/plugins/base/src/test/resources/expect/inlineFunction/out/html/root/[jvm root]/index.html
+++ b/plugins/base/src/test/resources/expect/inlineFunction/out/html/root/[jvm root]/index.html
@@ -36,7 +36,7 @@
                 </div>
               </div>
               <div class="signature-subrow">
-                <div class="signature">
+                <div class="signatures">
                   <div class="platform-hinted" data-platform-hinted="data-platform-hinted"><div class="content" data-active="" data-togglable="jvm"><div class="symbol "><div class="symbol monospace">final fun <a href="f.html">f</a>(a: <div class="symbol monospace">() -&gt; <a href="">String</a></div>)</div></div></div></div>
                 </div>
               </div>
diff --git a/plugins/base/src/test/resources/expect/inlineFunction/out/html/styles/style.css b/plugins/base/src/test/resources/expect/inlineFunction/out/html/styles/style.css
index fc032e29..687a14e1 100644
--- a/plugins/base/src/test/resources/expect/inlineFunction/out/html/styles/style.css
+++ b/plugins/base/src/test/resources/expect/inlineFunction/out/html/styles/style.css
@@ -399,18 +399,12 @@ footer {
 }
 
 .platform-tag {
-    text-indent: 100%;
-    white-space: nowrap;
-    overflow: hidden;
-    width: 10px;
-    height: 10px;
-    max-width: 10px;
-    max-height: 10px;
-    border-radius: 8px;
-    transition: width 1s, height 1s;
-    margin-left: 14px;
-    margin-top: auto;
-    margin-bottom: auto;
+    display: flex;
+    flex-direction: row;
+    padding: 4px 8px;
+    height: 16px;
+    border-radius: 100px;
+
     font-family: Inter, Arial, sans-serif;
     font-size: 12px;
     font-weight: 400;
@@ -419,40 +413,25 @@ footer {
     line-height: normal;
     letter-spacing: normal;
     text-align: center;
+
     color: #fff
-}
 
-.table-row:hover .platform-tag,
-.table-row:hover > .platform-tag {
-    text-indent: 0;
-    white-space: nowrap;
-    padding: 0 7px;
-    border-radius: 9px;
-    margin-left: 8px;
-    width: auto;
-    height: 15px;
-    max-width: 500px;
-    max-height: 500px;
-    transition: max-width 1s, max-height 1s
 }
 
 .platform-tags {
     flex: auto;
     display: flex;
     flex-direction: row;
-    padding: 0px;
-    min-width: 230px;
     align-items: flex-start;
     justify-content: flex-end;
 }
 
 .platform-tags > .platform-tag {
     align-self: center;
-    margin: 10px;
 }
 
 .platform-tag:nth-child(1) {
-    background-color: blue;
+    background-color: #4DBB5F;
     color: white;
 }
 
@@ -497,6 +476,7 @@ td.content {
 
 .platform-hinted {
     display: block;
+    margin-bottom: 5px;
 }
 
 .platform-hinted > .platform-bookmarks-row {
@@ -518,7 +498,7 @@ td.content {
 }
 
 .platform-hinted > .platform-bookmarks-row > .platform-bookmark:nth-child(1):hover {
-    border-top: 2px solid blue;
+    border-top: 2px solid #4DBB5F;
 }
 
 .platform-hinted > .platform-bookmarks-row > .platform-bookmark:nth-child(2):hover {
@@ -556,6 +536,7 @@ td.content {
 .table {
     display: flex;
     flex-direction: column;
+    flex-direction: column;
 }
 
 .table-row {
@@ -593,8 +574,11 @@ td.content {
     order: 4;
 }
 
-.signature-subrow > .signature {
+.signature-subrow > .signatures {
     grid-column-start: 2;
+    display: flex;
+    flex-direction: column;
+    margin-top: 5px;
 }
 
 .signature-subrow > * {
diff --git a/plugins/base/src/test/resources/expect/inlineSuspendFunction/out/html/root/[jvm root]/index.html b/plugins/base/src/test/resources/expect/inlineSuspendFunction/out/html/root/[jvm root]/index.html
index 50e67373..a0958fce 100644
--- a/plugins/base/src/test/resources/expect/inlineSuspendFunction/out/html/root/[jvm root]/index.html
+++ b/plugins/base/src/test/resources/expect/inlineSuspendFunction/out/html/root/[jvm root]/index.html
@@ -36,7 +36,7 @@
                 </div>
               </div>
               <div class="signature-subrow">
-                <div class="signature">
+                <div class="signatures">
                   <div class="platform-hinted" data-platform-hinted="data-platform-hinted"><div class="content" data-active="" data-togglable="jvm"><div class="symbol "><div class="symbol monospace">final fun <a href="f.html">f</a>(a: <div class="symbol monospace">() -&gt; <a href="">String</a></div>)</div></div></div></div>
                 </div>
               </div>
diff --git a/plugins/base/src/test/resources/expect/inlineSuspendFunction/out/html/styles/style.css b/plugins/base/src/test/resources/expect/inlineSuspendFunction/out/html/styles/style.css
index fc032e29..687a14e1 100644
--- a/plugins/base/src/test/resources/expect/inlineSuspendFunction/out/html/styles/style.css
+++ b/plugins/base/src/test/resources/expect/inlineSuspendFunction/out/html/styles/style.css
@@ -399,18 +399,12 @@ footer {
 }
 
 .platform-tag {
-    text-indent: 100%;
-    white-space: nowrap;
-    overflow: hidden;
-    width: 10px;
-    height: 10px;
-    max-width: 10px;
-    max-height: 10px;
-    border-radius: 8px;
-    transition: width 1s, height 1s;
-    margin-left: 14px;
-    margin-top: auto;
-    margin-bottom: auto;
+    display: flex;
+    flex-direction: row;
+    padding: 4px 8px;
+    height: 16px;
+    border-radius: 100px;
+
     font-family: Inter, Arial, sans-serif;
     font-size: 12px;
     font-weight: 400;
@@ -419,40 +413,25 @@ footer {
     line-height: normal;
     letter-spacing: normal;
     text-align: center;
+
     color: #fff
-}
 
-.table-row:hover .platform-tag,
-.table-row:hover > .platform-tag {
-    text-indent: 0;
-    white-space: nowrap;
-    padding: 0 7px;
-    border-radius: 9px;
-    margin-left: 8px;
-    width: auto;
-    height: 15px;
-    max-width: 500px;
-    max-height: 500px;
-    transition: max-width 1s, max-height 1s
 }
 
 .platform-tags {
     flex: auto;
     display: flex;
     flex-direction: row;
-    padding: 0px;
-    min-width: 230px;
     align-items: flex-start;
     justify-content: flex-end;
 }
 
 .platform-tags > .platform-tag {
     align-self: center;
-    margin: 10px;
 }
 
 .platform-tag:nth-child(1) {
-    background-color: blue;
+    background-color: #4DBB5F;
     color: white;
 }
 
@@ -497,6 +476,7 @@ td.content {
 
 .platform-hinted {
     display: block;
+    margin-bottom: 5px;
 }
 
 .platform-hinted > .platform-bookmarks-row {
@@ -518,7 +498,7 @@ td.content {
 }
 
 .platform-hinted > .platform-bookmarks-row > .platform-bookmark:nth-child(1):hover {
-    border-top: 2px solid blue;
+    border-top: 2px solid #4DBB5F;
 }
 
 .platform-hinted > .platform-bookmarks-row > .platform-bookmark:nth-child(2):hover {
@@ -556,6 +536,7 @@ td.content {
 .table {
     display: flex;
     flex-direction: column;
+    flex-direction: column;
 }
 
 .table-row {
@@ -593,8 +574,11 @@ td.content {
     order: 4;
 }
 
-.signature-subrow > .signature {
+.signature-subrow > .signatures {
     grid-column-start: 2;
+    display: flex;
+    flex-direction: column;
+    margin-top: 5px;
 }
 
 .signature-subrow > * {
diff --git a/plugins/base/src/test/resources/expect/signatureTest/out/html/root/signatureTest/index.html b/plugins/base/src/test/resources/expect/signatureTest/out/html/root/signatureTest/index.html
index 9aca1df9..a58dc49e 100644
--- a/plugins/base/src/test/resources/expect/signatureTest/out/html/root/signatureTest/index.html
+++ b/plugins/base/src/test/resources/expect/signatureTest/out/html/root/signatureTest/index.html
@@ -36,7 +36,7 @@
                 </div>
               </div>
               <div class="signature-subrow">
-                <div class="signature">
+                <div class="signatures">
                   <div class="platform-hinted" data-platform-hinted="data-platform-hinted"><div class="content" data-active="" data-togglable="jvm"><div class="symbol "><div class="symbol monospace">final fun <a href="test.html">test</a>(i: <div class="symbol monospace">(<a href="">Int</a>) -&gt; <a href="">Int</a></div>)</div></div></div></div>
                 </div>
               </div>
@@ -52,7 +52,7 @@
                 </div>
               </div>
               <div class="signature-subrow">
-                <div class="signature">
+                <div class="signatures">
                   <div class="platform-hinted" data-platform-hinted="data-platform-hinted"><div class="content" data-active="" data-togglable="jvm"><div class="symbol "><div class="symbol monospace">final fun <a href="test2.html">test2</a>(i: <div class="symbol monospace"><a href="">Int</a>.(<a href="">Int</a>) -&gt; <a href="">Int</a></div>)</div></div></div></div>
                 </div>
               </div>
diff --git a/plugins/base/src/test/resources/expect/signatureTest/out/html/scripts/pages.js b/plugins/base/src/test/resources/expect/signatureTest/out/html/scripts/pages.js
index d7ff16ab..80ceda62 100644
--- a/plugins/base/src/test/resources/expect/signatureTest/out/html/scripts/pages.js
+++ b/plugins/base/src/test/resources/expect/signatureTest/out/html/scripts/pages.js
@@ -1,6 +1,5 @@
 var pages = [
 { "name": "root",  "location": "root/index.html" },
 { "name": "signatureTest",  "location": "root/signatureTest/index.html" },
-{ "name": "test2",  "location": "root/signatureTest/test2.html" },
 { "name": "test",  "location": "root/signatureTest/test.html" }
 ]
diff --git a/plugins/base/src/test/resources/expect/signatureTest/out/html/styles/style.css b/plugins/base/src/test/resources/expect/signatureTest/out/html/styles/style.css
index fc032e29..687a14e1 100644
--- a/plugins/base/src/test/resources/expect/signatureTest/out/html/styles/style.css
+++ b/plugins/base/src/test/resources/expect/signatureTest/out/html/styles/style.css
@@ -399,18 +399,12 @@ footer {
 }
 
 .platform-tag {
-    text-indent: 100%;
-    white-space: nowrap;
-    overflow: hidden;
-    width: 10px;
-    height: 10px;
-    max-width: 10px;
-    max-height: 10px;
-    border-radius: 8px;
-    transition: width 1s, height 1s;
-    margin-left: 14px;
-    margin-top: auto;
-    margin-bottom: auto;
+    display: flex;
+    flex-direction: row;
+    padding: 4px 8px;
+    height: 16px;
+    border-radius: 100px;
+
     font-family: Inter, Arial, sans-serif;
     font-size: 12px;
     font-weight: 400;
@@ -419,40 +413,25 @@ footer {
     line-height: normal;
     letter-spacing: normal;
     text-align: center;
+
     color: #fff
-}
 
-.table-row:hover .platform-tag,
-.table-row:hover > .platform-tag {
-    text-indent: 0;
-    white-space: nowrap;
-    padding: 0 7px;
-    border-radius: 9px;
-    margin-left: 8px;
-    width: auto;
-    height: 15px;
-    max-width: 500px;
-    max-height: 500px;
-    transition: max-width 1s, max-height 1s
 }
 
 .platform-tags {
     flex: auto;
     display: flex;
     flex-direction: row;
-    padding: 0px;
-    min-width: 230px;
     align-items: flex-start;
     justify-content: flex-end;
 }
 
 .platform-tags > .platform-tag {
     align-self: center;
-    margin: 10px;
 }
 
 .platform-tag:nth-child(1) {
-    background-color: blue;
+    background-color: #4DBB5F;
     color: white;
 }
 
@@ -497,6 +476,7 @@ td.content {
 
 .platform-hinted {
     display: block;
+    margin-bottom: 5px;
 }
 
 .platform-hinted > .platform-bookmarks-row {
@@ -518,7 +498,7 @@ td.content {
 }
 
 .platform-hinted > .platform-bookmarks-row > .platform-bookmark:nth-child(1):hover {
-    border-top: 2px solid blue;
+    border-top: 2px solid #4DBB5F;
 }
 
 .platform-hinted > .platform-bookmarks-row > .platform-bookmark:nth-child(2):hover {
@@ -556,6 +536,7 @@ td.content {
 .table {
     display: flex;
     flex-direction: column;
+    flex-direction: column;
 }
 
 .table-row {
@@ -593,8 +574,11 @@ td.content {
     order: 4;
 }
 
-.signature-subrow > .signature {
+.signature-subrow > .signatures {
     grid-column-start: 2;
+    display: flex;
+    flex-direction: column;
+    margin-top: 5px;
 }
 
 .signature-subrow > * {
diff --git a/plugins/base/src/test/resources/expect/sinceKotlin/out/html/root/[jvm root]/index.html b/plugins/base/src/test/resources/expect/sinceKotlin/out/html/root/[jvm root]/index.html
index db28d49d..d5f15671 100644
--- a/plugins/base/src/test/resources/expect/sinceKotlin/out/html/root/[jvm root]/index.html
+++ b/plugins/base/src/test/resources/expect/sinceKotlin/out/html/root/[jvm root]/index.html
@@ -36,7 +36,7 @@
                 </div>
               </div>
               <div class="signature-subrow">
-                <div class="signature">
+                <div class="signatures">
                   <div class="platform-hinted" data-platform-hinted="data-platform-hinted"><div class="content" data-active="" data-togglable="jvm"><div class="symbol "><div class="symbol monospace">final fun <a href="available-since1.1.html">availableSince1.1</a>(): <a href="">String</a></div></div></div></div>
                 </div>
               </div>
diff --git a/plugins/base/src/test/resources/expect/sinceKotlin/out/html/styles/style.css b/plugins/base/src/test/resources/expect/sinceKotlin/out/html/styles/style.css
index fc032e29..687a14e1 100644
--- a/plugins/base/src/test/resources/expect/sinceKotlin/out/html/styles/style.css
+++ b/plugins/base/src/test/resources/expect/sinceKotlin/out/html/styles/style.css
@@ -399,18 +399,12 @@ footer {
 }
 
 .platform-tag {
-    text-indent: 100%;
-    white-space: nowrap;
-    overflow: hidden;
-    width: 10px;
-    height: 10px;
-    max-width: 10px;
-    max-height: 10px;
-    border-radius: 8px;
-    transition: width 1s, height 1s;
-    margin-left: 14px;
-    margin-top: auto;
-    margin-bottom: auto;
+    display: flex;
+    flex-direction: row;
+    padding: 4px 8px;
+    height: 16px;
+    border-radius: 100px;
+
     font-family: Inter, Arial, sans-serif;
     font-size: 12px;
     font-weight: 400;
@@ -419,40 +413,25 @@ footer {
     line-height: normal;
     letter-spacing: normal;
     text-align: center;
+
     color: #fff
-}
 
-.table-row:hover .platform-tag,
-.table-row:hover > .platform-tag {
-    text-indent: 0;
-    white-space: nowrap;
-    padding: 0 7px;
-    border-radius: 9px;
-    margin-left: 8px;
-    width: auto;
-    height: 15px;
-    max-width: 500px;
-    max-height: 500px;
-    transition: max-width 1s, max-height 1s
 }
 
 .platform-tags {
     flex: auto;
     display: flex;
     flex-direction: row;
-    padding: 0px;
-    min-width: 230px;
     align-items: flex-start;
     justify-content: flex-end;
 }
 
 .platform-tags > .platform-tag {
     align-self: center;
-    margin: 10px;
 }
 
 .platform-tag:nth-child(1) {
-    background-color: blue;
+    background-color: #4DBB5F;
     color: white;
 }
 
@@ -497,6 +476,7 @@ td.content {
 
 .platform-hinted {
     display: block;
+    margin-bottom: 5px;
 }
 
 .platform-hinted > .platform-bookmarks-row {
@@ -518,7 +498,7 @@ td.content {
 }
 
 .platform-hinted > .platform-bookmarks-row > .platform-bookmark:nth-child(1):hover {
-    border-top: 2px solid blue;
+    border-top: 2px solid #4DBB5F;
 }
 
 .platform-hinted > .platform-bookmarks-row > .platform-bookmark:nth-child(2):hover {
@@ -556,6 +536,7 @@ td.content {
 .table {
     display: flex;
     flex-direction: column;
+    flex-direction: column;
 }
 
 .table-row {
@@ -593,8 +574,11 @@ td.content {
     order: 4;
 }
 
-.signature-subrow > .signature {
+.signature-subrow > .signatures {
     grid-column-start: 2;
+    display: flex;
+    flex-direction: column;
+    margin-top: 5px;
 }
 
 .signature-subrow > * {
diff --git a/plugins/base/src/test/resources/expect/suspendFunction/out/html/root/[jvm root]/index.html b/plugins/base/src/test/resources/expect/suspendFunction/out/html/root/[jvm root]/index.html
index dae12276..19d0dfb8 100644
--- a/plugins/base/src/test/resources/expect/suspendFunction/out/html/root/[jvm root]/index.html
+++ b/plugins/base/src/test/resources/expect/suspendFunction/out/html/root/[jvm root]/index.html
@@ -36,7 +36,7 @@
                 </div>
               </div>
               <div class="signature-subrow">
-                <div class="signature">
+                <div class="signatures">
                   <div class="platform-hinted" data-platform-hinted="data-platform-hinted"><div class="content" data-active="" data-togglable="jvm"><div class="symbol "><div class="symbol monospace">final fun <a href="f.html">f</a>()</div></div></div></div>
                 </div>
               </div>
diff --git a/plugins/base/src/test/resources/expect/suspendFunction/out/html/styles/style.css b/plugins/base/src/test/resources/expect/suspendFunction/out/html/styles/style.css
index fc032e29..687a14e1 100644
--- a/plugins/base/src/test/resources/expect/suspendFunction/out/html/styles/style.css
+++ b/plugins/base/src/test/resources/expect/suspendFunction/out/html/styles/style.css
@@ -399,18 +399,12 @@ footer {
 }
 
 .platform-tag {
-    text-indent: 100%;
-    white-space: nowrap;
-    overflow: hidden;
-    width: 10px;
-    height: 10px;
-    max-width: 10px;
-    max-height: 10px;
-    border-radius: 8px;
-    transition: width 1s, height 1s;
-    margin-left: 14px;
-    margin-top: auto;
-    margin-bottom: auto;
+    display: flex;
+    flex-direction: row;
+    padding: 4px 8px;
+    height: 16px;
+    border-radius: 100px;
+
     font-family: Inter, Arial, sans-serif;
     font-size: 12px;
     font-weight: 400;
@@ -419,40 +413,25 @@ footer {
     line-height: normal;
     letter-spacing: normal;
     text-align: center;
+
     color: #fff
-}
 
-.table-row:hover .platform-tag,
-.table-row:hover > .platform-tag {
-    text-indent: 0;
-    white-space: nowrap;
-    padding: 0 7px;
-    border-radius: 9px;
-    margin-left: 8px;
-    width: auto;
-    height: 15px;
-    max-width: 500px;
-    max-height: 500px;
-    transition: max-width 1s, max-height 1s
 }
 
 .platform-tags {
     flex: auto;
     display: flex;
     flex-direction: row;
-    padding: 0px;
-    min-width: 230px;
     align-items: flex-start;
     justify-content: flex-end;
 }
 
 .platform-tags > .platform-tag {
     align-self: center;
-    margin: 10px;
 }
 
 .platform-tag:nth-child(1) {
-    background-color: blue;
+    background-color: #4DBB5F;
     color: white;
 }
 
@@ -497,6 +476,7 @@ td.content {
 
 .platform-hinted {
     display: block;
+    margin-bottom: 5px;
 }
 
 .platform-hinted > .platform-bookmarks-row {
@@ -518,7 +498,7 @@ td.content {
 }
 
 .platform-hinted > .platform-bookmarks-row > .platform-bookmark:nth-child(1):hover {
-    border-top: 2px solid blue;
+    border-top: 2px solid #4DBB5F;
 }
 
 .platform-hinted > .platform-bookmarks-row > .platform-bookmark:nth-child(2):hover {
@@ -556,6 +536,7 @@ td.content {
 .table {
     display: flex;
     flex-direction: column;
+    flex-direction: column;
 }
 
 .table-row {
@@ -593,8 +574,11 @@ td.content {
     order: 4;
 }
 
-.signature-subrow > .signature {
+.signature-subrow > .signatures {
     grid-column-start: 2;
+    display: flex;
+    flex-direction: column;
+    margin-top: 5px;
 }
 
 .signature-subrow > * {
diff --git a/plugins/base/src/test/resources/expect/suspendInlineFunction/out/html/root/[jvm root]/index.html b/plugins/base/src/test/resources/expect/suspendInlineFunction/out/html/root/[jvm root]/index.html
index 50e67373..a0958fce 100644
--- a/plugins/base/src/test/resources/expect/suspendInlineFunction/out/html/root/[jvm root]/index.html
+++ b/plugins/base/src/test/resources/expect/suspendInlineFunction/out/html/root/[jvm root]/index.html
@@ -36,7 +36,7 @@
                 </div>
               </div>
               <div class="signature-subrow">
-                <div class="signature">
+                <div class="signatures">
                   <div class="platform-hinted" data-platform-hinted="data-platform-hinted"><div class="content" data-active="" data-togglable="jvm"><div class="symbol "><div class="symbol monospace">final fun <a href="f.html">f</a>(a: <div class="symbol monospace">() -&gt; <a href="">String</a></div>)</div></div></div></div>
                 </div>
               </div>
diff --git a/plugins/base/src/test/resources/expect/suspendInlineFunction/out/html/styles/style.css b/plugins/base/src/test/resources/expect/suspendInlineFunction/out/html/styles/style.css
index fc032e29..687a14e1 100644
--- a/plugins/base/src/test/resources/expect/suspendInlineFunction/out/html/styles/style.css
+++ b/plugins/base/src/test/resources/expect/suspendInlineFunction/out/html/styles/style.css
@@ -399,18 +399,12 @@ footer {
 }
 
 .platform-tag {
-    text-indent: 100%;
-    white-space: nowrap;
-    overflow: hidden;
-    width: 10px;
-    height: 10px;
-    max-width: 10px;
-    max-height: 10px;
-    border-radius: 8px;
-    transition: width 1s, height 1s;
-    margin-left: 14px;
-    margin-top: auto;
-    margin-bottom: auto;
+    display: flex;
+    flex-direction: row;
+    padding: 4px 8px;
+    height: 16px;
+    border-radius: 100px;
+
     font-family: Inter, Arial, sans-serif;
     font-size: 12px;
     font-weight: 400;
@@ -419,40 +413,25 @@ footer {
     line-height: normal;
     letter-spacing: normal;
     text-align: center;
+
     color: #fff
-}
 
-.table-row:hover .platform-tag,
-.table-row:hover > .platform-tag {
-    text-indent: 0;
-    white-space: nowrap;
-    padding: 0 7px;
-    border-radius: 9px;
-    margin-left: 8px;
-    width: auto;
-    height: 15px;
-    max-width: 500px;
-    max-height: 500px;
-    transition: max-width 1s, max-height 1s
 }
 
 .platform-tags {
     flex: auto;
     display: flex;
     flex-direction: row;
-    padding: 0px;
-    min-width: 230px;
     align-items: flex-start;
     justify-content: flex-end;
 }
 
 .platform-tags > .platform-tag {
     align-self: center;
-    margin: 10px;
 }
 
 .platform-tag:nth-child(1) {
-    background-color: blue;
+    background-color: #4DBB5F;
     color: white;
 }
 
@@ -497,6 +476,7 @@ td.content {
 
 .platform-hinted {
     display: block;
+    margin-bottom: 5px;
 }
 
 .platform-hinted > .platform-bookmarks-row {
@@ -518,7 +498,7 @@ td.content {
 }
 
 .platform-hinted > .platform-bookmarks-row > .platform-bookmark:nth-child(1):hover {
-    border-top: 2px solid blue;
+    border-top: 2px solid #4DBB5F;
 }
 
 .platform-hinted > .platform-bookmarks-row > .platform-bookmark:nth-child(2):hover {
@@ -556,6 +536,7 @@ td.content {
 .table {
     display: flex;
     flex-direction: column;
+    flex-direction: column;
 }
 
 .table-row {
@@ -593,8 +574,11 @@ td.content {
     order: 4;
 }
 
-.signature-subrow > .signature {
+.signature-subrow > .signatures {
     grid-column-start: 2;
+    display: flex;
+    flex-direction: column;
+    margin-top: 5px;
 }
 
 .signature-subrow > * {