From 70f6c23b8834d625cd014eba2e2aed8daee5933b Mon Sep 17 00:00:00 2001
From: kraleppa <krzysztof.nalepa@swmansion.com>
Date: Wed, 23 Apr 2025 14:27:47 +0200
Subject: [PATCH 1/4] Updated styling for scrollbars

---
 assets/css/app.css                            | 25 +++++++++++++++++++
 assets/css/themes/dark.css                    |  4 +++
 assets/css/themes/light.css                   |  4 +++
 lib/live_debugger/components.ex               |  2 +-
 .../live_views/channel_dashboard_live.ex      |  2 +-
 5 files changed, 35 insertions(+), 2 deletions(-)

diff --git a/assets/css/app.css b/assets/css/app.css
index 3e1ffdce1..58f0119c1 100644
--- a/assets/css/app.css
+++ b/assets/css/app.css
@@ -7,3 +7,28 @@
 @import 'tailwindcss/utilities';
 
 /* You can add custom styles here */
+
+::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+  background: transparent;
+}
+
+.scrollbar-main::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+  background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--scrollbar-thumb);
+  border-radius: 8px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: var(--scrollbar-thumb-hover);
+}
+
+::-webkit-scrollbar-corner {
+  background: transparent;
+}
diff --git a/assets/css/themes/dark.css b/assets/css/themes/dark.css
index 56364be8d..90286d0a8 100644
--- a/assets/css/themes/dark.css
+++ b/assets/css/themes/dark.css
@@ -18,6 +18,10 @@
     --ui-muted: var(--gray-600);
     --ui-accent: var(--swm-sea-blue-60);
 
+    /* Scrollbar */
+    --scrollbar-thumb: var(--gray-600);
+    --scrollbar-thumb-hover: var(--gray-500);
+
     /* Navbar */
     --navbar-bg: var(--gray-900);
     --navbar-border: var(--gray-700);
diff --git a/assets/css/themes/light.css b/assets/css/themes/light.css
index 20a550619..65ea10b38 100644
--- a/assets/css/themes/light.css
+++ b/assets/css/themes/light.css
@@ -18,6 +18,10 @@
     --ui-muted: var(--slate-300);
     --ui-accent: var(--swm-brand);
 
+    /* Scrollbar */
+    --scrollbar-thumb: var(--slate-300);
+    --scrollbar-thumb-hover: var(--slate-400);
+
     /* Navbar */
     --navbar-bg: var(--neutrals-white);
     --navbar-border: var(--slate-200);
diff --git a/lib/live_debugger/components.ex b/lib/live_debugger/components.ex
index cc040c269..831e46de2 100644
--- a/lib/live_debugger/components.ex
+++ b/lib/live_debugger/components.ex
@@ -237,7 +237,7 @@ defmodule LiveDebugger.Components do
         </div>
       </div>
       <div class={[
-        "flex flex-1 overflow-auto rounded-sm bg-surface-0-bg m-2" | List.wrap(@inner_class)
+        "flex flex-1 overflow-auto rounded-sm bg-surface-0-bg" | List.wrap(@inner_class)
       ]}>
         <%= render_slot(@inner_block) %>
       </div>
diff --git a/lib/live_debugger/live_views/channel_dashboard_live.ex b/lib/live_debugger/live_views/channel_dashboard_live.ex
index d27226c4b..abacba7c3 100644
--- a/lib/live_debugger/live_views/channel_dashboard_live.ex
+++ b/lib/live_debugger/live_views/channel_dashboard_live.ex
@@ -71,7 +71,7 @@ defmodule LiveDebugger.LiveViews.ChannelDashboardLive do
             node_id={@node_id || lv_process.pid}
           />
 
-          <div class="flex grow flex-col xl:flex-row gap-4 xl:gap-8 p-8 overflow-y-auto xl:overflow-y-hidden max-w-screen-2xl mx-auto">
+          <div class="flex grow flex-col xl:flex-row gap-4 xl:gap-8 p-8 overflow-y-auto xl:overflow-y-hidden max-w-screen-2xl mx-auto scrollbar-main">
             <div class="xl:w-1/2">
               <StateLive.live_render
                 id="node-state-lv"

From 77194984329dacca404230d3bcd3138dd75748b0 Mon Sep 17 00:00:00 2001
From: kraleppa <krzysztof.nalepa@swmansion.com>
Date: Wed, 23 Apr 2025 14:33:04 +0200
Subject: [PATCH 2/4] Proper alignment of fullscreen button

---
 lib/live_debugger/components/traces.ex | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lib/live_debugger/components/traces.ex b/lib/live_debugger/components/traces.ex
index bb9a81946..0f8b9d548 100644
--- a/lib/live_debugger/components/traces.ex
+++ b/lib/live_debugger/components/traces.ex
@@ -94,7 +94,7 @@ defmodule LiveDebugger.Components.Traces do
         </div>
       </:label>
       <div class="relative">
-        <div class="absolute right-[17px] top-0 z-10">
+        <div class="absolute right-1 top-1 z-10">
           <.fullscreen_button
             id={"trace-fullscreen-#{@id}"}
             class="m-2"

From 0c409140aa67eab7f281f5dd2f5909e92f74404f Mon Sep 17 00:00:00 2001
From: kraleppa <krzysztof.nalepa@swmansion.com>
Date: Wed, 23 Apr 2025 14:33:29 +0200
Subject: [PATCH 3/4] Fixed button alignment

---
 lib/live_debugger/components/traces.ex | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lib/live_debugger/components/traces.ex b/lib/live_debugger/components/traces.ex
index 0f8b9d548..90fc9d240 100644
--- a/lib/live_debugger/components/traces.ex
+++ b/lib/live_debugger/components/traces.ex
@@ -94,7 +94,7 @@ defmodule LiveDebugger.Components.Traces do
         </div>
       </:label>
       <div class="relative">
-        <div class="absolute right-1 top-1 z-10">
+        <div class="absolute right-0 top-0 z-10">
           <.fullscreen_button
             id={"trace-fullscreen-#{@id}"}
             class="m-2"

From 3e16259ebf3afa42dc46f05fd382229c45a1b3aa Mon Sep 17 00:00:00 2001
From: kraleppa <krzysztof.nalepa@swmansion.com>
Date: Wed, 23 Apr 2025 16:37:57 +0200
Subject: [PATCH 4/4] Set wide scrollbar to body

---
 assets/css/app.css | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/assets/css/app.css b/assets/css/app.css
index 58f0119c1..e5e7fd69a 100644
--- a/assets/css/app.css
+++ b/assets/css/app.css
@@ -20,6 +20,12 @@
   background: transparent;
 }
 
+body::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+  background: transparent;
+}
+
 ::-webkit-scrollbar-thumb {
   background: var(--scrollbar-thumb);
   border-radius: 8px;