From 3b8567a05d4c40e667d061666feb7aa7bc38212d Mon Sep 17 00:00:00 2001
From: thomaspblock <thomasp@squareup.com>
Date: Thu, 30 Jul 2026 15:04:03 +0200
Subject: [PATCH] fix(desktop): remove Projects overview card fills (#3416)

## Summary

The Projects overview now lets the page surface flow through its metrics
and activity cards instead of stacking filled panels. Borders and hover
feedback remain, preserving grouping and interaction cues without the
heavy nested background.

### Related issue

None found.

### Testing

- `pnpm exec biome check
src/features/projects/ui/ProjectsOverviewPanel.tsx
src/features/projects/ui/ProjectsActivityFeed.tsx
tests/e2e/project-pr-review.spec.ts`
- `pnpm build:e2e`
- Focused Playwright smoke test: `project overview does not paint a
background behind its cards` (passed)
- Relevant desktop pre-push checks passed; the unrelated integration
gate was blocked by a stale local checksum for migration 25

Signed-off-by: Thomas Petersen <thomasp@squareup.com>
---
 .../projects/ui/ProjectsActivityFeed.tsx      |  3 +-
 .../projects/ui/ProjectsOverviewPanel.tsx     |  5 +--
 desktop/tests/e2e/project-pr-review.spec.ts   | 35 +++++++++++++++++++
 3 files changed, 40 insertions(+), 3 deletions(-)

diff --git a/desktop/src/features/projects/ui/ProjectsActivityFeed.tsx b/desktop/src/features/projects/ui/ProjectsActivityFeed.tsx
index ba0c15b1c..011b50a73 100644
--- a/desktop/src/features/projects/ui/ProjectsActivityFeed.tsx
+++ b/desktop/src/features/projects/ui/ProjectsActivityFeed.tsx
@@ -257,9 +257,10 @@ function ActivityCard({
   return (
     <div
       className={cn(
-        "relative block w-full rounded-xl border border-border/60 bg-card text-left transition-colors hover:bg-muted/20",
+        "relative block w-full rounded-xl border border-border/60 bg-transparent text-left transition-colors hover:bg-muted/20",
         compact ? "p-3" : "p-4",
       )}
+      data-testid="projects-activity-card"
     >
       <button
         aria-label={`Open ${item.title} in ${item.target.project.name}`}
diff --git a/desktop/src/features/projects/ui/ProjectsOverviewPanel.tsx b/desktop/src/features/projects/ui/ProjectsOverviewPanel.tsx
index 3640af904..b11e7d123 100644
--- a/desktop/src/features/projects/ui/ProjectsOverviewPanel.tsx
+++ b/desktop/src/features/projects/ui/ProjectsOverviewPanel.tsx
@@ -50,7 +50,8 @@ function StatPill({
 }) {
   return (
     <button
-      className="flex flex-col rounded-lg border border-border/60 bg-card px-3.5 py-3 text-left transition-colors hover:bg-muted/30"
+      className="flex flex-col rounded-lg border border-border/60 bg-transparent px-3.5 py-3 text-left transition-colors hover:bg-muted/30"
+      data-testid="projects-overview-stat"
       onClick={onClick}
       type="button"
     >
@@ -78,7 +79,7 @@ export function ProjectsOverviewPanel({
   const stats = overviewStats(projects, summaries);
 
   return (
-    <section className="-mx-4 mb-4 bg-card">
+    <section className="-mx-4 mb-4" data-testid="projects-overview-panel">
       <div className="grid xl:grid-cols-[minmax(0,1fr)_18rem] 2xl:grid-cols-[minmax(0,1fr)_24rem]">
         <div className="order-1 grid grid-cols-2 gap-2 p-4 pt-0 sm:gap-3 xl:order-none xl:col-start-1 xl:row-start-1 xl:grid-cols-4">
           <StatPill
diff --git a/desktop/tests/e2e/project-pr-review.spec.ts b/desktop/tests/e2e/project-pr-review.spec.ts
index 9e7484664..8113947b4 100644
--- a/desktop/tests/e2e/project-pr-review.spec.ts
+++ b/desktop/tests/e2e/project-pr-review.spec.ts
@@ -910,6 +910,41 @@ test("project overview reports aggregate work-item failures", async ({
   );
 });
 
+test("project overview does not paint a background behind its cards", async ({
+  page,
+}) => {
+  await enableProjectsFeature(page);
+  await installMockBridge(page);
+  await page.goto("/", { waitUntil: "domcontentloaded" });
+  await page.getByTestId("open-projects-view").click();
+
+  await expect(page.getByTestId("projects-overview-panel")).toHaveCSS(
+    "background-color",
+    "rgba(0, 0, 0, 0)",
+  );
+
+  const stats = page.getByTestId("projects-overview-stat");
+  await expect(stats).toHaveCount(4);
+  for (let index = 0; index < 4; index += 1) {
+    await expect(stats.nth(index)).toHaveCSS(
+      "background-color",
+      "rgba(0, 0, 0, 0)",
+    );
+    await expect(stats.nth(index)).toHaveCSS("border-style", "solid");
+  }
+
+  const activityCards = page.getByTestId("projects-activity-card");
+  await expect(activityCards.first()).toBeVisible();
+  const activityCardCount = await activityCards.count();
+  for (let index = 0; index < activityCardCount; index += 1) {
+    await expect(activityCards.nth(index)).toHaveCSS(
+      "background-color",
+      "rgba(0, 0, 0, 0)",
+    );
+    await expect(activityCards.nth(index)).toHaveCSS("border-style", "solid");
+  }
+});
+
 test("project without a checkout offers fetch feedback and dropdown cloning", async ({
   page,
 }) => {