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();
+ expect(screen.getByRole("radiogroup", { name: "Item kind" })).toHaveClass("flex-wrap");
+ });
+
it("shows why an item is invalid", () => {
render();
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 }) {
label="Item kind"
+ className="flex-wrap"
value={kind}
onChange={setKind}
segments={[