From 2b4f0d9a5f6071ffe3129b01204c73b2c724c309 Mon Sep 17 00:00:00 2001
From: mawkone <mark@getacquired.com>
Date: Sun, 14 Jun 2026 14:20:12 -0700
Subject: [PATCH] fix(databases): align database header with table row list in
 sidebar tree

---
 .../[projectId]/(home)/data/tables/page.tsx   | 20 ++++++-------------
 .../project/database-table-tree.tsx           |  4 ++--
 2 files changed, 8 insertions(+), 16 deletions(-)

diff --git a/vibn-frontend/app/[workspace]/project/[projectId]/(home)/data/tables/page.tsx b/vibn-frontend/app/[workspace]/project/[projectId]/(home)/data/tables/page.tsx
index cbd79d4c..31c7511f 100644
--- a/vibn-frontend/app/[workspace]/project/[projectId]/(home)/data/tables/page.tsx
+++ b/vibn-frontend/app/[workspace]/project/[projectId]/(home)/data/tables/page.tsx
@@ -28,25 +28,17 @@ type Selection = {
 
 export default function DataTablesPage() {
   const params = useParams();
-  const searchParams = useSearchParams();
   const projectId = params.projectId as string;
-  const targetDbId = searchParams.get("db");
 
   const { anatomy, loading, error } = useAnatomy(projectId);
 
   const databases = anatomy?.infrastructure?.databases ?? [];
 
-  // If targetDbId is in the URL, only show that database.
-  // Otherwise, default to the first database in the list if available.
-  const activeDbId =
-    targetDbId || (databases.length > 0 ? databases[0].uuid : null);
-  const activeDatabases = databases.filter((db) => db.uuid === activeDbId);
-
   const [selection, setSelection] = useState<Selection>(null);
 
   useEffect(() => {
     setSelection(null);
-  }, [projectId, targetDbId]);
+  }, [projectId]);
 
   const showLoading = loading && !anatomy;
 
@@ -130,7 +122,7 @@ export default function DataTablesPage() {
                     display: "flex",
                     alignItems: "center",
                     justifyContent: "space-between",
-                    padding: "20px 20px 12px 20px",
+                    padding: "10px 20px",
                     position: "sticky",
                     top: 0,
                     background: THEME.cardBg,
@@ -159,7 +151,7 @@ export default function DataTablesPage() {
                     padding: "0 20px 20px 20px",
                   }}
                 >
-                  {activeDatabases.length === 0 && (
+                  {databases.length === 0 && (
                     <div
                       style={{
                         padding: "10px 12px",
@@ -187,7 +179,7 @@ export default function DataTablesPage() {
                       </span>
                     </div>
                   )}
-                  {activeDatabases.map((db) => {
+                  {databases.map((db) => {
                     return (
                       <article
                         key={db.uuid}
@@ -203,7 +195,7 @@ export default function DataTablesPage() {
                             alignItems: "center",
                             gap: 8,
                             width: "100%",
-                            padding: "16px 20px 8px",
+                            padding: "16px 14px 12px",
                             background: "transparent",
                             border: "none",
                             font: "inherit",
@@ -225,7 +217,7 @@ export default function DataTablesPage() {
                             />
                           </span>
                           <Database
-                            size={13}
+                            size={16}
                             style={{ color: THEME.mid, flexShrink: 0 }}
                           />
                           <div
diff --git a/vibn-frontend/components/project/database-table-tree.tsx b/vibn-frontend/components/project/database-table-tree.tsx
index dfac12ee..fe46fb61 100644
--- a/vibn-frontend/components/project/database-table-tree.tsx
+++ b/vibn-frontend/components/project/database-table-tree.tsx
@@ -250,9 +250,9 @@ const list: React.CSSProperties = {
 const row: React.CSSProperties = {
   display: "flex",
   alignItems: "center",
-  gap: 6,
+  gap: 8,
   width: "fit-content",
-  padding: "4px 8px 4px 0",
+  padding: "4px 8px 4px 6px",
   border: "1px solid transparent",
   borderRadius: THEME.radiusSm,
   cursor: "pointer",