From a062f756f2537fea3673323a900af2409a672146 Mon Sep 17 00:00:00 2001
From: MHSanaei <ho3ein.sanaei@gmail.com>
Date: Fri, 8 May 2026 12:11:51 +0200
Subject: [PATCH] fix(frontend): bring wave-header to front so the wave
 actually shows
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Two layering bugs were hiding the wave entirely:

1. .ant-layout-content had background: var(--bg-page) which painted an
   opaque rectangle covering the full content area — including the
   fixed wave-header behind it. Made the layout/content transparent
   and moved the bg paint up to .login-app (the outer ant-layout).

2. .waves-header had z-index: -1 which on its own was fine, but with
   .ant-layout-content opaque on top it was doubly buried. Promoted
   the wave-header to z-index: 0 and gave the form .login-row
   z-index: 1, so the form sits above the wave and the wave sits
   above the page-bg.

Also set --bg-page to the legacy mint (#c7ebe2) for light mode so the
bottom half of the page below the wave matches the legacy panel
(was white). Dark mode stays at the surface-100/login-wave palette.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 frontend/src/pages/login/LoginPage.vue | 19 ++++++++++++++++---
 1 file changed, 16 insertions(+), 3 deletions(-)

diff --git a/frontend/src/pages/login/LoginPage.vue b/frontend/src/pages/login/LoginPage.vue
index fd8200c3..a6992d98 100644
--- a/frontend/src/pages/login/LoginPage.vue
+++ b/frontend/src/pages/login/LoginPage.vue
@@ -163,7 +163,11 @@ async function login() {
  *   - Together they form a 65vh-tall colored region anchored to the top,
  *     with the form floating centered on top of it. */
 .login-app {
-  --bg-page: #ffffff;
+  /* Light mode mirrors the legacy: the wave-header (top ~65vh) is the
+   * lighter mint #dbf5ed, the rest of the page (--bg-page) is the
+   * slightly darker mint #c7ebe2 — the bottom wave fill is the same
+   * color so the wave reads as a continuation of the page bg. */
+  --bg-page: #c7ebe2;
   --bg-wave-header: #dbf5ed;
   --bg-card: #ffffff;
   --color-title: #008771;
@@ -172,7 +176,6 @@ async function login() {
   --wave-fill-bottom: #c7ebe2;
 
   min-height: 100vh;
-  background: var(--bg-page);
 }
 
 .login-app.is-dark {
@@ -193,7 +196,14 @@ async function login() {
   --wave-fill-bottom: #0f2d32;
 }
 
+/* Both ant-layout and ant-layout-content default to opaque backgrounds.
+ * Force them transparent so the page-bg painted on .login-app shows
+ * through, and so the fixed waves-header isn't covered by the layout. */
+.login-app,
 .login-app :deep(.ant-layout-content) {
+  background: transparent;
+}
+.login-app {
   background: var(--bg-page);
 }
 
@@ -216,7 +226,10 @@ async function login() {
   position: relative;
 }
 
+/* Form sits above the fixed wave-header (which is at z-index: 0). */
 .login-row {
+  position: relative;
+  z-index: 1;
   min-height: 100vh;
   padding: 24px 0;
 }
@@ -243,7 +256,7 @@ async function login() {
   position: fixed;
   inset: 0 0 auto 0;
   width: 100%;
-  z-index: -1;
+  z-index: 0;
   pointer-events: none;
   background: var(--bg-wave-header);
 }