feat: hide scrollbar when needed

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}