mark/vibn-agent-runner
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(dashboard): apply workspace layout sizing and independent scroll to databases page

Browse Source
This commit is contained in:
mawkone
2026-06-14 14:02:57 -07:00
parent 968d3477c2
commit a55a226ed0
1 changed files with 76 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

139
vibn-frontend/app/[workspace]/project/[projectId]/(home)/data/tables/page.tsx
View File

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