Update

src/App.tsx

@@ -1,6 +1,7 @@
 import { useCallback, useEffect, useRef, useState } from "react";
 import type { ChatResponse } from "./api/chat";
 import { chatApi } from "./api/chat";
+import type { PrRow } from "./api/form";
 import type { ThreadItem } from "./types";
 import { AnalysisCard } from "./components/AnalysisCard";
 import { DisambiguationCard } from "./components/DisambiguationCard";
@@ -8,6 +9,7 @@ import { Header } from "./components/Header";
 import { LandingHero } from "./components/LandingHero";
 import { LoadingCard } from "./components/LoadingCard";
 import { MainChatComposer } from "./components/MainChatComposer";
+import { PrLineItemsTable } from "./components/PrLineItemsTable";
 import { ProcurementFormBlock } from "./components/ProcurementFormBlock";
 import { SuggestionCards } from "./components/SuggestionCards";
 import { UserBubble } from "./components/UserBubble";
@@ -83,7 +85,11 @@ export default function App() {
   const [editingUserId, setEditingUserId] = useState<string | null>(null);
   const [editDraft, setEditDraft] = useState("");
   const [busy, setBusy] = useState(false);
+  const [accumulatedPrRows, setAccumulatedPrRows] = useState<PrRow[]>([]);
+  const [showFollowUpComposer, setShowFollowUpComposer] = useState(false);
+  const [followUpDraft, setFollowUpDraft] = useState("");
   const scrollRef = useRef<HTMLDivElement>(null);
+  const followUpRef = useRef<HTMLDivElement>(null);
 
   const scrollToBottom = useCallback(() => {
     requestAnimationFrame(() => {
@@ -95,16 +101,34 @@ export default function App() {
 
   useEffect(() => {
     scrollToBottom();
-  }, [thread.length, busy, scrollToBottom]);
+  }, [thread.length, busy, accumulatedPrRows.length, scrollToBottom]);
 
-  const beginEdit = useCallback((id: string, currentText: string) => {
-    setEditingUserId(id);
-    setEditDraft(currentText);
+  useEffect(() => {
+    if (!showFollowUpComposer) return;
+    const id = window.setTimeout(() => {
+      followUpRef.current?.scrollIntoView({
+        behavior: "smooth",
+        block: "nearest",
+      });
+    }, 120);
+    return () => window.clearTimeout(id);
+  }, [showFollowUpComposer]);
+
+  const mergePrRows = useCallback((batch: PrRow[]) => {
+    setAccumulatedPrRows((prev) => {
+      const base = prev.length
+        ? Math.max(...prev.map((r) => r.pr_line_item))
+        : 0;
+      const next = batch.map((r, i) => ({
+        ...r,
+        pr_line_item: base + 10 * (i + 1),
+      }));
+      return [...prev, ...next];
+    });
   }, []);
 
-  const cancelEdit = useCallback(() => {
-    setEditingUserId(null);
-    setEditDraft("");
+  const openAddLineComposer = useCallback(() => {
+    setShowFollowUpComposer(true);
   }, []);
 
   const appendAssistant = useCallback(async (messageText: string, pick?: number | null) => {
@@ -138,6 +162,26 @@ export default function App() {
     }
   }, []);
 
+  const sendFollowUp = useCallback(async () => {
+    const text = followUpDraft.trim();
+    if (!text || busy) return;
+    setFollowUpDraft("");
+    setShowFollowUpComposer(false);
+    const user: ThreadItem = { id: uid(), type: "user", text };
+    setThread((prev) => [...prev, user]);
+    await appendAssistant(text, null);
+  }, [followUpDraft, busy, appendAssistant]);
+
+  const beginEdit = useCallback((id: string, currentText: string) => {
+    setEditingUserId(id);
+    setEditDraft(currentText);
+  }, []);
+
+  const cancelEdit = useCallback(() => {
+    setEditingUserId(null);
+    setEditDraft("");
+  }, []);
+
   const send = useCallback(async () => {
     const text = draft.trim();
     if (!text || busy) return;
@@ -182,7 +226,7 @@ export default function App() {
       >
         <div
           ref={scrollRef}
-          className={`flex-1 overflow-y-auto min-h-0 w-full max-w-4xl mx-auto px-gutter ${
+          className={`flex-1 overflow-y-auto min-h-0 w-full max-w-6xl mx-auto px-gutter ${
             showLanding ? "flex flex-col" : "pb-8 pt-2"
           }`}
         >
@@ -237,10 +281,31 @@ export default function App() {
                     intro={item.intro}
                     catalogPath={item.catalogPath}
                     codeSummary={item.codeSummary}
+                    onCommitPrLines={mergePrRows}
+                    onAddNew={openAddLineComposer}
                   />
                 );
               })}
               {busy ? <LoadingCard /> : null}
+              {accumulatedPrRows.length > 0 ? (
+                <PrLineItemsTable rows={accumulatedPrRows} />
+              ) : null}
+              {showFollowUpComposer ? (
+                <div
+                  ref={followUpRef}
+                  className="mt-2 rounded-2xl border border-outline-variant bg-surface-container-low p-4 shadow-sm"
+                >
+                  <p className="mb-3 font-body-sm text-secondary">
+                    Add another catalogue line to this same purchase request.
+                    Your chat continues below—this is not a new request.
+                  </p>
+                  <MainChatComposer
+                    value={followUpDraft}
+                    onChange={setFollowUpDraft}
+                    onSend={sendFollowUp}
+                  />
+                </div>
+              ) : null}
               <p className="pb-4 text-center font-body-sm text-xs text-secondary/60">
                 ProcureMind AI can make mistakes. Check important procurement
                 details before approval.

src/components/Header.tsx

@@ -2,7 +2,8 @@ import { Icon } from "./Icon";
 
 export function Header() {
   return (
-    <header className="h-16 px-gutter border-b border-outline-variant flex items-center justify-between bg-surface z-50 shrink-0">
+    <header className="h-16 border-b border-outline-variant bg-surface z-50 shrink-0">
+      <div className="mx-auto flex h-full w-full max-w-6xl items-center justify-between px-gutter">
       <div className="flex items-center gap-8">
         <div className="flex flex-col">
           <h1 className="font-headline-md text-xl font-bold text-primary leading-tight">
@@ -81,6 +82,7 @@ export function Header() {
           </div>
         </div>
       </div>
+      </div>
     </header>
   );
 }

src/components/MainChatComposer.tsx

@@ -24,7 +24,7 @@ export function MainChatComposer({
 
   return (
     <div
-      className={`w-full max-w-3xl mx-auto ${compact ? "" : "px-1"}`}
+      className={`w-full max-w-5xl mx-auto ${compact ? "" : "px-1"}`}
     >
       <div className="relative rounded-2xl border border-outline-variant bg-white p-2 shadow-md transition-all focus-within:border-primary focus-within:ring-2 focus-within:ring-primary/10">
         <textarea

src/components/PrLineItemsTable.tsx

@@ -8,47 +8,71 @@ export function PrLineItemsTable({ rows }: Props) {
   if (!rows.length) return null;
 
   return (
-    <div className="mt-6 overflow-x-auto rounded-xl border border-outline-variant bg-white shadow-sm">
-      <div className="border-b border-outline-variant bg-[#fff9c4]/90 px-4 py-2 font-label-caps text-[10px] font-bold uppercase tracking-wide text-primary">
+    <div className="mt-6 w-full overflow-hidden rounded-xl border border-outline-variant bg-white shadow-sm">
+      <div className="border-b border-outline-variant bg-surface-container-high px-4 py-2.5 font-label-caps text-[10px] font-bold uppercase tracking-wide text-secondary">
         CLEAN PR — line items
       </div>
-      <table className="w-full min-w-[720px] text-left text-body-sm font-body-sm">
-        <thead>
-          <tr className="border-b border-outline-variant bg-[#fff9c4]/70">
-            <th className="px-3 py-2 font-semibold text-primary">PR Line Item</th>
-            <th className="px-3 py-2 font-semibold text-primary">MAT GRP</th>
-            <th className="px-3 py-2 font-semibold text-primary">PR SHORT TEXT</th>
-            <th className="px-3 py-2 font-semibold text-primary">PR LONG TEXT</th>
-            <th className="px-3 py-2 font-semibold text-primary">PR Quantity</th>
-            <th className="px-3 py-2 font-semibold text-primary">Delivery Date</th>
-          </tr>
-        </thead>
-        <tbody>
-          {rows.map((r) => (
-            <tr
-              key={r.pr_line_item}
-              className="border-b border-outline-variant/80 align-top last:border-0"
-            >
-              <td className="px-3 py-2 font-data-mono text-data-mono whitespace-nowrap">
-                {r.pr_line_item}
-              </td>
-              <td className="px-3 py-2 font-data-mono text-data-mono whitespace-nowrap">
-                {r.mat_grp}
-              </td>
-              <td className="px-3 py-2 text-on-background break-words max-w-[220px]">
-                {r.pr_short_text}
-              </td>
-              <td className="px-3 py-2 text-on-background break-words max-w-[280px]">
-                {r.pr_long_text}
-              </td>
-              <td className="px-3 py-2 whitespace-nowrap">{r.pr_quantity}</td>
-              <td className="px-3 py-2 whitespace-nowrap text-secondary">
-                {r.delivery_date}
-              </td>
+      <div className="overflow-x-auto">
+        <table className="w-full min-w-[960px] table-fixed border-collapse text-left text-body-sm font-body-sm">
+          <colgroup>
+            <col className="w-[8%]" />
+            <col className="w-[10%]" />
+            <col className="w-[22%]" />
+            <col className="w-[30%]" />
+            <col className="w-[8%]" />
+            <col className="w-[12%]" />
+          </colgroup>
+          <thead>
+            <tr className="border-b border-outline-variant bg-surface-container-low">
+              <th className="px-3 py-2.5 align-bottom font-semibold text-primary">
+                PR Line Item
+              </th>
+              <th className="px-3 py-2.5 align-bottom font-semibold text-primary">
+                MAT GRP
+              </th>
+              <th className="px-3 py-2.5 align-bottom font-semibold text-primary">
+                PR SHORT TEXT
+              </th>
+              <th className="px-3 py-2.5 align-bottom font-semibold text-primary">
+                PR LONG TEXT
+              </th>
+              <th className="px-3 py-2.5 align-bottom font-semibold text-primary text-center">
+                PR Quantity
+              </th>
+              <th className="px-3 py-2.5 align-bottom font-semibold text-primary">
+                Delivery Date
+              </th>
             </tr>
-          ))}
-        </tbody>
-      </table>
+          </thead>
+          <tbody>
+            {rows.map((r, idx) => (
+              <tr
+                key={`${r.pr_line_item}-${idx}`}
+                className="border-b border-outline-variant/80 align-top last:border-0"
+              >
+                <td className="px-3 py-2.5 font-data-mono text-data-mono whitespace-nowrap">
+                  {r.pr_line_item}
+                </td>
+                <td className="px-3 py-2.5 font-data-mono text-data-mono whitespace-nowrap">
+                  {r.mat_grp}
+                </td>
+                <td className="min-w-0 px-3 py-2.5 break-words text-on-background">
+                  {r.pr_short_text}
+                </td>
+                <td className="min-w-0 px-3 py-2.5 break-words text-on-background">
+                  {r.pr_long_text}
+                </td>
+                <td className="px-3 py-2.5 text-center whitespace-nowrap tabular-nums">
+                  {r.pr_quantity}
+                </td>
+                <td className="min-w-0 px-3 py-2.5 whitespace-nowrap text-secondary">
+                  {r.delivery_date}
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
     </div>
   );
 }

src/components/ProcurementFormBlock.tsx

@@ -1,8 +1,7 @@
-import { useEffect, useState } from "react";
+import { useEffect, useState, type ReactNode } from "react";
 import type { DynamicField, PrRow } from "../api/form";
 import { buildPrLines, fetchFormSchema } from "../api/form";
 import { Icon } from "./Icon";
-import { PrLineItemsTable } from "./PrLineItemsTable";
 
 const FALLBACK_INTERVALS = [
   "Daily",
@@ -14,18 +13,47 @@ const FALLBACK_INTERVALS = [
   "Annual",
 ];
 
+/** Aligns label baselines for side-by-side fields; controls share one height. */
+const CTRL =
+  "h-11 w-full box-border rounded border border-outline-variant bg-surface-container-low px-2.5 text-body-sm";
+const LABEL_CLASS =
+  "min-h-[3rem] flex items-end text-[11px] font-bold text-secondary leading-snug";
+
 type Props = {
   commodityCode: number;
   intro: string;
   catalogPath?: string;
   codeSummary?: string;
+  onCommitPrLines: (rows: PrRow[]) => void;
+  onAddNew: () => void;
 };
 
+function FieldCell({
+  label,
+  children,
+  className = "col-span-12 md:col-span-6",
+}: {
+  label: string;
+  children: ReactNode;
+  className?: string;
+}) {
+  return (
+    <div
+      className={`flex flex-col gap-1.5 ${className}`}
+    >
+      <span className={LABEL_CLASS}>{label}</span>
+      {children}
+    </div>
+  );
+}
+
 export function ProcurementFormBlock({
   commodityCode,
   intro,
   catalogPath,
   codeSummary,
+  onCommitPrLines,
+  onAddNew,
 }: Props) {
   const [schemaLoading, setSchemaLoading] = useState(true);
   const [schemaError, setSchemaError] = useState<string | null>(null);
@@ -38,9 +66,9 @@ export function ProcurementFormBlock({
   const [otherSpec, setOtherSpec] = useState("");
   const [dynamicValues, setDynamicValues] = useState<Record<string, string>>({});
 
-  const [prRows, setPrRows] = useState<PrRow[] | null>(null);
   const [confirmBusy, setConfirmBusy] = useState(false);
   const [buildError, setBuildError] = useState<string | null>(null);
+  const [justAdded, setJustAdded] = useState(false);
 
   useEffect(() => {
     if (!intervalChoices.length) return;
@@ -80,15 +108,12 @@ export function ProcurementFormBlock({
 
   const renderDynamicField = (f: DynamicField) => {
     const v = dynamicValues[f.id] ?? "";
-    const labelCls =
-      "block text-[11px] font-bold text-secondary mb-1.5 leading-snug";
 
     if (f.type === "select" && f.options?.length) {
       return (
-        <div key={f.id} className="col-span-12 md:col-span-6">
-          <label className={labelCls}>{f.label}</label>
+        <FieldCell key={f.id} label={f.label}>
           <select
-            className="w-full p-2.5 bg-surface-container-low rounded border border-outline-variant text-body-sm font-semibold focus:ring-primary focus:border-primary"
+            className={`${CTRL} font-semibold focus:border-primary focus:ring-1 focus:ring-primary`}
             value={v}
             onChange={(e) => setDyn(f.id, e.target.value)}
           >
@@ -99,76 +124,77 @@ export function ProcurementFormBlock({
               </option>
             ))}
           </select>
-        </div>
+        </FieldCell>
       );
     }
 
     if (f.type === "chips" && f.options?.length) {
       return (
-        <div key={f.id} className="col-span-12">
-          <label className={labelCls}>{f.label}</label>
-          <div className="flex flex-wrap gap-2">
+        <FieldCell key={f.id} label={f.label} className="col-span-12">
+          <div className="flex min-h-11 flex-wrap items-center gap-2">
             {f.options.map((o) => (
               <button
                 key={o}
                 type="button"
                 onClick={() => setDyn(f.id, o)}
-                className={`px-3 py-1.5 rounded text-xs font-semibold transition-colors ${
+                className={`min-h-11 rounded px-3 py-2 text-xs font-semibold transition-colors ${
                   v === o
                     ? "bg-primary text-on-primary"
-                    : "bg-surface-container-low border border-outline-variant text-secondary hover:bg-surface-container-high"
+                    : "border border-outline-variant bg-surface-container-low text-secondary hover:bg-surface-container-high"
                 }`}
               >
                 {o}
               </button>
             ))}
           </div>
-        </div>
+        </FieldCell>
       );
     }
 
     if (f.type === "number") {
       return (
-        <div key={f.id} className="col-span-12 md:col-span-6">
-          <label className={labelCls}>{f.label}</label>
+        <FieldCell key={f.id} label={f.label}>
           <input
             type="number"
-            className="w-full p-2.5 bg-surface-container-low rounded border border-outline-variant text-body-sm font-bold"
+            className={`${CTRL} font-bold`}
             value={v}
             onChange={(e) => setDyn(f.id, e.target.value)}
           />
-        </div>
+        </FieldCell>
       );
     }
 
     if (f.type === "textarea") {
       return (
-        <div key={f.id} className="col-span-12">
-          <label className={labelCls}>{f.label}</label>
+        <FieldCell
+          key={f.id}
+          label={f.label}
+          className="col-span-12"
+        >
           <textarea
-            className="w-full p-2.5 bg-surface-container-low rounded border border-outline-variant text-body-sm font-semibold min-h-[72px]"
+            className="min-h-[5.5rem] w-full box-border rounded border border-outline-variant bg-surface-container-low p-2.5 text-body-sm font-semibold"
             value={v}
             onChange={(e) => setDyn(f.id, e.target.value)}
           />
-        </div>
+        </FieldCell>
       );
     }
 
     return (
-      <div key={f.id} className="col-span-12 md:col-span-6">
-        <label className={labelCls}>{f.label}</label>
+      <FieldCell key={f.id} label={f.label}>
         <input
           type="text"
-          className="w-full p-2.5 bg-surface-container-low rounded border border-outline-variant text-body-sm font-semibold"
+          className={`${CTRL} font-semibold`}
           value={v}
           onChange={(e) => setDyn(f.id, e.target.value)}
         />
-      </div>
+      </FieldCell>
     );
   };
 
   const onConfirm = async () => {
     setBuildError(null);
+    setJustAdded(false);
     setConfirmBusy(true);
     try {
       const nums: Record<string, string | number> = { ...dynamicValues };
@@ -186,9 +212,10 @@ export function ProcurementFormBlock({
         other_spec: otherSpec,
         year,
       });
-      setPrRows(rows);
+      onCommitPrLines(rows);
+      setJustAdded(true);
+      window.setTimeout(() => setJustAdded(false), 5000);
     } catch (e) {
-      setPrRows(null);
       setBuildError(e instanceof Error ? e.message : String(e));
     } finally {
       setConfirmBusy(false);
@@ -204,7 +231,7 @@ export function ProcurementFormBlock({
             className="text-on-secondary-container text-sm"
           />
         </div>
-        <div className="flex-1 max-w-[85%]">
+        <div className="min-w-0 flex-1">
           <div className="bg-surface-container-low p-6 rounded-2xl border border-outline-variant">
             <p className="font-body-md text-body-md text-primary mb-4">{intro}</p>
             {(catalogPath || codeSummary) && (
@@ -237,28 +264,22 @@ export function ProcurementFormBlock({
                   Line Item Details
                 </span>
               </div>
-              <div className="p-4 grid grid-cols-12 gap-y-4 gap-x-6">
-                <div className="col-span-12 md:col-span-4">
-                  <label className="block text-[11px] font-bold text-secondary mb-1.5">
-                    Number of deliveries
-                  </label>
+              <div className="grid grid-cols-12 gap-x-6 gap-y-5 p-4">
+                <FieldCell label="Number of deliveries" className="col-span-12 md:col-span-4">
                   <input
                     type="number"
                     min={1}
                     max={52}
-                    className="w-full p-2.5 bg-surface-container-low rounded border border-outline-variant text-body-sm font-bold"
+                    className={`${CTRL} font-bold`}
                     value={deliveries}
                     onChange={(e) =>
                       setDeliveries(Math.max(1, Number(e.target.value) || 1))
                     }
                   />
-                </div>
-                <div className="col-span-12 md:col-span-4">
-                  <label className="block text-[11px] font-bold text-secondary mb-1.5">
-                    Interval of deliveries
-                  </label>
+                </FieldCell>
+                <FieldCell label="Interval of deliveries" className="col-span-12 md:col-span-4">
                   <select
-                    className="w-full p-2.5 bg-surface-container-low rounded border border-outline-variant text-body-sm font-semibold focus:ring-primary focus:border-primary"
+                    className={`${CTRL} font-semibold focus:border-primary focus:ring-1 focus:ring-primary`}
                     value={interval}
                     onChange={(e) => setInterval(e.target.value)}
                   >
@@ -268,43 +289,40 @@ export function ProcurementFormBlock({
                       </option>
                     ))}
                   </select>
-                </div>
-                <div className="col-span-12 md:col-span-4">
-                  <label className="block text-[11px] font-bold text-secondary mb-1.5">
-                    Year (for delivery schedule)
-                  </label>
+                </FieldCell>
+                <FieldCell
+                  label="Year (for delivery schedule)"
+                  className="col-span-12 md:col-span-4"
+                >
                   <input
                     type="number"
-                    className="w-full p-2.5 bg-surface-container-low rounded border border-outline-variant text-body-sm font-bold"
+                    className={`${CTRL} font-bold`}
                     value={year}
                     onChange={(e) =>
                       setYear(Number(e.target.value) || new Date().getFullYear())
                     }
                   />
-                </div>
+                </FieldCell>
 
                 {fields.map((f) => renderDynamicField(f))}
 
-                <div className="col-span-12">
-                  <label className="block text-[11px] font-bold text-secondary mb-1.5">
-                    Other specification (free text)
-                  </label>
+                <FieldCell label="Other specification (free text)" className="col-span-12">
                   <textarea
-                    className="w-full p-2.5 bg-surface-container-low rounded border border-outline-variant text-body-sm font-semibold min-h-[72px]"
+                    className="min-h-[5.5rem] w-full box-border rounded border border-outline-variant bg-surface-container-low p-2.5 text-body-sm font-semibold"
                     placeholder="e.g. Age 18+"
                     value={otherSpec}
                     onChange={(e) => setOtherSpec(e.target.value)}
                   />
-                </div>
+                </FieldCell>
 
-                <div className="col-span-12 bg-[#10B981]/10 p-3 rounded-lg flex items-center justify-between border border-[#10B981]/20 mt-2">
+                <div className="col-span-12 flex flex-col gap-2 rounded-lg border border-[#10B981]/20 bg-[#10B981]/10 p-3 sm:flex-row sm:items-center sm:justify-between">
                   <div className="flex items-center gap-2">
                     <Icon name="check_circle" className="text-[#10B981]" />
                     <span className="text-body-sm font-semibold text-[#10B981]">
                       Budget Impact: Within Allocation
                     </span>
                   </div>
-                  <span className="text-xs text-[#10B981] font-bold">
+                  <span className="text-xs font-bold text-[#10B981]">
                     AVAILABLE
                   </span>
                 </div>
@@ -314,29 +332,33 @@ export function ProcurementFormBlock({
             {buildError ? (
               <p className="mb-3 text-body-sm text-error">{buildError}</p>
             ) : null}
+            {justAdded ? (
+              <p className="mb-3 text-body-sm font-semibold text-[#10B981]">
+                Line items added to the CLEAN PR table below.
+              </p>
+            ) : null}
 
-            <div className="pt-4 border-t border-outline-variant">
-              <div className="flex flex-col sm:flex-row gap-3">
+            <div className="border-t border-outline-variant pt-4">
+              <div className="flex flex-col gap-3 sm:flex-row">
                 <button
                   type="button"
                   disabled={confirmBusy || schemaLoading}
                   onClick={onConfirm}
-                  className="flex-1 bg-primary text-white px-6 py-3 rounded-xl text-body-sm font-bold flex items-center justify-center gap-2 hover:opacity-90 shadow-sm transition-all active:scale-95 disabled:opacity-50"
+                  className="flex flex-1 items-center justify-center gap-2 rounded-xl bg-primary px-6 py-3 text-body-sm font-bold text-white shadow-sm transition-all hover:opacity-90 active:scale-[0.98] disabled:opacity-50"
                 >
                   {confirmBusy ? "Building…" : "Confirm Selection"}
                   <Icon name="task_alt" className="text-sm" />
                 </button>
                 <button
                   type="button"
-                  className="flex-1 bg-white border border-outline-variant text-secondary px-6 py-3 rounded-xl text-body-sm font-semibold hover:bg-surface-container-high transition-colors flex items-center justify-center gap-2"
+                  onClick={onAddNew}
+                  className="flex flex-1 items-center justify-center gap-2 rounded-xl border border-outline-variant bg-white px-6 py-3 text-body-sm font-semibold text-secondary transition-colors hover:bg-surface-container-high"
                 >
-                  Search for Alternatives
-                  <Icon name="search" className="text-sm" />
+                  Add new
+                  <Icon name="add" className="text-sm" />
                 </button>
               </div>
             </div>
-
-            {prRows ? <PrLineItemsTable rows={prRows} /> : null}
           </div>
         </div>
       </div>

src/components/SuggestionCards.tsx

@@ -23,7 +23,7 @@ const CARDS = [
 
 export function SuggestionCards({ onPick }: Props) {
   return (
-    <div className="grid gap-4 sm:grid-cols-2 w-full max-w-3xl mx-auto px-1 pb-8">
+    <div className="grid gap-4 sm:grid-cols-2 w-full max-w-5xl mx-auto px-1 pb-8">
       {CARDS.map((c) => (
         <button
           key={c.title}