From c5894775f8230eadd40958890e8b89f4f92bedf0 Mon Sep 17 00:00:00 2001
From: mawkone <mark@getacquired.com>
Date: Sun, 14 Jun 2026 14:13:16 -0700
Subject: [PATCH] fix(dashboard): align table tree styling with codebase tree
 and flatten public schemas

---
 .../project/database-table-tree.tsx           | 28 ++++++++-----------
 1 file changed, 12 insertions(+), 16 deletions(-)

diff --git a/vibn-frontend/components/project/database-table-tree.tsx b/vibn-frontend/components/project/database-table-tree.tsx
index 36d21bce..dfac12ee 100644
--- a/vibn-frontend/components/project/database-table-tree.tsx
+++ b/vibn-frontend/components/project/database-table-tree.tsx
@@ -182,14 +182,14 @@ function SchemaGroup({
               style={{
                 ...row,
                 background: active ? THEME.subtleBg : "transparent",
-                borderColor: active ? THEME.border : "transparent",
+                borderColor: "transparent",
                 color: active ? THEME.ink : THEME.mid,
                 fontWeight: active ? 500 : 400,
               }}
               aria-pressed={active}
             >
               <Table
-                size={13}
+                size={16}
                 style={{
                   color: active ? THEME.ink : THEME.muted,
                   flexShrink: 0,
@@ -210,15 +210,11 @@ function SchemaGroup({
 
   return (
     <div>
-      <button
-        type="button"
-        onClick={() => setOpen((o) => !o)}
-        style={schemaHeader}
-      >
-        {open ? <ChevronDown size={11} /> : <ChevronRight size={11} />}
-        {schema}
-      </button>
-      {open && items}
+      {/*
+        We remove the schema chevron wrapper entirely, which flattens the tree.
+        Tables are now a single list, just like files inside a flat directory.
+      */}
+      {items}
     </div>
   );
 }
@@ -255,23 +251,23 @@ const row: React.CSSProperties = {
   display: "flex",
   alignItems: "center",
   gap: 6,
-  width: "100%",
-  padding: "5px 8px",
+  width: "fit-content",
+  padding: "4px 8px 4px 0",
   border: "1px solid transparent",
-  borderRadius: 5,
+  borderRadius: THEME.radiusSm,
   cursor: "pointer",
   font: "inherit",
   color: "inherit",
   textAlign: "left",
+  transition: "all 0.1s ease",
 };
 const tableName: React.CSSProperties = {
-  fontSize: "0.78rem",
+  fontSize: "0.875rem",
   color: INK.ink,
   flex: 1,
   whiteSpace: "nowrap",
   overflow: "hidden",
   textOverflow: "ellipsis",
-  fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace",
 };
 const rowCount: React.CSSProperties = {
   fontSize: "0.68rem",