From 3d1921da7a340229d76fee5f370c9d3d29df1e0a Mon Sep 17 00:00:00 2001
From: Jamil <jamilbk@users.noreply.github.com>
Date: Wed, 27 Sep 2023 08:24:26 -0700
Subject: [PATCH] feat(portal): Scrollbar improvements (#2160)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Thanks to @devsnaked for the fix. Opening this to get the changes merged
more quickly.

Supersedes #2072

---------

Signed-off-by: Maximilly Moreira Gonçalves <max.ocw@gmail.com>
Co-authored-by: Maximilly Moreira <max.ocw@gmail.com>
---
 elixir/apps/web/assets/css/app.css            |  1 +
 elixir/apps/web/assets/css/scrollbar.css      | 30 +++++++++++++++++++
 .../web/lib/web/components/core_components.ex |  2 +-
 3 files changed, 32 insertions(+), 1 deletion(-)
 create mode 100644 elixir/apps/web/assets/css/scrollbar.css

diff --git a/elixir/apps/web/assets/css/app.css b/elixir/apps/web/assets/css/app.css
index 76fcadcc0..d04864911 100644
--- a/elixir/apps/web/assets/css/app.css
+++ b/elixir/apps/web/assets/css/app.css
@@ -1,3 +1,4 @@
 @import "tailwindcss/base";
 @import "tailwindcss/components";
 @import "tailwindcss/utilities";
+@import "./scrollbar";
diff --git a/elixir/apps/web/assets/css/scrollbar.css b/elixir/apps/web/assets/css/scrollbar.css
new file mode 100644
index 000000000..420c624a2
--- /dev/null
+++ b/elixir/apps/web/assets/css/scrollbar.css
@@ -0,0 +1,30 @@
+@layer utilities {
+    @variants responsive {
+        .no-scrollbar::-webkit-scrollbar {
+            display: block;
+            height: 0px;
+            background-color: initial;
+            border-radius: 10px;
+            transition: all 2s linear;
+        }
+
+        .no-scrollbar:hover::-webkit-scrollbar {
+            height: .5rem;
+        }
+
+        .no-scrollbar {
+            -ms-overflow-style: none;
+            scrollbar-width: none;
+        }
+
+        .no-scrollbar::-webkit-scrollbar-thumb {
+            background-color: rgb(228 228 231/var(--tw-bg-opacity));
+            border-radius: 10px;
+        }
+
+        .no-scrollbar::-webkit-scrollbar-track {
+            background-color: rgb(249 250 251);
+            border-radius: 5px;
+        }
+    }
+}
diff --git a/elixir/apps/web/lib/web/components/core_components.ex b/elixir/apps/web/lib/web/components/core_components.ex
index b6d5fe975..5edd161f5 100644
--- a/elixir/apps/web/lib/web/components/core_components.ex
+++ b/elixir/apps/web/lib/web/components/core_components.ex
@@ -65,7 +65,7 @@ defmodule Web.CoreComponents do
       bg-gray-800
       relative
     ], @class]}>
-      <code class="block whitespace-nowrap overflow-x-scroll rounded-b-lg" data-copy>
+      <code class="block w-full no-scrollbar whitespace-nowrap overflow-x-auto rounded-b-lg" data-copy>
         <%= render_slot(@inner_block) %>
       </code>
       <.icon name="hero-clipboard-document" data-icon class={~w[