Update

src/App.tsx

@@ -340,7 +340,7 @@ export default function App() {
               </p>
             </div>
 
-            <aside className="flex min-h-0 min-w-0 flex-1 flex-col gap-4 overflow-y-auto bg-surface-container-low/60 px-gutter py-4 lg:py-6">
+            <aside className="flex min-h-0 min-w-0 flex-1 flex-col gap-2 overflow-hidden bg-surface-container-low/60 px-gutter py-3 lg:py-4">
               <RequestSummaryPanel
                 requestNumber={requestNumber}
                 requestedBy={requestedBy}
@@ -352,27 +352,29 @@ export default function App() {
                 onBudgetCodeChange={setBudgetCode}
                 onRequestedDateChange={setRequestedDate}
               />
-              {accumulatedPrRows.length > 0 ? (
-                <PrLineItemsTable rows={accumulatedPrRows} />
-              ) : (
-                <div className="rounded-xl border border-dashed border-outline-variant bg-white p-8 text-center font-body-sm text-secondary shadow-sm">
-                  No line items yet. Confirm selections in the chat to populate
-                  this table.
-                </div>
-              )}
-              <button
-                type="button"
-                disabled={accumulatedPrRows.length === 0}
-                onClick={handleSubmitRequest}
-                className="w-full shrink-0 rounded-xl bg-primary py-3.5 font-body-sm font-bold text-on-primary shadow-sm transition-opacity hover:opacity-90 disabled:cursor-not-allowed disabled:opacity-40"
-              >
-                Submit Request
-              </button>
-              {submitFeedback ? (
-                <p className="text-center font-body-sm text-primary">
-                  {submitFeedback}
-                </p>
-              ) : null}
+              <div className="flex min-h-0 flex-1 flex-col gap-2">
+                {accumulatedPrRows.length > 0 ? (
+                  <PrLineItemsTable rows={accumulatedPrRows} />
+                ) : (
+                  <div className="flex min-h-[120px] flex-1 items-center justify-center rounded-xl border border-dashed border-outline-variant bg-white px-4 py-6 text-center text-xs text-secondary shadow-sm">
+                    No line items yet. Confirm selections in the chat to populate
+                    this table.
+                  </div>
+                )}
+              </div>
+              <div className="shrink-0 space-y-2 pt-1">
+                <button
+                  type="button"
+                  disabled={accumulatedPrRows.length === 0}
+                  onClick={handleSubmitRequest}
+                  className="w-full rounded-xl bg-primary py-2.5 text-sm font-bold text-on-primary shadow-sm transition-opacity hover:opacity-90 disabled:cursor-not-allowed disabled:opacity-40"
+                >
+                  Submit Request
+                </button>
+                {submitFeedback ? (
+                  <p className="text-center text-xs text-primary">{submitFeedback}</p>
+                ) : null}
+              </div>
             </aside>
           </div>
         )}

src/components/PrLineItemsTable.tsx

@@ -2,7 +2,7 @@ import type { PrRow } from "../api/form";
 
 type Props = {
   rows: PrRow[];
-  /** Extra classes on the outer card (e.g. margin). */
+  /** Extra classes on the outer flex wrapper (e.g. flex-1 min-h-0). */
   className?: string;
 };
 
