From 48dba240eec501d512bc644e138ba4557c95af44 Mon Sep 17 00:00:00 2001
From: Przemek Zatorski <admin@softspm.com>
Date: Fri, 25 Sep 2026 13:36:52 +0200
Subject: [PATCH] Zakladki wyszukiwarki nie zaslaniaja juz korzysci w hero

Sekcja hero miala sztywna wysokosc 700 px, a naglowek skaluje sie z szerokoscia okna
(clamp do 78 px). Na monitorach od ok. 1860 px rzad korzysci schodzil nizej i wchodzil
pod panel wyszukiwarki, podciagany o stale 194 px od dolnej krawedzi hero.

Wysokosc hero wynika teraz z tresci (min-height zamiast height) plus dolny odstep
210 px = 194 px podciagniecia panelu i 16 px przeswitu. Odstep jest staly niezaleznie
od szerokosci okna; ponizej 1760 px nic sie nie zmienia.

Test mierzy nachodzenie na siedmiu szerokosciach od 1280 do 2560 px.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 frontend/src/styles.css        |  8 ++++++--
 frontend/tests/routing.spec.ts | 32 ++++++++++++++++++++++++++++++++
 2 files changed, 38 insertions(+), 2 deletions(-)

diff --git a/frontend/src/styles.css b/frontend/src/styles.css
index 9fdaaa8..f428514 100644
--- a/frontend/src/styles.css
+++ b/frontend/src/styles.css
@@ -602,11 +602,15 @@ svg {
   position: absolute;
 }
 
+/* Wysokosc rosnie z trescia, a nie stoi na sztywno: naglowek skaluje sie z szerokoscia okna
+   (clamp do 78 px), wiec na szerokich monitorach lista korzysci schodzila nizej i wchodzila pod
+   panel wyszukiwarki, ktory jest podciagany do gory o 194 px. Dolny odstep musi byc wiekszy niz
+   to podciagniecie - roznica to odstep miedzy trescia a panelem. */
 .hero-inner {
-  height: 620px;
   margin: 0 auto;
   max-width: 1760px;
-  padding: 68px 48px 0;
+  min-height: 620px;
+  padding: 68px 48px 210px;
   position: relative;
 }
 
diff --git a/frontend/tests/routing.spec.ts b/frontend/tests/routing.spec.ts
index bcb7313..29a9d1d 100644
--- a/frontend/tests/routing.spec.ts
+++ b/frontend/tests/routing.spec.ts
@@ -1013,3 +1013,35 @@ test.describe('Kalkulator zdolnosci kredytowej', () => {
     await expect(page.locator('.credit-details, .credit-detail-row, .credit-detail').first()).toContainText('próg');
   });
 });
+
+// Panel wyszukiwarki jest podciagany na zdjecie hero, a naglowek skaluje sie z szerokoscia okna.
+// Na szerokich monitorach zakladki "Kup / Wynajem" wchodzily na podpisy korzysci.
+test.describe('Strona glowna - panel wyszukiwarki', () => {
+  for (const width of [2560, 1920, 1880, 1760, 1600, 1440, 1280]) {
+    test(`zakladki nie zaslaniaja korzysci przy szerokosci ${width}`, async ({ page }) => {
+      await page.setViewportSize({ width, height: 1000 });
+      await goto(page, ROUTES.home);
+
+      const collisions = await page.evaluate(() => {
+        const box = (el: Element) => {
+          const rect = el.getBoundingClientRect();
+          return { top: rect.top + window.scrollY, bottom: rect.bottom + window.scrollY, left: rect.left, right: rect.right };
+        };
+        const panel = document.querySelector('.search-wrap');
+        if (!panel) {
+          return ['brak panelu wyszukiwarki'];
+        }
+        const search = box(panel);
+        return [...document.querySelectorAll('.benefit')]
+          .filter((item) => {
+            const rect = box(item);
+            return rect.bottom > search.top && rect.top < search.bottom
+              && rect.right > search.left && rect.left < search.right;
+          })
+          .map((item) => (item.textContent ?? '').replace(/\s+/g, ' ').trim().slice(0, 40));
+      });
+
+      expect(collisions, 'korzysci zaslaniane przez panel').toEqual([]);
+    });
+  }
+});