fix: Make scrollbars more visible

ctrlplanedev · Dec 5, 2024 · 248d609 · 248d609
1 parent 028a860
commit 248d609
Show file tree

Hide file tree

Showing 29 changed files with 29 additions and 29 deletions.
diff --git a/apps/webservice/src/app/[workspaceSlug]/(app)/(job)/job-agents/page.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/(job)/job-agents/page.tsx
@@ -35,7 +35,7 @@ export default async function JobAgentsPage({ params }: PageProps) {
 
       <ResizablePanelGroup direction="horizontal" className="h-full">
         <ResizablePanel className="text-sm" defaultSize={60}>
-          <div className="scrollbar-thin scrollbar-thumb-neutral-800 scrollbar-track-neutral-900 h-[calc(100vh-40px)] overflow-auto">
+          <div className="scrollbar-thin scrollbar-thumb-neutral-700 scrollbar-track-neutral-800 h-[calc(100vh-40px)] overflow-auto">
             <JobAgentsTable jobAgents={jobAgents} />
           </div>
         </ResizablePanel>

diff --git a/...service/src/app/[workspaceSlug]/(app)/(targets)/target-metadata-groups/[groupId]/page.tsx b/...service/src/app/[workspaceSlug]/(app)/(targets)/target-metadata-groups/[groupId]/page.tsx
@@ -23,7 +23,7 @@ export default async function TargetMetadataGroupPages({
         </Badge>
       </div>
 
-      <div className="scrollbar-thin scrollbar-thumb-neutral-800 scrollbar-track-neutral-900 h-[calc(100vh-110px)] w-full overflow-auto">
+      <div className="scrollbar-thin scrollbar-thumb-neutral-700 scrollbar-track-neutral-800 h-[calc(100vh-110px)] w-full overflow-auto">
         <CombinationsTable
           workspaceSlug={workspaceSlug}
           combinations={metadataGroup.combinations}

diff --git a/apps/webservice/src/app/[workspaceSlug]/(app)/(targets)/target-metadata-groups/page.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/(targets)/target-metadata-groups/page.tsx
@@ -31,7 +31,7 @@ export default async function TargetMetadataGroupPages({
         </CreateMetadataGroupDialog>
       </div>
 
-      <div className="scrollbar-thin scrollbar-thumb-neutral-800 scrollbar-track-neutral-900 h-[calc(100vh-120px)] overflow-auto">
+      <div className="scrollbar-thin scrollbar-thumb-neutral-700 scrollbar-track-neutral-800 h-[calc(100vh-120px)] overflow-auto">
         <TargetGroupsTable
           workspace={workspace}
           metadataGroups={metadataGroups}

diff --git a/apps/webservice/src/app/[workspaceSlug]/(app)/(targets)/target-providers/page.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/(targets)/target-providers/page.tsx
@@ -58,7 +58,7 @@ export default async function TargetProvidersPage({
   });
 
   return (
-    <div className="scrollbar-thin scrollbar-thumb-neutral-800 scrollbar-track-neutral-900 h-[calc(100vh-40px)] overflow-auto">
+    <div className="scrollbar-thin scrollbar-thumb-neutral-700 scrollbar-track-neutral-800 h-[calc(100vh-40px)] overflow-auto">
       <Table className="w-full border border-x-0 border-t-0 border-b-neutral-800/50">
         <TableHeader>
           <TableRow>

diff --git a/apps/webservice/src/app/[workspaceSlug]/(app)/(targets)/targets/TargetPageContent.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/(targets)/targets/TargetPageContent.tsx
@@ -224,7 +224,7 @@ export const TargetPageContent: React.FC<{
         />
       )}
       {targets.data != null && targets.data.total > 0 && (
-        <div className="scrollbar-thin scrollbar-thumb-neutral-800 scrollbar-track-neutral-900 h-[calc(100vh-90px)] overflow-auto">
+        <div className="scrollbar-thin scrollbar-thumb-neutral-700 scrollbar-track-neutral-800 h-[calc(100vh-90px)] overflow-auto">
           <TargetsTable
             targets={targets.data.items}
             activeTargetIds={targetId ? [targetId] : []}

diff --git a/apps/webservice/src/app/[workspaceSlug]/(app)/(targets)/targets/[targetId]/page.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/(targets)/targets/[targetId]/page.tsx
@@ -89,7 +89,7 @@ const TargetMetadataInfo: React.FC<{ metadata: Record<string, string> }> = (
             onChange={(e) => setSearch(e.target.value)}
           />
         </div>
-        <div className="scrollbar-thin scrollbar-thumb-neutral-800 scrollbar-track-neutral-900 overflow-auto rounded-b-lg border-x border-b p-1.5">
+        <div className="scrollbar-thin scrollbar-thumb-neutral-700 scrollbar-track-neutral-800 overflow-auto rounded-b-lg border-x border-b p-1.5">
           {result.map(([key, value]) => (
             <div className="text-nowrap font-mono">
               <span className="text-red-400">{key}:</span>{" "}

diff --git a/...[workspaceSlug]/(app)/_components/deployment-resource-drawer/DeploymentResourceDrawer.tsx b/...[workspaceSlug]/(app)/_components/deployment-resource-drawer/DeploymentResourceDrawer.tsx
@@ -98,7 +98,7 @@ export const DeploymentResourceDrawer: React.FC = () => {
     <Drawer open={isOpen} onOpenChange={setIsOpen}>
       <DrawerContent
         showBar={false}
-        className="scrollbar-thin scrollbar-thumb-neutral-800 scrollbar-track-neutral-900 left-auto right-0 top-0 mt-0 h-screen w-2/3 max-w-7xl overflow-auto rounded-none focus-visible:outline-none"
+        className="scrollbar-thin scrollbar-thumb-neutral-700 scrollbar-track-neutral-800 left-auto right-0 top-0 mt-0 h-screen w-2/3 max-w-7xl overflow-auto rounded-none focus-visible:outline-none"
       >
         {loading && (
           <div className="flex h-full w-full items-center justify-center">

diff --git a/apps/webservice/src/app/[workspaceSlug]/(app)/_components/filter/MetadataConditionRender.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/_components/filter/MetadataConditionRender.tsx
@@ -58,7 +58,7 @@ export const MetadataConditionRender: React.FC<
             </PopoverTrigger>
             <PopoverContent
               align="start"
-              className="scrollbar-thin scrollbar-track-neutral-950 scrollbar-thumb-neutral-800 max-h-[300px] overflow-y-auto p-0 text-sm"
+              className="scrollbar-thin scrollbar-track-neutral-800 scrollbar-thumb-neutral-700 max-h-[300px] overflow-y-auto p-0 text-sm"
               onOpenAutoFocus={(e) => e.preventDefault()}
             >
               {filteredMetadataKeys.map((k) => (

diff --git a/apps/webservice/src/app/[workspaceSlug]/(app)/_components/job-drawer/JobDrawer.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/_components/job-drawer/JobDrawer.tsx
@@ -55,7 +55,7 @@ export const JobDrawer: React.FC = () => {
     <Drawer open={isOpen} onOpenChange={setIsOpen}>
       <DrawerContent
         showBar={false}
-        className="scrollbar-thin scrollbar-thumb-neutral-800 scrollbar-track-neutral-900 left-auto right-0 top-0 mt-0 h-screen w-2/3 overflow-auto rounded-none focus-visible:outline-none"
+        className="scrollbar-thin scrollbar-thumb-neutral-700 scrollbar-track-neutral-800 left-auto right-0 top-0 mt-0 h-screen w-2/3 overflow-auto rounded-none focus-visible:outline-none"
       >
         {loading && (
           <div className="flex h-full w-full items-center justify-center">

diff --git a/apps/webservice/src/app/[workspaceSlug]/(app)/_components/job-drawer/JobMetadata.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/_components/job-drawer/JobMetadata.tsx
@@ -30,7 +30,7 @@ export const JobMetadata: React.FC<JobMetadataProps> = ({ job }) => {
           value={search}
           onChange={(e) => setSearch(e.target.value)}
         />
-        <div className="scrollbar-thin scrollbar-thumb-neutral-800 scrollbar-track-neutral-900 max-h-[250px] overflow-auto rounded-b-lg border-x border-b p-1.5">
+        <div className="scrollbar-thin scrollbar-thumb-neutral-700 scrollbar-track-neutral-800 max-h-[250px] overflow-auto rounded-b-lg border-x border-b p-1.5">
           {result.length === 0 && (
             <div className="text-center text-muted-foreground">
               No matching metadata found

diff --git a/apps/webservice/src/app/[workspaceSlug]/(app)/_components/job-drawer/JobVariables.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/_components/job-drawer/JobVariables.tsx
@@ -39,7 +39,7 @@ export const JobVariables: React.FC<JobVariablesProps> = ({ job }) => {
           value={search}
           onChange={(e) => setSearch(e.target.value)}
         />
-        <div className="scrollbar-thin scrollbar-thumb-neutral-800 scrollbar-track-neutral-900 max-h-[250px] overflow-auto rounded-b-lg border-x border-b p-1.5">
+        <div className="scrollbar-thin scrollbar-thumb-neutral-700 scrollbar-track-neutral-800 max-h-[250px] overflow-auto rounded-b-lg border-x border-b p-1.5">
           {result.length === 0 && (
             <div className="text-center text-muted-foreground">
               No matching variables found

diff --git a/...src/app/[workspaceSlug]/(app)/_components/release-channel-drawer/ReleaseChannelDrawer.tsx b/...src/app/[workspaceSlug]/(app)/_components/release-channel-drawer/ReleaseChannelDrawer.tsx
@@ -39,7 +39,7 @@ export const ReleaseChannelDrawer: React.FC = () => {
     <Drawer open={isOpen} onOpenChange={setIsOpen}>
       <DrawerContent
         showBar={false}
-        className="scrollbar-thin scrollbar-thumb-neutral-800 scrollbar-track-neutral-900 left-auto right-0 top-0 mt-0 h-screen w-2/3 max-w-6xl overflow-auto rounded-none focus-visible:outline-none"
+        className="scrollbar-thin scrollbar-thumb-neutral-700 scrollbar-track-neutral-800 left-auto right-0 top-0 mt-0 h-screen w-2/3 max-w-6xl overflow-auto rounded-none focus-visible:outline-none"
       >
         {loading && (
           <div className="flex h-full w-full items-center justify-center">

diff --git a/apps/webservice/src/app/[workspaceSlug]/(app)/_components/release-drawer/OverviewContent.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/_components/release-drawer/OverviewContent.tsx
@@ -142,7 +142,7 @@ const ReleaseMetadataInfo: React.FC<{ metadata: Record<string, string> }> = (
             onChange={(e) => setSearch(e.target.value)}
           />
         </div>
-        <div className="scrollbar-thin scrollbar-thumb-neutral-800 scrollbar-track-neutral-900 max-h-[250px] overflow-auto rounded-b-lg border-x border-b p-1.5">
+        <div className="scrollbar-thin scrollbar-thumb-neutral-700 scrollbar-track-neutral-800 max-h-[250px] overflow-auto rounded-b-lg border-x border-b p-1.5">
           {result.map(([key, value]) => (
             <div className="text-nowrap font-mono" key={key}>
               <span>

diff --git a/apps/webservice/src/app/[workspaceSlug]/(app)/_components/target-drawer/OverviewContent.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/_components/target-drawer/OverviewContent.tsx
@@ -43,7 +43,7 @@ const TargetMetadataInfo: React.FC<{ metadata: Record<string, string> }> = (
             onChange={(e) => setSearch(e.target.value)}
           />
         </div>
-        <div className="scrollbar-thin scrollbar-thumb-neutral-800 scrollbar-track-neutral-900 max-h-[250px] overflow-auto rounded-b-lg border-x border-b p-1.5">
+        <div className="scrollbar-thin scrollbar-thumb-neutral-700 scrollbar-track-neutral-800 max-h-[250px] overflow-auto rounded-b-lg border-x border-b p-1.5">
           {result.map(([key, value]) => (
             <div className="text-nowrap font-mono" key={key}>
               <span>

diff --git a/apps/webservice/src/app/[workspaceSlug]/(app)/systems/SystemsList.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/systems/SystemsList.tsx
@@ -46,7 +46,7 @@ export const SystemsList: React.FC<{
       )}
 
       {systems.data != null && systems.data.total > 0 && (
-        <div className="scrollbar-thin scrollbar-thumb-neutral-800 scrollbar-track-neutral-900 h-[calc(100vh-390px)] overflow-auto">
+        <div className="scrollbar-thin scrollbar-thumb-neutral-700 scrollbar-track-neutral-800 h-[calc(100vh-390px)] overflow-auto">
           <SystemsTable
             systems={systems.data.items}
             workspaceSlug={workspace.slug}

diff --git a/...rc/app/[workspaceSlug]/(app)/systems/[systemSlug]/deployments/[deploymentSlug]/layout.tsx b/...rc/app/[workspaceSlug]/(app)/systems/[systemSlug]/deployments/[deploymentSlug]/layout.tsx
@@ -81,7 +81,7 @@ export default async function DeploymentLayout({
         totalReleases={releases.total}
       />
 
-      <div className="scrollbar-thin scrollbar-thumb-neutral-800 scrollbar-track-neutral-900 h-[calc(100vh-53px-49px)] overflow-auto">
+      <div className="scrollbar-thin scrollbar-thumb-neutral-700 scrollbar-track-neutral-800 h-[calc(100vh-53px-49px)] overflow-auto">
         {children}
       </div>
     </>

diff --git a/...Slug]/(app)/systems/[systemSlug]/deployments/[deploymentSlug]/variables/VariableTable.tsx b/...Slug]/(app)/systems/[systemSlug]/deployments/[deploymentSlug]/variables/VariableTable.tsx
@@ -73,7 +73,7 @@ export const VariableTable: React.FC<{
           onChange={(e) => setSearch(e.target.value)}
         />
       </div>
-      <div className="scrollbar-thin scrollbar-thumb-neutral-800 scrollbar-track-neutral-900 overflow-auto border-t bg-neutral-950">
+      <div className="scrollbar-thin scrollbar-thumb-neutral-700 scrollbar-track-neutral-800 overflow-auto border-t bg-neutral-950">
         <Table className="table-fixed">
           <TableBody>
             {result.map((variable) => (

diff --git a/apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/deployments/page.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/deployments/page.tsx
@@ -28,7 +28,7 @@ export default async function SystemDeploymentsPage({
       {deployments.length === 0 ? (
         <DeploymentGettingStarted systemId={system.id} />
       ) : (
-        <div className="scrollbar-thin scrollbar-thumb-neutral-800 scrollbar-track-neutral-900 container mx-auto h-[calc(100vh-40px)] overflow-auto p-8">
+        <div className="scrollbar-thin scrollbar-thumb-neutral-700 scrollbar-track-neutral-800 container mx-auto h-[calc(100vh-40px)] overflow-auto p-8">
           <DeploymentTable
             deployments={deployments}
             environments={environments}

diff --git a/...service/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/runbooks/EditRunbookDialog.tsx b/...service/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/runbooks/EditRunbookDialog.tsx
@@ -59,7 +59,7 @@ export const EditRunbookDialog: React.FC<{
   return (
     <Dialog open={open} onOpenChange={setOpen}>
       <DialogTrigger asChild>{children}</DialogTrigger>
-      <DialogContent className="scrollbar-thin scrollbar-track-neutral-900 scrollbar-thumb-neutral-800 max-h-[95vh] max-w-3xl overflow-y-auto">
+      <DialogContent className="scrollbar-thin scrollbar-track-neutral-800 scrollbar-thumb-neutral-700 max-h-[95vh] max-w-3xl overflow-y-auto">
         <DialogHeader>
           <DialogTitle>Edit Runbook</DialogTitle>
         </DialogHeader>

diff --git a/...ervice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/runbooks/[runbookId]/layout.tsx b/...ervice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/runbooks/[runbookId]/layout.tsx
@@ -45,7 +45,7 @@ export default async function RunbookLayout({
       </TopNav>
       <RunbookNavBar totalJobs={total} runbook={runbook} />
 
-      <div className="scrollbar-thin scrollbar-thumb-neutral-800 scrollbar-track-neutral-900 h-[calc(100vh-53px-49px)] overflow-auto">
+      <div className="scrollbar-thin scrollbar-thumb-neutral-700 scrollbar-track-neutral-800 h-[calc(100vh-53px-49px)] overflow-auto">
         {children}
       </div>
     </>

diff --git a/.../app/[workspaceSlug]/(app)/systems/[systemSlug]/variable-sets/CreateVariableSetDialog.tsx b/.../app/[workspaceSlug]/(app)/systems/[systemSlug]/variable-sets/CreateVariableSetDialog.tsx
@@ -120,7 +120,7 @@ export const CreateVariableSetDialog: React.FC<{
   return (
     <Dialog open={open} onOpenChange={setOpen}>
       <DialogTrigger asChild>{children}</DialogTrigger>
-      <DialogContent className="scrollbar-thin scrollbar-thumb-neutral-800 scrollbar-track-neutral-900 max-h-screen max-w-2xl overflow-auto">
+      <DialogContent className="scrollbar-thin scrollbar-thumb-neutral-700 scrollbar-track-neutral-800 max-h-screen max-w-2xl overflow-auto">
         <Form {...form}>
           <form onSubmit={onSubmit} className="space-y-3">
             <DialogHeader>

diff --git a/apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/variable-sets/page.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/variable-sets/page.tsx
@@ -36,7 +36,7 @@ export default async function SystemVariableSetsPage({
         />
       )}
       {variableSets.length !== 0 && (
-        <div className="scrollbar-thin scrollbar-thumb-neutral-800 scrollbar-track-neutral-900 h-[calc(100vh-110px)] overflow-auto">
+        <div className="scrollbar-thin scrollbar-thumb-neutral-700 scrollbar-track-neutral-800 h-[calc(100vh-110px)] overflow-auto">
           <div className="flex items-center gap-4 border-b p-2 pl-4">
             <h1 className="flex-grow">Variable Sets</h1>
             <CreateVariableSetDialog

diff --git a/apps/webservice/src/app/[workspaceSlug]/settings/account/api/page.tsx b/apps/webservice/src/app/[workspaceSlug]/settings/account/api/page.tsx
@@ -8,7 +8,7 @@ export const metadata: Metadata = { title: "API Key Creation" };
 export default async function AccountSettingApiPage() {
   const apiKeys = await api.user.apiKey.list();
   return (
-    <div className="scrollbar-thin scrollbar-thumb-neutral-800 scrollbar-track-neutral-900 h-[calc(100vh-40px)] overflow-auto">
+    <div className="scrollbar-thin scrollbar-thumb-neutral-700 scrollbar-track-neutral-800 h-[calc(100vh-40px)] overflow-auto">
       <div className="container mx-auto max-w-2xl space-y-8 py-8">
         <div className="space-y-1">
           <h1 className="text-xl font-semibold">API</h1>

diff --git a/apps/webservice/src/app/[workspaceSlug]/settings/account/profile/page.tsx b/apps/webservice/src/app/[workspaceSlug]/settings/account/profile/page.tsx
@@ -27,7 +27,7 @@ export default async function AccountSettingProfilePage({
   const { image, name, email } = user;
   const githubUser = await api.github.user.byUserId(session.user.id);
   return (
-    <div className="scrollbar-thin scrollbar-thumb-neutral-800 scrollbar-track-neutral-900 h-[calc(100vh-120px)] overflow-auto">
+    <div className="scrollbar-thin scrollbar-thumb-neutral-700 scrollbar-track-neutral-800 h-[calc(100vh-120px)] overflow-auto">
       <div className="container mx-auto max-w-2xl space-y-8 py-8">
         <div className="space-y-1">
           <h1 className="text-xl font-semibold">Profile</h1>

diff --git a/apps/webservice/src/app/[workspaceSlug]/settings/workspace/general/page.tsx b/apps/webservice/src/app/[workspaceSlug]/settings/workspace/general/page.tsx
@@ -16,7 +16,7 @@ export default async function WorkspaceGeneralSettingsPage({
   if (workspace == null) notFound();
 
   return (
-    <div className="scrollbar-thin scrollbar-thumb-neutral-800 scrollbar-track-neutral-900 h-[calc(100vh-40px)] overflow-auto">
+    <div className="scrollbar-thin scrollbar-thumb-neutral-700 scrollbar-track-neutral-800 h-[calc(100vh-40px)] overflow-auto">
       <div className="container mx-auto max-w-2xl space-y-8">
         <div className="space-y-1">
           <h1 className="text-xl font-semibold">General</h1>

diff --git a/...bservice/src/app/[workspaceSlug]/settings/workspace/integrations/(integration)/layout.tsx b/...bservice/src/app/[workspaceSlug]/settings/workspace/integrations/(integration)/layout.tsx
@@ -12,7 +12,7 @@ export default function IntegrationLayout({
 }) {
   const { workspaceSlug } = params;
   return (
-    <div className="scrollbar-thin scrollbar-thumb-neutral-800 scrollbar-track-neutral-900 h-[calc(100vh-110px)] overflow-auto">
+    <div className="scrollbar-thin scrollbar-thumb-neutral-700 scrollbar-track-neutral-800 h-[calc(100vh-110px)] overflow-auto">
       <div className="flex justify-center">
         <div className="flex max-w-3xl flex-col gap-4">
           <Link href={`/${workspaceSlug}/settings/workspace/integrations`}>

diff --git a/apps/webservice/src/app/[workspaceSlug]/settings/workspace/members/page.tsx b/apps/webservice/src/app/[workspaceSlug]/settings/workspace/members/page.tsx
@@ -29,7 +29,7 @@ export default async function WorkspaceSettingMembersPage({
   const roles = await api.workspace.roles(workspace.id);
 
   return (
-    <div className="scrollbar-thin scrollbar-thumb-neutral-800 scrollbar-track-neutral-900 container mx-auto h-[calc(100vh-40px)] max-w-2xl space-y-8 overflow-auto">
+    <div className="scrollbar-thin scrollbar-thumb-neutral-700 scrollbar-track-neutral-800 container mx-auto h-[calc(100vh-40px)] max-w-2xl space-y-8 overflow-auto">
       <div className="container mx-auto max-w-2xl space-y-8">
         <div className="space-y-1">
           <h1 className="text-xl font-semibold">Members</h1>

diff --git a/apps/webservice/src/app/[workspaceSlug]/settings/workspace/overview/page.tsx b/apps/webservice/src/app/[workspaceSlug]/settings/workspace/overview/page.tsx
@@ -23,7 +23,7 @@ export default function OverviewPage({
 }) {
   const { workspaceSlug } = params;
   return (
-    <div className="scrollbar-thin scrollbar-thumb-neutral-800 scrollbar-track-neutral-900 container mx-auto h-[calc(100vh-40px)] max-w-7xl space-y-8 overflow-auto">
+    <div className="scrollbar-thin scrollbar-thumb-neutral-700 scrollbar-track-neutral-800 container mx-auto h-[calc(100vh-40px)] max-w-7xl space-y-8 overflow-auto">
       <div className="space-y-1">
         <h1 className="text-xl font-semibold">Workspace</h1>
         <p className="text-sm text-muted-foreground">

diff --git a/packages/ui/src/table.tsx b/packages/ui/src/table.tsx
@@ -6,7 +6,7 @@ const Table = React.forwardRef<
   HTMLTableElement,
   React.HTMLAttributes<HTMLTableElement>
 >(({ className, ...props }, ref) => (
-  <div className="scrollbar-thin scrollbar-thumb-neutral-800 scrollbar-track-neutral-900 relative w-full overflow-auto">
+  <div className="scrollbar-thin scrollbar-thumb-neutral-700 scrollbar-track-neutral-800 relative w-full overflow-auto">
     <table
       ref={ref}
       className={cn("w-full caption-bottom text-sm", className)}