From 7073cd593130879b96d48893aee8052ae3baa49a Mon Sep 17 00:00:00 2001
From: Henry <henry_ball@hotmail.co.uk>
Date: Sun, 14 Sep 2025 20:28:38 +0100
Subject: [PATCH] feat: only render table if api keys exist

---
 apps/web/src/components/Dropdown.tsx                |  4 ++--
 .../src/views/settings/components/ApiKeyList.tsx    | 13 +++++++++----
 2 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/apps/web/src/components/Dropdown.tsx b/apps/web/src/components/Dropdown.tsx
index 7bf315d9..4a4064a6 100644
--- a/apps/web/src/components/Dropdown.tsx
+++ b/apps/web/src/components/Dropdown.tsx
@@ -15,7 +15,7 @@ export default function Dropdown({
       <div>
         <Menu.Button
           disabled={disabled}
-          className="flex h-7 w-7 items-center justify-center rounded-[5px] hover:bg-light-200 dark:hover:bg-dark-200"
+          className="flex h-7 w-7 items-center justify-center rounded-[5px] hover:bg-light-200 focus:outline-none dark:hover:bg-dark-200"
         >
           {children}
         </Menu.Button>
@@ -30,7 +30,7 @@ export default function Dropdown({
         leaveFrom="transform opacity-100 scale-100"
         leaveTo="transform opacity-0 scale-95"
       >
-        <Menu.Items className="absolute right-0 z-30 mt-2 w-56 origin-top-right rounded-md border border-light-200 bg-light-50 p-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none dark:border-dark-400 dark:bg-dark-300">
+        <Menu.Items className="absolute right-0 z-50 mt-2 w-56 origin-top-right rounded-md border border-light-200 bg-light-50 p-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none dark:border-dark-400 dark:bg-dark-300">
           <div className="flex flex-col">
             {items.map((item) => (
               <Menu.Item key={item.label}>
diff --git a/apps/web/src/views/settings/components/ApiKeyList.tsx b/apps/web/src/views/settings/components/ApiKeyList.tsx
index f5bcec3c..61b16ea4 100644
--- a/apps/web/src/views/settings/components/ApiKeyList.tsx
+++ b/apps/web/src/views/settings/components/ApiKeyList.tsx
@@ -105,7 +105,7 @@ export default function ApiKeyList() {
           )}
         >
           <div className="flex w-full items-center justify-center px-3">
-            <div className={twMerge("relative")}>
+            <div className="relative z-50">
               <Dropdown
                 items={[
                   {
@@ -126,11 +126,16 @@ export default function ApiKeyList() {
       </tr>
     );
   };
+
+  if (!isLoading && (!data?.data || data.data.length === 0)) {
+    return null;
+  }
+
   return (
     <div className="mt-8 flow-root">
-      <div className="overflow-x-auto">
-        <div className="inline-block min-w-full py-2 align-middle">
-          <div className="h-full shadow ring-1 ring-black ring-opacity-5 sm:rounded-lg">
+      <div className="overflow-x-auto overflow-y-visible">
+        <div className="inline-block min-w-full py-2 pb-12 align-middle">
+          <div className="relative h-full shadow ring-1 ring-black ring-opacity-5 sm:rounded-lg">
             <table className="min-w-[600px] divide-y divide-light-600 dark:divide-dark-600">
               <thead className="rounded-t-lg bg-light-300 dark:bg-dark-200">
                 <tr>