From d88e2dc0d1593aa628fd6bd3c53535c92036e893 Mon Sep 17 00:00:00 2001
From: DEls <davide.els1@outlook.com>
Date: Mon, 26 Oct 2026 19:57:24 +0200
Subject: [PATCH] fix(dn): inbox 3 table gives the descriptions room at laptop
 width

Stack the slip line over its PO line picker in one column and show
value with left-on-PO beneath it, so every column fits beside a 300px
documents column without horizontal scroll.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../inbox-3/inbox-three-workspace.tsx         |  2 +-
 .../delivery-notes/inbox-3/line-table.tsx     | 29 +++++++++----------
 2 files changed, 14 insertions(+), 17 deletions(-)

diff --git a/src/app/dashboard/financial/delivery-notes/inbox-3/inbox-three-workspace.tsx b/src/app/dashboard/financial/delivery-notes/inbox-3/inbox-three-workspace.tsx
index 0334c24..16b1396 100644
--- a/src/app/dashboard/financial/delivery-notes/inbox-3/inbox-three-workspace.tsx
+++ b/src/app/dashboard/financial/delivery-notes/inbox-3/inbox-three-workspace.tsx
@@ -74,7 +74,7 @@ export function InboxThreeWorkspace(props: InboxThreeWorkspaceProps) {
         </div>
       </header>
 
-      <div className="grid items-start gap-6 lg:grid-cols-[minmax(0,1fr)_340px]">
+      <div className="grid items-start gap-6 lg:grid-cols-[minmax(0,1fr)_300px]">
         <div className="order-1 min-w-0 space-y-4">
           <ReadyBanner
             lines={ready}
diff --git a/src/app/dashboard/financial/delivery-notes/inbox-3/line-table.tsx b/src/app/dashboard/financial/delivery-notes/inbox-3/line-table.tsx
index 80fd186..edd4a16 100644
--- a/src/app/dashboard/financial/delivery-notes/inbox-3/line-table.tsx
+++ b/src/app/dashboard/financial/delivery-notes/inbox-3/line-table.tsx
@@ -3,7 +3,7 @@
 import { useMemo, useState } from "react";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
-import { formatNumber } from "@/lib/utils";
+import { cn, formatNumber } from "@/lib/utils";
 import { sameReceivingUnit } from "@/lib/dn-pipeline/receiving-defaults";
 import type { LineEdit, LineRow } from "@/lib/inbox-three/line-rows";
 import { PoLinePicker, type PoLineChoice } from "./po-line-picker";
@@ -143,25 +143,23 @@ export function LineTable({
             eight columns are readable side by side on a laptop. */}
         <table className="w-full table-fixed border-collapse text-sm">
           <colgroup>
-            <col className="w-10" />
+            {/* The slip line and its PO line share one column, stacked, so
+                the descriptions keep the width and the numbers stay narrow. */}
+            <col className="w-9" />
             <col />
-            <col className="w-[26%]" />
             <col className="w-24" />
-            <col className="w-40" />
-            <col className="w-28" />
+            <col className="w-32" />
             <col className="w-24" />
             <col className="w-28" />
           </colgroup>
           <thead>
             <tr className="border-b bg-muted/30 text-left text-xs uppercase tracking-wide text-muted-foreground">
-              <th scope="col" className="w-12 px-2 py-2">#</th>
-              <th scope="col" className="px-2 py-2">On the slip</th>
-              <th scope="col" className="px-2 py-2">Goes to PO line</th>
+              <th scope="col" className="px-2 py-2">#</th>
+              <th scope="col" className="px-2 py-2">On the slip → goes to PO line</th>
               <th scope="col" className="px-2 py-2 text-right">Received</th>
               <th scope="col" className="px-2 py-2">Unit</th>
               <th scope="col" className="px-2 py-2 text-right">Price</th>
-              <th scope="col" className="px-2 py-2 text-right">Value</th>
-              <th scope="col" className="px-2 py-2 text-right">Left on PO</th>
+              <th scope="col" className="px-2 py-2 text-right">Value · left on PO</th>
             </tr>
           </thead>
           <tbody>
@@ -179,8 +177,7 @@ export function LineTable({
                       {row.slipPrice !== null && ` × ${money(row.slipPrice)}`}
                     </p>
                     {row.problem && <p className="mt-1 text-xs text-amber-700 dark:text-amber-300">{row.problem}</p>}
-                  </td>
-                  <td className="px-2 py-3">
+                    <div className="mt-2" />
                     <PoLinePicker
                       value={state.poItemId}
                       items={poItems}
@@ -229,11 +226,11 @@ export function LineTable({
                       <Badge variant="outline" className="mt-1 border-amber-400 text-amber-700 dark:text-amber-300">price differs</Badge>
                     )}
                   </td>
-                  <td className="px-2 py-3 text-right tabular-nums">{money(numbers.value)}</td>
                   <td className="px-2 py-3 text-right tabular-nums">
-                    <span className={numbers.leftOnPo !== null && numbers.leftOnPo < 0 ? "font-semibold text-amber-700 dark:text-amber-300" : ""}>
-                      {numbers.leftOnPo === null ? "—" : formatNumber(numbers.leftOnPo)}
-                    </span>
+                    <p className="font-medium">{money(numbers.value)}</p>
+                    <p className={cn("text-xs", numbers.leftOnPo !== null && numbers.leftOnPo < 0 ? "font-semibold text-amber-700 dark:text-amber-300" : "text-muted-foreground")}>
+                      left {numbers.leftOnPo === null ? "—" : formatNumber(numbers.leftOnPo)}
+                    </p>
                     {over && (
                       <label className="mt-1 flex items-center justify-end gap-1 text-xs text-amber-700 dark:text-amber-300">
                         <input