From 3c84b474837f2e1c0f27d63debf7280779058b59 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=A8=8B=E5=BA=8F=E5=91=98=E9=98=BF=E6=B1=9F-Relakkes?=
 <relakkes@gmail.com>
Date: Sun, 4 Oct 2026 01:52:05 +0800
Subject: [PATCH] fix(market): keep the skills market home on one page surface
 (#1434)

The catalog redesign put the title, disclaimer, categories and search on
a white band ruled off from a tinted canvas holding the cards. The
extensions frame, the plugins tab and the skill detail all sit on the
plain page surface, so the seam read as two pages glued together and the
canvas flashed on every home/detail switch.

Lay the controls and the grid in one column on --color-surface and
separate them by spacing; the cards keep their own border and shadow.
---
 .../src/components/market/MarketHome.test.tsx | 23 +++++++++++++++++++
 desktop/src/components/market/MarketHome.tsx  | 16 ++++++-------
 2 files changed, 30 insertions(+), 9 deletions(-)

diff --git a/desktop/src/components/market/MarketHome.test.tsx b/desktop/src/components/market/MarketHome.test.tsx
index 83862bcb..db4d0189 100644
--- a/desktop/src/components/market/MarketHome.test.tsx
+++ b/desktop/src/components/market/MarketHome.test.tsx
@@ -278,6 +278,29 @@ describe('MarketHome infinite scroll', () => {
   })
 })
 
+it('lays the controls and the cards on one page surface instead of a band over a tinted canvas', () => {
+  // The catalog redesign put the title, disclaimer, chips and search on a white
+  // band ruled off from a tinted canvas holding the cards. The extensions frame,
+  // the plugins tab and the skill detail are all the plain page surface, so the
+  // seam read as two pages glued together and the canvas flashed on every
+  // home ↔ detail switch.
+  render(<MarketHome onRequestInstall={vi.fn()} />)
+  const scroll = screen.getByTestId('market-scroll')
+  expect(scroll.className).toContain('bg-[var(--color-surface)]')
+
+  const anchors = [
+    screen.getByRole('heading', { name: 'Skills Market' }),
+    screen.getByTestId('market-result-summary'),
+    screen.getByTestId('market-grid'),
+  ]
+  for (const anchor of anchors) {
+    for (let node = anchor.parentElement; node && node !== scroll; node = node.parentElement) {
+      expect(node.className).not.toMatch(/\bbg-\[/)
+      expect(node.className).not.toMatch(/\bborder-b\b/)
+    }
+  }
+})
+
 it('keeps featured skill packages inside the existing scroll surface alongside search and installed skills', () => {
   render(<MarketHome onRequestInstall={vi.fn()} featured={<div data-testid="curated-skill-packages" />} />)
   expect(screen.getByTestId('market-scroll')).toContainElement(screen.getByTestId('curated-skill-packages'))
diff --git a/desktop/src/components/market/MarketHome.tsx b/desktop/src/components/market/MarketHome.tsx
index 3e9c8932..bf9d7456 100644
--- a/desktop/src/components/market/MarketHome.tsx
+++ b/desktop/src/components/market/MarketHome.tsx
@@ -143,13 +143,13 @@ export function MarketHome({ onRequestInstall, featured }: { onRequestInstall: (
     <div
       ref={scrollRef}
       data-testid="market-scroll"
-      className="flex min-h-0 flex-1 flex-col overflow-y-auto bg-[var(--color-surface-container-low)]"
+      className="flex min-h-0 flex-1 flex-col overflow-y-auto bg-[var(--color-surface)]"
     >
-      {/* The top band holds everything that decides *what* is listed — title,
-          disclaimer, categories, search and filters — on the page surface; the
-          cards sit on the tinted canvas below it. */}
-      <div className="flex-shrink-0 border-b border-[var(--color-border)] bg-[var(--color-surface)]">
-        <div className="mx-auto flex w-full max-w-[1280px] flex-col gap-4 px-6 pb-5 pt-6 lg:px-10">
+      {/* One page surface from the title to the last card, like the plugins tab
+          and the skill detail. The controls and the cards are told apart by
+          spacing and the cards' own border, not by a band of a second color. */}
+      <div className="mx-auto flex w-full max-w-[1280px] flex-1 flex-col px-6 pb-10 pt-6 lg:px-10">
+        <div className="flex flex-col gap-4">
           <header className="flex flex-wrap items-start gap-x-3.5 gap-y-3">
             <span className="flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-[var(--radius-lg)] bg-[var(--color-btn-primary-bg)] text-[var(--color-btn-primary-fg)]">
               <Store className="h-[22px] w-[22px]" strokeWidth={1.6} aria-hidden="true" />
@@ -234,10 +234,8 @@ export function MarketHome({ onRequestInstall, featured }: { onRequestInstall: (
             <FilterBar />
           </div>
         </div>
-      </div>
 
-      <div className="mx-auto flex w-full max-w-[1280px] flex-1 flex-col px-6 pb-10 pt-5 lg:px-10">
-        <div className="flex min-h-8 flex-wrap items-center justify-between gap-x-3 gap-y-2">
+        <div className="mt-7 flex min-h-8 flex-wrap items-center justify-between gap-x-3 gap-y-2">
           <p
             data-testid="market-result-summary"
             aria-live="polite"