fix(showcase/langgraph-python): widen declarative-gen-ui surface and polish InfoRow

The chat shell caps its scroll column at cpk:max-w-3xl (~768px), which
left A2UI-generated cards (KPI dashboards, charts, status reports)
feeling pinched on the declarative-gen-ui demo. Locally widen that
wrapper to 64rem via a scoped attribute selector on the demo and bump
the outer page wrapper from max-w-4xl to max-w-6xl so the card column
actually has room to grow.

While here, fix the InfoRow trailing-separator artifact: each row now
draws its own border-bottom with last:border-b-0 so the final row in a
Card (e.g. the Status Report demo) no longer leaves a dangling line,
regardless of whether the agent wraps the rows in a Column or drops
them directly into the Card child slot. Right-align the value with
tabular-nums for cleaner stacks. Card itself gains w-full
overflow-hidden so it stretches into the now-wider column instead of
sitting at its min-width.

Author: AlemTuzlak

showcase/integrations/langgraph-python/src/app/demos/declarative-gen-ui/a2ui/renderers.tsx

@@ -35,7 +35,6 @@ import {
 } from "../_components/card";
 import { Badge } from "../_components/badge";
 import { Button } from "../_components/button";
-import { Separator } from "../_components/separator";
 
 // ─── ShadCN-friendly chart palette ─────────────────────────────────────────
 // Neutral, slightly muted hues that pair with `bg-card` / `--border`
@@ -163,7 +162,10 @@ function AnimatedBar(props: any) {
 // @region[renderers-react]
 export const myRenderers: CatalogRenderers<MyDefinitions> = {
   Card: ({ props, children }) => (
-    <Card className="min-w-[260px]" data-testid="declarative-card">
+    <Card
+      className="w-full min-w-[260px] overflow-hidden"
+      data-testid="declarative-card"
+    >
       <CardHeader>
         <CardTitle>{props.title}</CardTitle>
         {props.subtitle && <CardDescription>{props.subtitle}</CardDescription>}
@@ -210,16 +212,16 @@ export const myRenderers: CatalogRenderers<MyDefinitions> = {
   },
 
   InfoRow: ({ props }) => (
-    <div className="flex flex-col gap-1.5">
-      <div className="flex items-baseline justify-between gap-4 py-1">
-        <span className="text-sm text-[var(--muted-foreground)]">
-          {props.label}
-        </span>
-        <span className="text-sm font-medium text-[var(--foreground)]">
-          {props.value}
-        </span>
-      </div>
-      <Separator />
+    // Divider via `border-b last:border-b-0` so the final row doesn't dangle
+    // a trailing line, regardless of whether the agent wraps these in a
+    // Column or drops them directly into a Card's child slot.
+    <div className="flex items-baseline justify-between gap-4 py-2 border-b border-[var(--border)] last:border-b-0 last:pb-0 first:pt-0">
+      <span className="text-sm text-[var(--muted-foreground)]">
+        {props.label}
+      </span>
+      <span className="text-sm font-medium text-[var(--foreground)] text-right tabular-nums">
+        {props.value}
+      </span>
     </div>
   ),
 

showcase/integrations/langgraph-python/src/app/demos/declarative-gen-ui/page.tsx

@@ -37,10 +37,22 @@ export default function DeclarativeGenUIDemo() {
       agent="declarative-gen-ui"
       a2ui={{ catalog: myCatalog }}
     >
-      <div className="flex justify-center items-center h-screen w-full">
-        <div className="h-full w-full max-w-4xl">
+      <div className="declarative-gen-ui-wide flex justify-center items-center h-screen w-full">
+        <div className="h-full w-full max-w-6xl">
           <Chat />
         </div>
+        {/*
+          The chat surface caps its internal scroll column and input row at
+          `cpk:max-w-3xl` (~768px). For this demo we want the generated A2UI
+          cards (KPI dashboards, charts, status reports) to breathe wider, so
+          we widen those wrappers locally to ~64rem. Attribute selector avoids
+          escaping the `:` in the Tailwind class name.
+        */}
+        <style>{`
+          .declarative-gen-ui-wide [class~="cpk:max-w-3xl"] {
+            max-width: 64rem;
+          }
+        `}</style>
       </div>
     </CopilotKit>
     // @endregion[provider-a2ui-prop]