Enhancement: Updated styling for scrollbars (#292)

* Updated styling for scrollbars

* Proper alignment of fullscreen button

* Fixed button alignment

* Set wide scrollbar to body

Author: kraleppa

assets/css/app.css

@@ -7,3 +7,34 @@
 @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;
+}
+
+body::-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;
+}

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);

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);

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>

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-0 top-0 z-10">
           <.fullscreen_button
             id={"trace-fullscreen-#{@id}"}
             class="m-2"

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"