From a4ea6c6e664c00832441b4bfaa5c3518e6116127 Mon Sep 17 00:00:00 2001
From: Alexander Bocken <alexander@bocken.org>
Date: Mon, 6 Apr 2026 00:10:06 +0200
Subject: [PATCH] fix: add status bar shadow and safe-area offset for Android

Add drop shadow under the safe-area-inset-top zone to visually
separate Android status icons from page content. Adjust StickyImage
sticky positioning and max-height to account for safe-area-inset.
---
 src/app.css                                 | 13 +++++++++++++
 src/lib/components/faith/StickyImage.svelte |  8 ++++----
 2 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/src/app.css b/src/app.css
index a6a0b56d..945abe93 100644
--- a/src/app.css
+++ b/src/app.css
@@ -280,6 +280,19 @@ body {
 	overflow-x: hidden;
 }
 
+/* Status bar drop shadow for edge-to-edge Android/PWA */
+body::before {
+	content: '';
+	position: fixed;
+	top: 0;
+	left: 0;
+	right: 0;
+	height: env(safe-area-inset-top, 0px);
+	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
+	z-index: 9999;
+	pointer-events: none;
+}
+
 /* ============================================
    LINK STYLES
    ============================================ */
diff --git a/src/lib/components/faith/StickyImage.svelte b/src/lib/components/faith/StickyImage.svelte
index f6c3f441..afd9f031 100644
--- a/src/lib/components/faith/StickyImage.svelte
+++ b/src/lib/components/faith/StickyImage.svelte
@@ -133,13 +133,13 @@
 	.image-wrap-desktop {
 		display: block;
 		position: sticky;
-		top: 4rem;
+		top: calc(4rem + env(safe-area-inset-top, 0px));
 		align-self: start;
 		order: 1;
 	}
 	.overlay .image-wrap-desktop img {
 		height: auto;
-		max-height: calc(100vh - 5rem);
+		max-height: calc(100vh - 5rem - env(safe-area-inset-top, 0px));
 		width: auto;
 		max-width: 25vw;
 	}
@@ -154,12 +154,12 @@
 	.sticky-image-layout:not(.overlay) .image-wrap-desktop {
 		display: block;
 		position: sticky;
-		top: 4rem;
+		top: calc(4rem + env(safe-area-inset-top, 0px));
 		flex: 1;
 		order: 1;
 	}
 	.sticky-image-layout:not(.overlay) .image-wrap-desktop img {
-		max-height: calc(100vh - 4rem);
+		max-height: calc(100vh - 4rem - env(safe-area-inset-top, 0px));
 		height: auto;
 		width: 100%;
 		object-fit: contain;