diff --git a/apps/studio/components/interfaces/Auth/Hooks/HookCard.tsx b/apps/studio/components/interfaces/Auth/Hooks/HookCard.tsx
index 783da15af7b..77c5d759941 100644
--- a/apps/studio/components/interfaces/Auth/Hooks/HookCard.tsx
+++ b/apps/studio/components/interfaces/Auth/Hooks/HookCard.tsx
@@ -18,10 +18,10 @@ export const HookCard = ({ hook, onSelect }: HookCardProps) => {
 
   return (
     <div className="bg-surface-100 border-default overflow-hidden border shadow-sm px-5 py-4 flex flex-row first:rounded-t-md last:rounded-b-md space-x-4">
-      <div className="">
+      <div>
         <Webhook size={21} strokeWidth="1" />
       </div>
-      <div className="flex flex-col flex-0 overflow-y-auto w-full">
+      <div className="flex flex-col grow overflow-y-auto w-full">
         <span className="text-sm text-foreground">{hook.title}</span>
         <span className="text-sm text-foreground-lighter">{hook.subtitle}</span>
         <div className="text-sm flex flex-row space-x-5 py-4">
@@ -112,7 +112,7 @@ export const HookCard = ({ hook, onSelect }: HookCardProps) => {
           <DocsButton href={`${DOCS_URL}/guides/auth/auth-hooks/${hook.docSlug}`} />
         </div>
       </div>
-      <div className="flex-1">
+      <div>
         {hook.enabled ? (
           <Badge className="space-x-1" variant="success">
             <div className="h-3.5 w-3.5 bg-brand rounded-full flex justify-center items-center">