fix(dashboard): align table tree styling with codebase tree and flatten public schemas

This commit is contained in:
2026-06-14 14:13:16 -07:00
parent c004be3b12
commit c5894775f8

View File

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