feat(portal): Scrollbar improvements (#2160)

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,3 +1,4 @@
 @import "tailwindcss/base";
 @import "tailwindcss/components";
 @import "tailwindcss/utilities";
+@import "./scrollbar";

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;
+        }
+    }
+}

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[