From 245c8dc9e4da77d4f26cd54e7e1d866190b20e30 Mon Sep 17 00:00:00 2001
From: Ryan Hopper-Lowe <46546486+ryanhopperlowe@users.noreply.github.com>
Date: Mon, 30 Dec 2024 14:21:28 -0600
Subject: [PATCH] fix: prevent default scrollbar from displaying on tools page
 (#1077)

Signed-off-by: Ryan Hopper-Lowe <ryan@acorn.io>
---
 ui/admin/app/components/ui/input.tsx       | 7 ++++---
 ui/admin/app/routes/_auth.tools._index.tsx | 2 +-
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/ui/admin/app/components/ui/input.tsx b/ui/admin/app/components/ui/input.tsx
index 281fa2d49..383d05354 100644
--- a/ui/admin/app/components/ui/input.tsx
+++ b/ui/admin/app/components/ui/input.tsx
@@ -6,6 +6,9 @@ import { cn } from "~/lib/utils";
 
 import { buttonVariants } from "~/components/ui/button";
 
+const InputReset =
+    "w-full p-3 bg-transparent border-none focus-visible:border-none focus-visible:outline-none rounded-full";
+
 const inputVariants = cva(
     cn(
         "flex items-center h-9 w-full rounded-md bg-transparent border border-input text-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground has-[:focus-visible]:ring-1 has-[:focus-visible]:ring-ring has-[:disabled]:cursor-not-allowed has-[:disabled]:opacity-50"
@@ -50,9 +53,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
                 <input
                     type={internalType}
                     data-1p-ignore={!isPassword}
-                    className={cn(
-                        "w-full p-3 bg-transparent border-none focus-visible:border-none focus-visible:outline-none rounded-full"
-                    )}
+                    className={InputReset}
                     ref={ref}
                     {...props}
                 />
diff --git a/ui/admin/app/routes/_auth.tools._index.tsx b/ui/admin/app/routes/_auth.tools._index.tsx
index 17eab2952..f30660571 100644
--- a/ui/admin/app/routes/_auth.tools._index.tsx
+++ b/ui/admin/app/routes/_auth.tools._index.tsx
@@ -59,7 +59,7 @@ export default function Tools() {
     };
 
     return (
-        <ScrollArea className="p-8 flex flex-col gap-4">
+        <ScrollArea className="h-full p-8 flex flex-col gap-4">
             <div className="flex justify-between items-center">
                 <TypographyH2>Tools</TypographyH2>
                 <div className="flex items-center space-x-2">