From 5b0d17a9b3331d89728a123b588d904d2ca77514 Mon Sep 17 00:00:00 2001
From: Bartosz Kaszubowski <gosimek@gmail.com>
Date: Mon, 25 May 2026 11:22:55 +0200
Subject: [PATCH] small visual tweaks for the copy button

---
 website/src/css/customTheme.scss              |  5 ++
 website/src/theme/DocItem/Layout/index.tsx    | 16 +++--
 .../theme/DocItem/Layout/styles.module.css    | 69 ++++++++++++++-----
 3 files changed, 64 insertions(+), 26 deletions(-)

diff --git a/website/src/css/customTheme.scss b/website/src/css/customTheme.scss
index 0cd6379499b..0cdb97db177 100644
--- a/website/src/css/customTheme.scss
+++ b/website/src/css/customTheme.scss
@@ -133,6 +133,7 @@
 
 body {
   font-family: var(--ifm-font-family-base);
+  scrollbar-gutter: stable;
 }
 
 html[data-theme="light"] {
@@ -140,6 +141,10 @@ html[data-theme="light"] {
 }
 
 html[data-theme="dark"] {
+  body {
+    scrollbar-color: var(--subtle) var(--ifm-background-color);
+  }
+
   --subtle: #858993;
 
   --navbar-background: #20232aee;
diff --git a/website/src/theme/DocItem/Layout/index.tsx b/website/src/theme/DocItem/Layout/index.tsx
index 2c5813cf73a..734e2007ffe 100644
--- a/website/src/theme/DocItem/Layout/index.tsx
+++ b/website/src/theme/DocItem/Layout/index.tsx
@@ -76,14 +76,16 @@ export default function DocItemLayout({children}: Props): ReactNode {
         <div className={styles.docItemContainer}>
           <article>
             <DocBreadcrumbs />
-            <DocVersionBadge />
+            <div className={styles.docHeaderContainer}>
+              <DocVersionBadge />
+              <DocItemCopyPageButton
+                className={clsx(
+                  styles.copyPageArticleAction,
+                  docTOC.canRender && styles.copyPageArticleActionWithToc
+                )}
+              />
+            </div>
             {docTOC.mobile}
-            <DocItemCopyPageButton
-              className={clsx(
-                styles.copyPageArticleAction,
-                docTOC.canRender && styles.copyPageArticleActionWithToc
-              )}
-            />
             <DocItemContent>{children}</DocItemContent>
             <DocItemFooter />
           </article>
diff --git a/website/src/theme/DocItem/Layout/styles.module.css b/website/src/theme/DocItem/Layout/styles.module.css
index e05435eb804..ec64ebcf189 100644
--- a/website/src/theme/DocItem/Layout/styles.module.css
+++ b/website/src/theme/DocItem/Layout/styles.module.css
@@ -10,31 +10,68 @@
   margin-top: 0;
 }
 
-.copyPageAction {
+.docHeaderContainer {
   display: flex;
+  justify-content: space-between;
+  align-items: center;
 }
 
-.copyPageArticleAction {
-  justify-content: flex-end;
-  min-height: 37px;
+.copyPageAsideAction {
   margin-bottom: 1rem;
 }
 
-.copyPageAsideAction {
-  display: none;
-  margin-bottom: 1rem;
+div[class^="copyPageArticleAction"] {
+  margin-bottom: 0;
 }
 
-.copyPageButtonContainer {
-  display: inline-block;
+button[class^="copyPageButton"] {
+  border-radius: var(--ifm-global-radius);
+  border-color: var(--ifm-color-gray-500);
+
+  &:hover {
+    background-color: var(--ifm-menu-color-background-hover) !important;
+    border-color: var(--ifm-color-gray-400) !important;
+  }
+
+  svg {
+    opacity: 0.75;
+  }
 }
 
-.copyPageButton {
-  font-family: var(--ifm-font-family-base);
+div[class^="copyPageDropdown"] {
+  border-color: var(--ifm-table-border-color) !important;
+
+  button[class^="dropdownItem"] {
+    border-bottom-color: var(--ifm-table-border-color) !important;
+
+    &:hover {
+      background-color: var(--ifm-menu-color-background-hover);
+    }
+  }
+
+  div[class^="itemDescription"] {
+    font-weight: 300;
+    font-size: 12px;
+  }
 }
 
-.copyPageDropdown {
-  font-family: var(--ifm-font-family-base);
+[data-theme="dark"] {
+  button[class^="copyPageButton"] {
+    &:hover {
+      background-color: var(--dark) !important;
+      border-color: var(--ifm-color-gray-800) !important;
+    }
+  }
+
+  button[class^="dropdownItem"] {
+    &:hover {
+      background-color: var(--dark);
+    }
+  }
+
+  div[class^="copyPageDropdown"] {
+    background-color: var(--ifm-navbar-background-color);
+  }
 }
 
 @media (min-width: 997px) {
@@ -45,10 +82,4 @@
   .copyPageArticleActionWithToc {
     display: none;
   }
-
-  .copyPageAsideAction {
-    display: flex;
-    justify-content: flex-start;
-    min-height: 37px;
-  }
 }