From f55d91a09d0366742dbcce0269ba86d44a77f941 Mon Sep 17 00:00:00 2001
From: Josh Knapp <jknapp85@gmail.com>
Date: Sun, 27 Sep 2026 15:56:25 -0700
Subject: [PATCH] Marketplace: let the kind filter wrap inside the item column

All + the five kinds were wider than the fixed-width item column, so
Plugins was cut off behind a horizontal scrollbar.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 app/src/components/marketplace/BrowsePane.test.tsx | 6 ++++++
 app/src/components/marketplace/BrowsePane.tsx      | 1 +
 2 files changed, 7 insertions(+)

diff --git a/app/src/components/marketplace/BrowsePane.test.tsx b/app/src/components/marketplace/BrowsePane.test.tsx
index 1287166..05ce73a 100644
--- a/app/src/components/marketplace/BrowsePane.test.tsx
+++ b/app/src/components/marketplace/BrowsePane.test.tsx
@@ -94,6 +94,12 @@ describe("BrowsePane", () => {
     expect(screen.getByText(`install controls at ${"a".repeat(40)}`)).toBeInTheDocument();
   });
 
+  it("lets the kind filter wrap instead of running out of its column", () => {
+    // All + five kinds are wider than the fixed-width item column.
+    render(<BrowsePane mp={api()} />);
+    expect(screen.getByRole("radiogroup", { name: "Item kind" })).toHaveClass("flex-wrap");
+  });
+
   it("shows why an item is invalid", () => {
     render(<BrowsePane mp={api()} />);
     fireEvent.click(screen.getByRole("button", { name: /broken/ }));
diff --git a/app/src/components/marketplace/BrowsePane.tsx b/app/src/components/marketplace/BrowsePane.tsx
index 9d76f80..3c92c9f 100644
--- a/app/src/components/marketplace/BrowsePane.tsx
+++ b/app/src/components/marketplace/BrowsePane.tsx
@@ -169,6 +169,7 @@ export default function BrowsePane({ mp }: { mp: MarketplaceApi }) {
       <section className="w-80 flex-shrink-0 border-r border-[var(--border-color)] p-3 space-y-2 overflow-auto">
         <SegmentedControl<KindFilter>
           label="Item kind"
+          className="flex-wrap"
           value={kind}
           onChange={setKind}
           segments={[