diff --git a/vibn-frontend/components/project/database-table-tree.tsx b/vibn-frontend/components/project/database-table-tree.tsx
index fe46fb61..854952ab 100644
--- a/vibn-frontend/components/project/database-table-tree.tsx
+++ b/vibn-frontend/components/project/database-table-tree.tsx
@@ -196,8 +196,8 @@ function SchemaGroup({
}}
/>
{t.name}
- {t.approxRows != null && t.approxRows > 0 && (
- ~{formatCount(t.approxRows)}
+ {t.approxRows != null && t.approxRows >= 0 && (
+ {formatCount(t.approxRows)}
)}
@@ -227,12 +227,7 @@ function formatCount(n: number) {
// ──────────────────────────────────────────────────
-const INK = {
- ink: "#1a1a1a",
- mid: "#5f5e5a",
- muted: "#a09a90",
- borderSoft: "#efebe1",
-} as const;
+// Clean up unused styles
const treeWrap: React.CSSProperties = {
display: "flex",
@@ -251,8 +246,8 @@ const row: React.CSSProperties = {
display: "flex",
alignItems: "center",
gap: 8,
- width: "fit-content",
- padding: "4px 8px 4px 6px",
+ width: "100%",
+ padding: "6px 8px 6px 6px",
border: "1px solid transparent",
borderRadius: THEME.radiusSm,
cursor: "pointer",
@@ -263,17 +258,21 @@ const row: React.CSSProperties = {
};
const tableName: React.CSSProperties = {
fontSize: "0.875rem",
- color: INK.ink,
+ color: THEME.ink,
flex: 1,
whiteSpace: "nowrap",
overflow: "hidden",
textOverflow: "ellipsis",
};
const rowCount: React.CSSProperties = {
- fontSize: "0.68rem",
- color: INK.muted,
+ fontSize: "0.65rem",
+ fontWeight: 600,
+ color: THEME.mid,
+ background: THEME.borderSoft,
+ padding: "2px 6px",
+ borderRadius: 999,
flexShrink: 0,
- fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace",
+ marginLeft: "auto",
};
const schemaHeader: React.CSSProperties = {
display: "flex",
@@ -284,7 +283,7 @@ const schemaHeader: React.CSSProperties = {
fontWeight: 600,
letterSpacing: "0.06em",
textTransform: "uppercase",
- color: INK.muted,
+ color: THEME.muted,
background: "transparent",
border: "none",
cursor: "pointer",
@@ -296,7 +295,7 @@ const inline: React.CSSProperties = {
gap: 6,
padding: "8px 10px",
fontSize: "0.76rem",
- color: INK.mid,
+ color: THEME.mid,
};
const infoBox: React.CSSProperties = {
display: "flex",
@@ -304,9 +303,9 @@ const infoBox: React.CSSProperties = {
gap: 6,
padding: "8px 10px",
fontSize: "0.74rem",
- color: INK.mid,
- background: "#fafaf6",
- border: `1px dashed ${INK.borderSoft}`,
+ color: THEME.mid,
+ background: THEME.subtleBg,
+ border: `1px dashed ${THEME.borderSoft}`,
borderRadius: 6,
lineHeight: 1.4,
};