From 840df1dab65e7441bd3e8bf64a68b30750d4e3ff Mon Sep 17 00:00:00 2001
From: Pablo Lara <larabjj@gmail.com>
Date: Fri, 27 Sep 2024 07:47:17 +0200
Subject: [PATCH] feat: hide scrollbar when needed

---
 app/(prowler)/layout.tsx                   | 2 +-
 components/providers/SnippetIdProvider.tsx | 5 ++++-
 components/ui/sidebar/SidebarWrap.tsx      | 4 ++--
 styles/globals.css                         | 7 +++++++
 4 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/app/(prowler)/layout.tsx b/app/(prowler)/layout.tsx
index b30817c0ba..ebf66c7975 100644
--- a/app/(prowler)/layout.tsx
+++ b/app/(prowler)/layout.tsx
@@ -46,7 +46,7 @@ export default function RootLayout({
         <Providers themeProps={{ attribute: "class", defaultTheme: "dark" }}>
           <div className="flex items-center h-dvh justify-center overflow-hidden">
             <SidebarWrap />
-            <main className="container h-full flex-1 flex-col p-4 mb-auto overflow-y-auto">
+            <main className="container h-full flex-1 flex-col p-4 mb-auto overflow-y-auto no-scrollbar">
               {children}
               <Toaster />
             </main>
diff --git a/components/providers/SnippetIdProvider.tsx b/components/providers/SnippetIdProvider.tsx
index 775e72eaf7..4d4b901f2c 100644
--- a/components/providers/SnippetIdProvider.tsx
+++ b/components/providers/SnippetIdProvider.tsx
@@ -12,6 +12,7 @@ export const SnippetIdProvider: React.FC<SnippetIdProviderProps> = ({
   return (
     <Snippet
       className="flex items-center py-0"
+      color="default"
       size="sm"
       variant="flat"
       radius="lg"
@@ -21,7 +22,9 @@ export const SnippetIdProvider: React.FC<SnippetIdProviderProps> = ({
     >
       <p className="flex items-center space-x-2">
         <IdIcon size={16} />
-        <span className="text-sm max-w-24 overflow-x-scroll">{providerId}</span>
+        <span className="text-sm max-w-24 overflow-x-scroll no-scrollbar">
+          {providerId}
+        </span>
       </p>
     </Snippet>
   );
diff --git a/components/ui/sidebar/SidebarWrap.tsx b/components/ui/sidebar/SidebarWrap.tsx
index bb9287a826..2da8d70670 100644
--- a/components/ui/sidebar/SidebarWrap.tsx
+++ b/components/ui/sidebar/SidebarWrap.tsx
@@ -42,7 +42,7 @@ export const SidebarWrap = () => {
   return (
     <div
       className={clsx(
-        "relative flex h-screen flex-col !border-r-small border-divider transition-width",
+        "relative flex h-screen flex-col !border-r-small border-divider transition-width bg-prowler-blue-midnight",
         {
           "w-72 p-6": !isCompact,
           "w-16 items-center px-2 py-6": isCompact,
@@ -79,7 +79,7 @@ export const SidebarWrap = () => {
         />{" "}
       </Link>
 
-      <ScrollShadow className="-mr-6 h-full max-h-full py-6 pr-6">
+      <ScrollShadow hideScrollBar className="-mr-6 h-full max-h-full py-6 pr-6">
         <Sidebar
           defaultSelectedKey="overview"
           isCompact={isCompact}
diff --git a/styles/globals.css b/styles/globals.css
index f3d4bed222..ea9b8d5b5b 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -30,3 +30,10 @@
     --chart-5: 340 75% 55%;
   }
 }
+
+@layer utilities {
+  /* Hide scrollbar */
+  .no-scrollbar {
+    scrollbar-width: none;
+  }
+}