fix(dashboard): apply workspace layout sizing and independent scroll to databases page
This commit is contained in:
@@ -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" }}>
|
||||
<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",
|
||||
justifyContent: "center",
|
||||
padding: "48px 0",
|
||||
gap: 8,
|
||||
color: THEME.mid,
|
||||
fontSize: "0.875rem",
|
||||
color: THEME.muted,
|
||||
fontSize: "0.85rem",
|
||||
}}
|
||||
>
|
||||
<Loader2 size={15} className="animate-spin" /> Loading…
|
||||
<Loader2 size={16} className="animate-spin" /> Loading…
|
||||
</div>
|
||||
</Card>
|
||||
)}
|
||||
{error && !showLoading && (
|
||||
<Card>
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
padding: "48px 0",
|
||||
gap: 8,
|
||||
color: THEME.danger,
|
||||
fontSize: "0.875rem",
|
||||
fontSize: "0.85rem",
|
||||
}}
|
||||
>
|
||||
<AlertCircle size={15} /> {error}
|
||||
<AlertCircle size={16} /> {error}
|
||||
</div>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{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>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user