feat: hide scrollbar when needed

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>

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

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}

styles/globals.css

@@ -30,3 +30,10 @@
     --chart-5: 340 75% 55%;
   }
 }
+
+@layer utilities {
+  /* Hide scrollbar */
+  .no-scrollbar {
+    scrollbar-width: none;
+  }
+}