From 0b3c362c5e5ac6b7133df9b1b1a60c77e2b92056 Mon Sep 17 00:00:00 2001
From: timotheegoguely <timothee@goguely.com>
Date: Thu, 18 Sep 2025 16:31:08 +0200
Subject: [PATCH] Add ::scroll-button on tracks container and fix various minor
 dialog styling issues

---
 src/assets/css/src/2.blocks.dialog.css | 72 ++++++++++++++++++++++++--
 1 file changed, 67 insertions(+), 5 deletions(-)

diff --git a/src/assets/css/src/2.blocks.dialog.css b/src/assets/css/src/2.blocks.dialog.css
index d9e0f41..c203541 100644
--- a/src/assets/css/src/2.blocks.dialog.css
+++ b/src/assets/css/src/2.blocks.dialog.css
@@ -86,6 +86,9 @@
   height: 100%;
   overflow-y: auto;
 }
+#dynamic.dialog__inner {
+  overflow-y: hidden;
+}
 .with-comments .dialog__inner {
   margin-right: var(--dialog-comments-w, 20rem);
 }
@@ -114,15 +117,72 @@
   gap: var(--space-8);
   width: 100%;
   margin-left: calc(-1 * var(--space-16));
-  padding: var(--space-16);
+  padding: var(--space-12) var(--space-16);
   overflow-x: scroll;
   overflow-y: hidden;
   position: relative;
 }
+@supports selector(::scroll-button(*)) {
+  .dialog__inner .tracks {
+    anchor-name: --tracks;
+    scroll-behavior: smooth;
+    &::scroll-button(*) {
+      --scroll-button-position: 8px;
+      position-anchor: --tracks;
+      position: fixed;
+      align-self: anchor-center;
+      z-index: 1;
+      width: 2.5rem;
+      height: 2.5rem;
+      border: 1px solid var(--color-grey-200);
+      border-radius: var(--rounded-lg);
+      color: transparent;
+      background-repeat: no-repeat;
+      background-position: center;
+      background-size: var(--icon-size, 1.25rem);
+      background-image: var(--icon, var(--icon-arrow-right));
+      background-color: var(--color-white);
+      user-select: none;
+      cursor: pointer;
+      opacity: 1;
+      transition: opacity 0.2s ease-out;
+    }
+    &::scroll-button(*):hover {
+      border-color: var(--color-grey-400);
+    }
+    &::scroll-button(*):disabled {
+      opacity: 0;
+    }
+    &::scroll-button(left) {
+      --icon: var(--icon-chevron-single-left);
+      content: "←" / "Scroller vers la gauche";
+      left: calc(anchor(left) + var(--scroll-button-position));
+    }
+    &::scroll-button(right) {
+      --icon: var(--icon-chevron-single-right);
+      content: "→" / "Scroller vers la droite";
+      right: calc(anchor(right) + var(--scroll-button-position));
+    }
+  }
+  [data-browser*='edge' i] .tracks::-webkit-scrollbar {
+    width: 0px;
+    height: 0px;
+  }
+  [data-browser*='edge' i] .tracks::-webkit-scrollbar-track {
+    background: transparent; /* Match background */
+  }
+  [data-browser*='edge' i] .tracks::-webkit-scrollbar-thumb {
+    background: hsla(180, 1%, 51%, .7); /* Customize scrollbar color */
+    border-radius: 5px;
+  }
+  [data-browser*='edge' i] .tracks {
+    scrollbar-color: auto;
+  }
+}
 /* Windows fix */
-/*[data-browser*='Windows'] .dialog__inner .tracks {
+[data-browser*='windows' i] .dialog__inner .tracks {
   transform: translateY(0.46875rem);
-}*/
+}
 .dialog__inner .tracks > *:last-child {
   margin-right: var(--space-8);
 }
@@ -189,8 +249,10 @@
   --dialog-inner-background: #f7f7f7;
 }
 .dialog#virtual-sample [data-pc-section='header'] h2 {
-  left: 22.5rem;
-  right: 22.5rem;
+  left: 1rem;
+  right: 1rem;
+  margin-inline: 16rem;
+  min-width: 14ch;
 }
 .dialog#virtual-sample #comments-container {
   top: var(--dialog-header-h);