From 07a3aae1dc308354385212aa8cad7fa2b05375f3 Mon Sep 17 00:00:00 2001
From: Bersabel Tadesse <brsabel.t@gmail.com>
Date: Thu, 6 Aug 2026 19:18:18 -0700
Subject: [PATCH] Expand detail descriptions to content width

---
 apps/app/src/components/tools/PluginDetail.tsx        |  4 ++--
 .../src/components/tools/detail-page-recipes.test.tsx | 11 ++++++++---
 apps/app/src/views/ToolsView.plugin-detail.test.tsx   | 11 ++++++++---
 3 files changed, 18 insertions(+), 8 deletions(-)

diff --git a/apps/app/src/components/tools/PluginDetail.tsx b/apps/app/src/components/tools/PluginDetail.tsx
index d57251e6a3..b108004bdb 100644
--- a/apps/app/src/components/tools/PluginDetail.tsx
+++ b/apps/app/src/components/tools/PluginDetail.tsx
@@ -150,7 +150,7 @@ export function CatalogPluginDetail({
     >
       <ResourceDetailStack>
         <ResourceDetailOverviewSection label="About">
-          <p className="max-w-prose text-sm leading-relaxed text-muted-foreground">
+          <p className="max-w-none text-sm leading-relaxed text-muted-foreground">
             {entry.description.length > 0
               ? entry.description
               : "This plugin does not describe itself."}
@@ -388,7 +388,7 @@ export function PluginDetail({
     >
       <ResourceDetailStack>
         <ResourceDetailOverviewSection label="About">
-          <p className="max-w-prose text-sm leading-relaxed text-muted-foreground">
+          <p className="max-w-none text-sm leading-relaxed text-muted-foreground">
             {plugin.description ?? "This plugin does not describe itself."}
           </p>
         </ResourceDetailOverviewSection>
diff --git a/apps/app/src/components/tools/detail-page-recipes.test.tsx b/apps/app/src/components/tools/detail-page-recipes.test.tsx
index 2b37a2741f..139e47f2e1 100644
--- a/apps/app/src/components/tools/detail-page-recipes.test.tsx
+++ b/apps/app/src/components/tools/detail-page-recipes.test.tsx
@@ -190,9 +190,14 @@ describe("Plugin detail recipe", () => {
     expect(renderedRecipe(container).map(([kind]) => kind)).toContain(
       "overview",
     );
-    expect(
-      screen.getByText("This plugin does not describe itself."),
-    ).toBeTruthy();
+    const description = screen.getByText(
+      "This plugin does not describe itself.",
+    );
+    expect(description.className).not.toContain("max-w-prose");
+    expect(description.className).toContain("max-w-none");
+    expect(description.className).toContain("text-sm");
+    expect(description.className).toContain("leading-relaxed");
+    expect(description.className).toContain("text-muted-foreground");
   });
 
   it("lists declared capabilities without category chrome", () => {
diff --git a/apps/app/src/views/ToolsView.plugin-detail.test.tsx b/apps/app/src/views/ToolsView.plugin-detail.test.tsx
index 03ee1ba9a9..2693e2b552 100644
--- a/apps/app/src/views/ToolsView.plugin-detail.test.tsx
+++ b/apps/app/src/views/ToolsView.plugin-detail.test.tsx
@@ -124,9 +124,14 @@ describe("PluginDetail official catalog lifecycle", () => {
     expect(screen.getByRole("heading", { name: "GitHub" })).toBeTruthy();
     expect(screen.getByText("BB Official")).toBeTruthy();
     expect(screen.getByText("Developer tools")).toBeTruthy();
-    expect(
-      screen.getByText("Browse GitHub issues and pull requests in BB."),
-    ).toBeTruthy();
+    const description = screen.getByText(
+      "Browse GitHub issues and pull requests in BB.",
+    );
+    expect(description.className).not.toContain("max-w-prose");
+    expect(description.className).toContain("max-w-none");
+    expect(description.className).toContain("text-sm");
+    expect(description.className).toContain("leading-relaxed");
+    expect(description.className).toContain("text-muted-foreground");
     expect(screen.queryByText("Capabilities")).toBeNull();
     expect(container.querySelector('[data-icon="Github"]')).not.toBeNull();