From c9c78b6db539d18c5d6121087cdc3f9611831aa2 Mon Sep 17 00:00:00 2001
From: Przemek Zatorski <admin@softspm.com>
Date: Wed, 23 Sep 2026 22:11:54 +0200
Subject: [PATCH] Zdjecie na stronach logowania siega gornego menu

Na /logowanie i pozostalych ekranach z tym ukladem (rejestracja, odzyskiwanie
hasla) zdjecie stalo w dolnej czesci lewej kolumny, a nad nim byl bialy pas.
Teraz wypelnia cala kolumne od gornego menu - tak jak hero na stronie glownej -
a tresc lezy na nim pod biala poswiata, ktora ku dolowi znika.

Na waskim ekranie zdjecie zostaje osobnym kadrem na gorze kolumny, bez poswiaty.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 frontend/src/App.tsx    |  7 ++++--
 frontend/src/styles.css | 47 +++++++++++++++++++++++++++++------------
 2 files changed, 38 insertions(+), 16 deletions(-)

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 3beecd5..c0d5f15 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -12041,6 +12041,11 @@ function LoginPage({ onLogin }: { onLogin: (user: AuthUser) => void }) {
     <section className="login-page" aria-label="Logowanie">
       <div className="login-stage">
         <div className="login-left">
+          {/* Zdjecie siega gornego menu - tak samo jak hero na stronie glownej. Tresc lezy na nim,
+              a delikatna biala poswiata u gory trzyma czytelnosc tekstu. */}
+          <div className="login-room-photo" style={{ backgroundImage: `url(${loginRoomImage})` }} aria-hidden="true" />
+          <div className="login-left-veil" aria-hidden="true" />
+
           <div className="login-intro">
             <h1>Witaj ponownie!</h1>
             <p>Zaloguj się, aby zarządzać ogłoszeniami, zapisywać ulubione oferty i korzystać ze wszystkich funkcji serwisu Polska Lokalnie.</p>
@@ -12076,8 +12081,6 @@ function LoginPage({ onLogin }: { onLogin: (user: AuthUser) => void }) {
               </p>
             </article>
           </div>
-
-          <div className="login-room-photo" style={{ backgroundImage: `url(${loginRoomImage})` }} aria-hidden="true" />
         </div>
 
         <div className="login-right">
diff --git a/frontend/src/styles.css b/frontend/src/styles.css
index 44df560..fba934d 100644
--- a/frontend/src/styles.css
+++ b/frontend/src/styles.css
@@ -13445,8 +13445,10 @@ a.city-card:hover {
 .login-left {
   background: #ffffff;
   display: grid;
-  grid-template-rows: auto auto minmax(220px, 1fr);
+  grid-template-rows: auto 1fr;
   min-width: 0;
+  overflow: hidden;
+  position: relative;
 }
 
 .login-right {
@@ -13456,23 +13458,26 @@ a.city-card:hover {
   padding: 48px 40px;
 }
 
+/* Zdjecie wypelnia cala lewa kolumne i siega gornego menu - tak jak hero na stronie glownej. */
 .login-room-photo {
-  align-self: stretch;
-  /* Kadr trzyma obraz na scianie i sofe w polu widzenia niezaleznie od wysokosci okna. */
   background-position: center 62%;
   background-repeat: no-repeat;
   background-size: cover;
-  border-radius: 0;
-  margin-top: 34px;
-  min-height: 240px;
-  position: relative;
-  width: 100%;
+  inset: 0;
+  position: absolute;
 }
 
-/* Delikatne zmiekczenie gornej krawedzi zdjecia, zeby przechodzilo w biel kolumny. */
-.login-room-photo::after {
-  background: linear-gradient(180deg, #ffffff 0%, rgba(255, 255, 255, 0) 14%);
-  content: "";
+/* Biala poswiata pod tekstem: u gory kryje zdjecie na tyle, by tekst byl czytelny,
+   a ku dolowi znika, zeby kanapa byla widoczna. */
+.login-left-veil {
+  background: linear-gradient(
+    180deg,
+    rgba(255, 255, 255, 0.96) 0%,
+    rgba(255, 255, 255, 0.93) 38%,
+    rgba(255, 255, 255, 0.72) 58%,
+    rgba(255, 255, 255, 0.12) 78%,
+    rgba(255, 255, 255, 0) 100%
+  );
   inset: 0;
   position: absolute;
 }
@@ -13990,15 +13995,22 @@ a.city-card:hover {
     padding: 0;
   }
 
+  /* Na waskim ekranie zdjecie wraca do ukladu pionowego - jako kadr na gorze kolumny,
+     bez poswiaty, bo tekst lezy pod nim, a nie na nim. */
   .login-room-photo {
     border-radius: 8px;
-    height: 220px;
-    margin-top: 22px;
+    height: 200px;
+    inset: auto;
+    margin-bottom: 4px;
     min-height: 0;
     position: relative;
     width: 100%;
   }
 
+  .login-left-veil {
+    display: none;
+  }
+
   .login-room-photo::after {
     display: none;
   }
@@ -35592,3 +35604,10 @@ a.listing-detail-secondary {
   min-height: 42px;
   padding: 0 18px;
 }
+
+/* Tresc lewej kolumny lezy na zdjeciu, wiec musi byc nad tlem i poswiata. */
+.login-intro,
+.login-benefits {
+  position: relative;
+  z-index: 1;
+}