@@ -11,39 +11,39 @@ export function PrLineItemsTable({ rows, className = "" }: Props) {
 
   return (
     <div
-      className={`w-full overflow-hidden rounded-xl border border-outline-variant bg-white shadow-sm ${className}`}
+      className={`flex min-h-0 w-full flex-1 flex-col overflow-hidden rounded-xl border border-outline-variant bg-white shadow-sm ${className}`}
     >
-      <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 className="shrink-0 border-b border-outline-variant bg-surface-container-high px-2 py-1.5 font-label-caps text-[8px] font-bold uppercase leading-none tracking-wide text-secondary">
+        Line items
       </div>
-      <div className="max-h-[min(70vh,560px)] overflow-auto">
-        <table className="w-full min-w-[960px] table-fixed border-collapse text-left text-body-sm font-body-sm">
+      <div className="min-h-0 flex-1 overflow-auto">
+        <table className="w-full min-w-[720px] table-fixed border-collapse text-left text-[11px] leading-snug">
           <colgroup>
-            <col className="w-[8%]" />
-            <col className="w-[10%]" />
-            <col className="w-[22%]" />
-            <col className="w-[30%]" />
+            <col className="w-[7%]" />
+            <col className="w-[9%]" />
+            <col className="w-[24%]" />
+            <col className="w-[32%]" />
             <col className="w-[8%]" />
             <col className="w-[12%]" />
           </colgroup>
-          <thead>
+          <thead className="sticky top-0 z-10">
             <tr className="border-b border-outline-variant bg-surface-container-low">
-              <th className="px-3 py-2.5 align-bottom font-semibold text-primary">
+              <th className="px-2 py-1.5 align-bottom text-[10px] font-semibold text-primary">
                 PR Line Item
               </th>
-              <th className="px-3 py-2.5 align-bottom font-semibold text-primary">
+              <th className="px-2 py-1.5 align-bottom text-[10px] font-semibold text-primary">
                 MAT GRP
               </th>
-              <th className="px-3 py-2.5 align-bottom font-semibold text-primary">
+              <th className="px-2 py-1.5 align-bottom text-[10px] font-semibold text-primary">
                 PR SHORT TEXT
               </th>
-              <th className="px-3 py-2.5 align-bottom font-semibold text-primary">
+              <th className="px-2 py-1.5 align-bottom text-[10px] font-semibold text-primary">
                 PR LONG TEXT
               </th>
-              <th className="px-3 py-2.5 align-bottom font-semibold text-primary text-center">
+              <th className="px-2 py-1.5 align-bottom text-center text-[10px] font-semibold text-primary">
                 PR Quantity
               </th>
-              <th className="px-3 py-2.5 align-bottom font-semibold text-primary">
+              <th className="px-2 py-1.5 align-bottom text-[10px] font-semibold text-primary">
                 Delivery Date
               </th>
             </tr>
@@ -54,22 +54,22 @@ export function PrLineItemsTable({ rows, className = "" }: Props) {
                 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">
+                <td className="px-2 py-1 font-data-mono text-[10px] tabular-nums whitespace-nowrap">
                   {r.pr_line_item}
                 </td>
-                <td className="px-3 py-2.5 font-data-mono text-data-mono whitespace-nowrap">
+                <td className="px-2 py-1 font-data-mono text-[10px] whitespace-nowrap">
                   {r.mat_grp}
                 </td>
-                <td className="min-w-0 px-3 py-2.5 break-words text-on-background">
+                <td className="min-w-0 px-2 py-1 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">
+                <td className="min-w-0 px-2 py-1 break-words text-on-background">
                   {r.pr_long_text}
                 </td>
-                <td className="px-3 py-2.5 text-center whitespace-nowrap tabular-nums">
+                <td className="px-2 py-1 text-center tabular-nums whitespace-nowrap">
                   {r.pr_quantity}
                 </td>
-                <td className="min-w-0 px-3 py-2.5 whitespace-nowrap text-secondary">
+                <td className="min-w-0 px-2 py-1 whitespace-nowrap text-[10px] text-secondary">
                   {r.delivery_date}
                 </td>
               </tr>

src/components/ProcurementFormBlock.tsx

@@ -383,7 +383,7 @@ export function ProcurementFormBlock({
             ) : null}
             {justAdded ? (
               <p className="mb-3 text-body-sm font-semibold text-[#10B981]">
-                Line items added to the CLEAN PR table on the right.
+                Line items added to the table on the right.
               </p>
             ) : null}
 

src/components/RequestSummaryPanel.tsx

@@ -13,7 +13,7 @@ type Props = {
 };
 
 const INPUT =
-  "mt-1 w-full rounded-lg border border-outline-variant bg-surface-container-lowest px-3 py-2 text-body-sm text-primary shadow-sm focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary";
+  "mt-0.5 w-full rounded-md border border-outline-variant bg-surface-container-lowest px-2 py-1 text-[11px] leading-tight text-primary shadow-sm focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary";
 
 function MiniField({
   label,
@@ -24,7 +24,7 @@ function MiniField({
 }) {
   return (
     <div>
-      <label className="font-label-caps text-[10px] font-bold uppercase tracking-wide text-secondary">
+      <label className="font-label-caps text-[8px] font-bold uppercase leading-none tracking-wide text-secondary">
         {label}
       </label>
       {children}
@@ -44,17 +44,17 @@ export function RequestSummaryPanel({
   onRequestedDateChange,
 }: Props) {
   return (
-    <div className="rounded-xl border border-outline-variant bg-surface-container-low p-4 shadow-sm">
-      <h2 className="mb-3 font-label-caps text-[10px] font-bold uppercase tracking-wide text-secondary">
+    <div className="shrink-0 rounded-lg border border-outline-variant bg-surface-container-low px-2.5 py-2 shadow-sm">
+      <h2 className="mb-1.5 font-label-caps text-[8px] font-bold uppercase leading-none tracking-wide text-secondary">
         Request details
       </h2>
-      <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
+      <div className="grid grid-cols-2 gap-x-2 gap-y-1.5">
         <MiniField label="Request Number">
           <input
             type="text"
             readOnly
             value={requestNumber}
-            className={`${INPUT} bg-surface-container-high font-data-mono text-data-mono`}
+            className={`${INPUT} bg-surface-container-high font-data-mono text-[10px]`}
             aria-readonly
           />
         </MiniField>
@@ -84,7 +84,7 @@ export function RequestSummaryPanel({
             className={INPUT}
           />
         </MiniField>
-        <div className="sm:col-span-2">
+        <div className="col-span-2">
           <MiniField label="Budget Code">
             <input
               type="text"