Update README and improve mobile responsiveness for invoicing UI

- README: fix auth (better-auth), database (PostgreSQL), env vars,
  Docker setup, and feature list to reflect actual implementation
- InvoicesDataTable: show status badge + amount inline on mobile
  (previously hidden behind sm: breakpoint, leaving mobile users
  with no financial or status info at a glance)
- InvoiceItemsTable: hide Date/Hours/Rate columns on mobile and
  fold that info into the Description cell as secondary text
- invoice-view.tsx header card: wrap to column layout on mobile
  so status/amount/button don't overflow narrow screens; also
  improve item rows to show date, hours, and rate as subtext

https://claude.ai/code/session_012sqEgNQpx676isepeoX4Mi

src/app/dashboard/invoices/[id]/_components/invoice-items-table.tsx

@@ -40,13 +40,32 @@ const columns: ColumnDef<InvoiceItem>[] = [
     accessorKey: "date",
     header: "Date",
     cell: ({ row }) => formatDate(row.getValue("date")),
+    meta: {
+      headerClassName: "hidden sm:table-cell",
+      cellClassName: "hidden sm:table-cell",
+    },
   },
   {
     accessorKey: "description",
     header: "Description",
-    cell: ({ row }) => (
-      <div className="font-medium">{row.getValue("description")}</div>
-    ),
+    cell: ({ row }) => {
+      const item = row.original;
+      return (
+        <>
+          {/* Desktop: plain description */}
+          <div className="hidden font-medium sm:block">
+            {item.description}
+          </div>
+          {/* Mobile: description + date + hours @ rate stacked */}
+          <div className="sm:hidden">
+            <p className="font-medium">{item.description}</p>
+            <p className="text-muted-foreground mt-0.5 text-xs">
+              {formatDate(item.date)} &middot; {item.hours}h @ {formatCurrency(item.rate)}/hr
+            </p>
+          </div>
+        </>
+      );
+    },
   },
   {
     accessorKey: "hours",
@@ -54,6 +73,10 @@ const columns: ColumnDef<InvoiceItem>[] = [
     cell: ({ row }) => (
       <div className="text-right">{row.getValue("hours")}</div>
     ),
+    meta: {
+      headerClassName: "hidden sm:table-cell",
+      cellClassName: "hidden sm:table-cell",
+    },
   },
   {
     accessorKey: "rate",
@@ -61,6 +84,10 @@ const columns: ColumnDef<InvoiceItem>[] = [
     cell: ({ row }) => (
       <div className="text-right">{formatCurrency(row.getValue("rate"))}</div>
     ),
+    meta: {
+      headerClassName: "hidden sm:table-cell",
+      cellClassName: "hidden sm:table-cell",
+    },
   },
   {
     accessorKey: "amount",

src/app/dashboard/invoices/_components/invoices-data-table.tsx

@@ -134,13 +134,23 @@ export function InvoicesDataTable({ invoices }: InvoicesDataTableProps) {
             <div className="bg-primary/10 hidden p-2 sm:flex">
               <FileText className="text-primary h-4 w-4" />
             </div>
-            <div className="max-w-[80px] min-w-0 sm:max-w-[200px] lg:max-w-[300px]">
+            <div className="min-w-0 flex-1">
               <p className="truncate font-medium">
                 {invoice.client?.name ?? "—"}
               </p>
               <p className="text-muted-foreground truncate text-xs sm:text-sm">
                 {invoice.invoiceNumber}
               </p>
+              {/* Show status + amount inline on mobile only */}
+              <div className="mt-1 flex items-center gap-2 sm:hidden">
+                <StatusBadge
+                  status={getStatusType(invoice)}
+                  className="text-xs"
+                />
+                <span className="text-foreground text-xs font-semibold">
+                  {formatCurrency(invoice.totalAmount)}
+                </span>
+              </div>
             </div>
           </div>
         );