From 830a1f98a9ab488728b6ec77b57ab3ca4cafdbfd Mon Sep 17 00:00:00 2001
From: Alexander Bocken <alexander@bocken.org>
Date: Thu, 9 Apr 2026 21:30:55 +0200
Subject: [PATCH] fix: use gradient overlay instead of box-shadow for status
 bar shadow

The box-shadow rendered outside the pseudo-element, placing the shadow
below the status bar boundary. Switch to a multi-stop linear gradient
inside the element so the shadow fades smoothly through the status bar
area (+20% overshoot for softer transition).
---
 package.json |  2 +-
 src/app.css  | 13 +++++++++----
 2 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/package.json b/package.json
index caa8063..5375de1 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "homepage",
-	"version": "1.21.0",
+	"version": "1.21.1",
 	"private": true,
 	"type": "module",
 	"scripts": {
diff --git a/src/app.css b/src/app.css
index cb3f322..3e12987 100644
--- a/src/app.css
+++ b/src/app.css
@@ -298,16 +298,21 @@ body {
 }
 
 /* Status bar drop shadow for edge-to-edge Android/Tauri.
-   Sits flush at the top; the downward shadow marks the
-   boundary between status bar and page content. */
+   Covers the status-bar area; the bottom third fades out
+   to create a soft shadow at the boundary. */
 body::before {
 	content: '';
 	position: fixed;
 	top: 0;
 	left: 0;
 	right: 0;
-	height: env(safe-area-inset-top, 0px);
-	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
+	height: calc(env(safe-area-inset-top, 0px) * 1.2);
+	background: linear-gradient(to bottom,
+		rgba(0, 0, 0, 0.4) 50%,
+		rgba(0, 0, 0, 0.32) 62%,
+		rgba(0, 0, 0, 0.2) 75%,
+		rgba(0, 0, 0, 0.1) 87%,
+		transparent);
 	z-index: 9999;
 	pointer-events: none;
 }