Triple-C marketplace: agents, skills, commands, hooks and plugins for all or individual containers (#65)

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/ }));

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={[