From 05ba8a2cfd3ca2e4da407dde9577f37daab7d5b6 Mon Sep 17 00:00:00 2001
From: John Corser <xss@amazon.com>
Date: Mon, 3 Aug 2026 00:13:12 -0400
Subject: [PATCH] design(search): render results as a dense ruled list, not
 floating cards

---
 src/features/search/search.css | 40 +++++++++++++++++++++++++++-------
 1 file changed, 32 insertions(+), 8 deletions(-)

diff --git a/src/features/search/search.css b/src/features/search/search.css
index d2fb155..9ae47da 100644
--- a/src/features/search/search.css
+++ b/src/features/search/search.css
@@ -56,30 +56,54 @@
   padding: 0;
   display: flex;
   flex-direction: column;
-  gap: 8px;
+  /* Zero the inter-row gap so each row's hairline divider butts into the next
+     into one continuous ruled list (mirrors My Tasks #220 / Calendar #221 / the
+     List view #109). */
+  gap: 0;
 }
 
 .search__hit {
+  /* A search result reads as a dense ruled LIST row (Asana-style), not a floating
+     card: title on the left + meta (project chip / due / avatar) at the trailing
+     edge on one line, a hairline divider + hover highlight instead of the board
+     card's border/shadow/radius. Keeps results scannable — more per screen, no
+     empty right region. */
   width: 100%;
   display: flex;
-  flex-direction: column;
-  gap: 6px;
+  flex-direction: row;
+  align-items: center;
+  gap: 10px;
   text-align: left;
-  background: var(--tf-surface);
-  border: 1px solid var(--tf-border);
-  border-radius: var(--tf-radius-sm);
-  box-shadow: var(--tf-shadow);
-  padding: 14px;
+  background: transparent;
+  border: none;
+  border-bottom: 1px solid var(--tf-border);
+  padding: 8px 6px;
   font-size: 0.95rem;
   font-weight: 500;
   color: var(--tf-text);
   cursor: pointer;
+  transition: background 0.1s ease;
+}
+
+.search__hit:hover {
+  background: var(--tf-surface-2);
+}
+
+/* Title takes the row; the meta cluster sits at the trailing edge. */
+.search__hit-title {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .search__hit-meta {
+  flex: none;
   display: flex;
   flex-wrap: wrap;
   align-items: center;
+  justify-content: flex-end;
   gap: 8px;
 }