From a55a226ed0bb98167ec79a9819c907b57fa835b0 Mon Sep 17 00:00:00 2001
From: mawkone <mark@getacquired.com>
Date: Sun, 14 Jun 2026 14:02:57 -0700
Subject: [PATCH] fix(dashboard): apply workspace layout sizing and independent
 scroll to databases page

---
 .../[projectId]/(home)/data/tables/page.tsx   | 139 ++++++++++--------
 1 file changed, 76 insertions(+), 63 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 f15fcf69..fc484eec 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
@@ -53,24 +53,40 @@ export default function DataTablesPage() {
   return (
     <div
       style={{
-        minHeight: "100vh",
+        flex: 1,
+        minHeight: 0,
+        boxSizing: "border-box",
         background: THEME.canvasGradient,
         fontFamily: THEME.font,
-        padding: "36px 48px",
+        padding: "16px",
+        display: "flex",
+        flexDirection: "column",
       }}
     >
-      <div style={{ maxWidth: 1400, margin: "0 auto" }}>
-        <PageHeader
-          title="Databases"
-          subtitle="Explore the raw schema and rows in your project databases."
-        />
+      <Card
+        padding={0}
+        style={{
+          display: "flex",
+          flexDirection: "column",
+          flex: 1,
+          minHeight: 0,
+        }}
+      >
+        <div style={{ padding: "20px 24px" }}>
+          <PageHeader
+            title="Databases"
+            subtitle="Explore the raw schema and rows in your project databases."
+          />
+        </div>
 
         <div
           style={{
             display: "grid",
-            gridTemplateColumns: "minmax(200px, 280px) minmax(0, 1fr)",
-            gap: 28,
+            gridTemplateColumns: "300px minmax(0, 1fr)",
             alignItems: "stretch",
+            flex: 1,
+            minHeight: 0,
+            borderTop: `1px solid ${THEME.borderSoft}`,
           }}
         >
           {/* ── Left rail ── */}
@@ -79,38 +95,39 @@ export default function DataTablesPage() {
               minWidth: 0,
               display: "flex",
               flexDirection: "column",
-              gap: 14,
+              borderRight: `1px solid ${THEME.borderSoft}`,
+              overflowY: "auto",
             }}
           >
             {showLoading && (
-              <Card>
-                <div
-                  style={{
-                    display: "flex",
-                    alignItems: "center",
-                    gap: 8,
-                    color: THEME.mid,
-                    fontSize: "0.875rem",
-                  }}
-                >
-                  <Loader2 size={15} className="animate-spin" /> Loading…
-                </div>
-              </Card>
+              <div
+                style={{
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  padding: "48px 0",
+                  gap: 8,
+                  color: THEME.muted,
+                  fontSize: "0.85rem",
+                }}
+              >
+                <Loader2 size={16} className="animate-spin" /> Loading…
+              </div>
             )}
             {error && !showLoading && (
-              <Card>
-                <div
-                  style={{
-                    display: "flex",
-                    alignItems: "center",
-                    gap: 8,
-                    color: THEME.danger,
-                    fontSize: "0.875rem",
-                  }}
-                >
-                  <AlertCircle size={15} /> {error}
-                </div>
-              </Card>
+              <div
+                style={{
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  padding: "48px 0",
+                  gap: 8,
+                  color: THEME.danger,
+                  fontSize: "0.85rem",
+                }}
+              >
+                <AlertCircle size={16} /> {error}
+              </div>
             )}
 
             {anatomy && (
@@ -120,36 +137,34 @@ export default function DataTablesPage() {
                     display: "flex",
                     alignItems: "center",
                     justifyContent: "space-between",
-                    padding: "0 4px 8px",
+                    padding: "20px 20px 12px 20px",
+                    position: "sticky",
+                    top: 0,
+                    background: THEME.cardBg,
+                    zIndex: 10,
+                    height: "41px",
+                    boxSizing: "border-box",
+                    borderTopLeftRadius: THEME.radius,
                   }}
                 >
                   <h3
                     style={{
-                      fontSize: "0.68rem",
+                      fontSize: "0.95rem",
                       fontWeight: 600,
-                      letterSpacing: "0.12em",
-                      textTransform: "uppercase",
-                      color: THEME.muted,
+                      color: THEME.ink,
                       margin: 0,
                     }}
                   >
                     Databases
                   </h3>
-                  <span
-                    style={{
-                      fontSize: "0.7rem",
-                      fontWeight: 600,
-                      color: THEME.mid,
-                      padding: "1px 7px",
-                      borderRadius: 999,
-                      background: THEME.borderSoft,
-                    }}
-                  >
-                    {activeDatabases.length}
-                  </span>
                 </header>
                 <div
-                  style={{ display: "flex", flexDirection: "column", gap: 10 }}
+                  style={{
+                    display: "flex",
+                    flexDirection: "column",
+                    gap: 4,
+                    padding: "0 20px 20px 20px",
+                  }}
                 >
                   {activeDatabases.length === 0 && (
                     <div
@@ -184,10 +199,9 @@ export default function DataTablesPage() {
                       <article
                         key={db.uuid}
                         style={{
-                          background: THEME.cardBg,
-                          border: `1px solid ${THEME.borderSoft}`,
-                          borderRadius: 10,
-                          overflow: "hidden",
+                          display: "flex",
+                          flexDirection: "column",
+                          flex: 1,
                         }}
                       >
                         <div
@@ -196,7 +210,7 @@ export default function DataTablesPage() {
                             alignItems: "center",
                             gap: 8,
                             width: "100%",
-                            padding: "12px 14px",
+                            padding: "16px 20px 8px",
                             background: "transparent",
                             border: "none",
                             font: "inherit",
@@ -226,7 +240,7 @@ export default function DataTablesPage() {
                           >
                             <div
                               style={{
-                                fontSize: "0.85rem",
+                                fontSize: "0.95rem",
                                 fontWeight: 600,
                                 color: THEME.ink,
                                 marginBottom: 2,
@@ -255,8 +269,7 @@ export default function DataTablesPage() {
                         </div>
                         <div
                           style={{
-                            padding: "8px 10px 12px",
-                            borderTop: `1px solid ${THEME.borderSoft}`,
+                            padding: "0 8px 16px 8px",
                           }}
                         >
                           <DatabaseTableTree
@@ -330,7 +343,7 @@ export default function DataTablesPage() {
             </Card>
           </aside>
         </div>
-      </div>
+      </Card>
     </div>
   );
 }