From 3753edaa20ebac15d21e4c44e970346af1434c2a Mon Sep 17 00:00:00 2001
From: John Yeo <johnyeocx@gmail.com>
Date: Thu, 16 Apr 2026 17:43:23 +0100
Subject: [PATCH] Revert "Fix invoice detail sheet styling to match
 subscription detail sheet"

This reverts commit 96001829ebe06419dd88a74d4b609f4588022c4f.
---
 .../components/sheets/InvoiceDetailSheet.tsx  | 157 +++++++++---------
 1 file changed, 75 insertions(+), 82 deletions(-)

diff --git a/vite/src/views/customers2/components/sheets/InvoiceDetailSheet.tsx b/vite/src/views/customers2/components/sheets/InvoiceDetailSheet.tsx
index f1b584056..4fa67236e 100644
--- a/vite/src/views/customers2/components/sheets/InvoiceDetailSheet.tsx
+++ b/vite/src/views/customers2/components/sheets/InvoiceDetailSheet.tsx
@@ -8,11 +8,8 @@ import {
 import {
 	ArrowCounterClockwiseIcon,
 	ArrowSquareOutIcon,
-	CalendarBlankIcon,
-	CreditCardIcon,
 	EyeIcon,
 	EyeSlashIcon,
-	HashIcon,
 } from "@phosphor-icons/react";
 import { format } from "date-fns";
 import { useMemo, useState } from "react";
@@ -20,7 +17,6 @@ import { AdminHover } from "@/components/general/AdminHover";
 import { Badge } from "@/components/v2/badges/Badge";
 import { Button } from "@/components/v2/buttons/Button";
 import { MiniCopyButton } from "@/components/v2/buttons/CopyButton";
-import { InfoRow } from "@/components/v2/InfoRow";
 import { SheetHeader, SheetSection } from "@/components/v2/sheets/InlineSheet";
 import { useFeaturesQuery } from "@/hooks/queries/useFeaturesQuery";
 import { useOrgStripeQuery } from "@/hooks/queries/useOrgStripeQuery";
@@ -193,7 +189,7 @@ export function InvoiceDetailSheet({
 	};
 
 	return (
-		<div className="flex flex-col h-full overflow-y-auto">
+		<div className="flex flex-col h-full">
 			<SheetHeader
 				title={
 					<div className="flex items-center gap-2">
@@ -208,94 +204,91 @@ export function InvoiceDetailSheet({
 				description={`${formatDate(invoice.created_at)} • ${formatSignedAmount(invoice.total, invoice.currency)}`}
 			/>
 
-			{productGroups.map((productGroup) => (
-				<SheetSection
-					key={productGroup.productId ?? "unknown"}
-					withSeparator={true}
-				>
-					<div className="flex items-center justify-between mb-2">
-						<span className="text-xs font-medium text-t3 truncate">
-							{productGroup.productName}
-						</span>
-						<button
-							type="button"
-							onClick={() => setShowDescriptions((prev) => !prev)}
-							className="text-t4 hover:text-t2 transition-colors p-0.5 rounded"
-							title={
-								showDescriptions ? "Show computed display" : "Show descriptions"
-							}
-						>
-							{showDescriptions ? (
-								<EyeSlashIcon size={14} />
-							) : (
-								<EyeIcon size={14} />
-							)}
-						</button>
-					</div>
+			<div className="flex-1 overflow-y-auto min-h-0">
+				{/* Product groups with line items */}
+				{productGroups.map((productGroup) => (
+					<SheetSection
+						key={productGroup.productId ?? "unknown"}
+						withSeparator={true}
+					>
+						{/* Product header with description toggle */}
+						<div className="flex items-center justify-between mb-2">
+							<span className="text-xs font-medium text-t3 truncate">
+								{productGroup.productName}
+							</span>
+							<button
+								type="button"
+								onClick={() => setShowDescriptions((prev) => !prev)}
+								className="text-t4 hover:text-t2 transition-colors p-0.5 rounded"
+								title={
+									showDescriptions
+										? "Show computed display"
+										: "Show descriptions"
+								}
+							>
+								{showDescriptions ? (
+									<EyeSlashIcon size={14} />
+								) : (
+									<EyeIcon size={14} />
+								)}
+							</button>
+						</div>
 
-					<div className="flex flex-col gap-2">
-						{productGroup.lineItemGroups.map((group) => (
-							<LineItemGroupRow
-								key={group.groupKey}
-								group={group}
-								formatAmount={formatAmount}
-								formatPeriod={formatPeriod}
-								currency={invoice.currency}
-								showDescriptions={showDescriptions}
-							/>
-						))}
+						{/* Line item groups within this product */}
+						<div className="flex flex-col gap-2">
+							{productGroup.lineItemGroups.map((group) => (
+								<LineItemGroupRow
+									key={group.groupKey}
+									group={group}
+									formatAmount={formatAmount}
+									formatPeriod={formatPeriod}
+									currency={invoice.currency}
+									showDescriptions={showDescriptions}
+								/>
+							))}
+						</div>
+					</SheetSection>
+				))}
+
+				{/* Invoice Total */}
+				<SheetSection withSeparator={true}>
+					<div className="flex items-center justify-between">
+						<span className="text-sm font-medium text-foreground">Total</span>
+						<span className="text-sm font-semibold text-foreground tabular-nums">
+							{formatSignedAmount(invoice.total, invoice.currency)}
+						</span>
 					</div>
 				</SheetSection>
-			))}
 
-			<SheetSection withSeparator={true}>
-				<div className="flex items-center justify-between">
-					<span className="text-sm font-medium text-foreground">Total</span>
-					<span className="text-sm font-semibold text-foreground tabular-nums">
-						{formatSignedAmount(invoice.total, invoice.currency)}
-					</span>
-				</div>
-			</SheetSection>
-
-			<SheetSection withSeparator={false}>
-				<div className="space-y-3">
-					<InfoRow
-						icon={<HashIcon size={16} weight="duotone" />}
-						label="Invoice ID"
-						value={
+				{/* Invoice Details - Compact */}
+				<SheetSection withSeparator={false}>
+					<div className="space-y-2">
+						<div className="flex items-center justify-between text-xs">
+							<span className="text-t3">Invoice ID</span>
 							<MiniCopyButton
 								text={invoice.id}
-								innerClassName="text-sm text-t1 font-mono"
+								innerClassName="text-xs text-t1 font-mono"
 							/>
-						}
-					/>
-					<InfoRow
-						icon={<CreditCardIcon size={16} weight="duotone" />}
-						label="Stripe ID"
-						value={
+						</div>
+						<div className="flex items-center justify-between text-xs">
+							<span className="text-t3">Stripe ID</span>
 							<MiniCopyButton
 								text={invoice.stripe_id}
-								innerClassName="text-sm text-t1 font-mono"
+								innerClassName="text-xs text-t1 font-mono"
 							/>
-						}
-					/>
-					<InfoRow
-						icon={<CalendarBlankIcon size={16} weight="duotone" />}
-						label="Created"
-						value={
-							<MiniCopyButton
-								text={format(
-									new Date(invoice.created_at),
-									"MMM d, yyyy HH:mm",
-								)}
-								innerClassName="text-sm text-t1"
-							/>
-						}
-					/>
-				</div>
-			</SheetSection>
+						</div>
+						<div className="flex items-center justify-between text-xs">
+							<span className="text-t3">Created</span>
+							<span className="text-t1">
+								{format(new Date(invoice.created_at), "MMM d, yyyy HH:mm")}
+							</span>
+						</div>
+					</div>
+				</SheetSection>
+			</div>
 
-			<div className="sticky bottom-0 p-4 flex gap-2 bg-card">
+			{/* Footer */}
+			<div className="p-4 flex gap-2 border-t border-border/40">
 				<Button
 					variant="secondary"
 					className="flex-1"