From 63468c96dbbdde969a93aac1ab91e9eaa96d073f Mon Sep 17 00:00:00 2001
From: brainstorm-os <founder@getbrainstorm.online>
Date: Mon, 13 Jul 2026 17:46:03 +0200
Subject: [PATCH] fix(database): list-view chips painted over row titles on
 iconless rows
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Reproduced in the real shell (dogfood probe, computed grid):
`grid-template-columns` resolved to `133px 660px 0px` — an iconless entity's
glyph (`.dbv-list__glyph:empty { display:none }`) drops out of the grid FLOW,
so auto-placement shifts every child one track left: the title lands in the
`auto` track (which can't shrink below the full nowrap string), the props strip
lands in `1fr` (collapses to ~0), and the right-packed chips overflow leftward
ON TOP of the title. Every iconless row in every list view rendered this way.

Fixes, verified by re-running the probe (`0px 672px 122px`, chips right,
no overlap):
- pin each row child to its explicit grid column (glyph 1 / title 2 / props 3)
  so a hidden glyph can't reflow the row;
- size the SDK date/link cells to content inside the strip — their panel/grid
  `width:100%` inflated each to the full 28ch cap (a 212px button for an
  11-char date, and for an EMPTY value), reading as phantom misaligned columns;
- read-only strip now skips `title`/`name` columns like the editable strip does
  (it painted the full title AGAIN as the first chip).

Database react suite 49/49 green; per-app tsc clean.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 apps/database/src/react/list-view.tsx | 18 +++++++++++-------
 apps/database/src/styles.css          | 19 +++++++++++++++++++
 2 files changed, 30 insertions(+), 7 deletions(-)

diff --git a/apps/database/src/react/list-view.tsx b/apps/database/src/react/list-view.tsx
index d24124c9..aeb3ac7f 100644
--- a/apps/database/src/react/list-view.tsx
+++ b/apps/database/src/react/list-view.tsx
@@ -269,13 +269,17 @@ function ListItemFields({
 	}
 	return (
 		<div className="dbv-list__props">
-			{columns.map((column) => (
-				<DomSlot
-					key={column.propertyId}
-					build={() => paintPropertyValue(entity, column.propertyId, "inline")}
-					deps={[entity.id, column.propertyId, entity.properties[column.propertyId]]}
-				/>
-			))}
+			{columns.map((column) =>
+				// Title/name is the row heading — same skip as the editable strip
+				// above, else the full title paints AGAIN as the first chip.
+				column.propertyId === "title" || column.propertyId === "name" ? null : (
+					<DomSlot
+						key={column.propertyId}
+						build={() => paintPropertyValue(entity, column.propertyId, "inline")}
+						deps={[entity.id, column.propertyId, entity.properties[column.propertyId]]}
+					/>
+				),
+			)}
 		</div>
 	);
 }
diff --git a/apps/database/src/styles.css b/apps/database/src/styles.css
index 04e3538d..9ee78d46 100644
--- a/apps/database/src/styles.css
+++ b/apps/database/src/styles.css
@@ -1358,7 +1358,15 @@ body.is-resizing .db-inspector__resize {
 	border-color: color-mix(in srgb, var(--accent) 28%, transparent);
 }
 
+/* Each row child is pinned to its own grid column. Without the explicit
+ * `grid-column`s, an iconless entity's `:empty → display:none` glyph drops OUT
+ * of the grid flow and auto-placement shifts everything one track left: the
+ * title lands in the `auto` track (which can't shrink below the full nowrap
+ * string), the props strip lands in `1fr` (which collapses to ~0), and the
+ * right-packed chips overflow leftward ON TOP of the title — the "chips paint
+ * over the row title" bug on every iconless row. */
 .dbv-list__glyph {
+	grid-column: 1;
 	width: 22px;
 	height: 22px;
 	border-radius: var(--radius-sm);
@@ -1374,6 +1382,7 @@ body.is-resizing .db-inspector__resize {
 }
 
 .dbv-list__title {
+	grid-column: 2;
 	font-weight: var(--text-weight-medium);
 	overflow: hidden;
 	text-overflow: ellipsis;
@@ -1381,6 +1390,7 @@ body.is-resizing .db-inspector__resize {
 }
 
 .dbv-list__props {
+	grid-column: 3;
 	display: flex;
 	align-items: center;
 	gap: var(--space-3);
@@ -1404,6 +1414,15 @@ body.is-resizing .db-inspector__resize {
 	max-width: min(28ch, 22vw);
 }
 
+/* The SDK date/link cells carry `width: 100%` for their panel/grid hosts; in
+ * this content-sized flex strip that inflates every one of them to the full
+ * 28ch cap (a 212px button for an 11-char date — and for an EMPTY value),
+ * which reads as misaligned phantom columns. Size them to their content here. */
+.dbv-list__props .bs-cell-date-trigger,
+.dbv-list__props .bs-cell-link-trigger {
+	width: auto;
+}
+
 .dbv-list__props .dbv-value {
 	color: var(--text-dim);
 	overflow: hidden;