From 85f5f364edca165b90a3f57f370c358e88d6afa5 Mon Sep 17 00:00:00 2001
From: EiSiMo <mail@moritz.run>
Date: Thu, 23 Apr 2026 13:23:54 +0200
Subject: [PATCH] feat(ui): bigger lightbox arrows, calmer button anim, expand
 row by clicking whitespace
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Lightbox: bump close 2.5→3rem and prev/next 3→3.5rem so the hit area
is forgiving — random "click an arrow but the modal closes" reports
were almost always near-misses landing on the backdrop. Drop the
:active scale(.96) entirely (it was the jarring part) and soften the
hover bg from .8 to .7 with a slightly faster transition so taps feel
crisp instead of twitchy.

Wohnungen list: clicking the empty whitespace next to the chevron now
toggles the row open/closed, same as clicking the chevron itself.
Implemented as expandTriggerFor(target) wrapped around the existing
delegate — direct chevron clicks are short-circuited first; row clicks
fall through unless the target is inside an interactive element
(a/button/input/label/form/.partner-badge) or inside the already-
opened detail pane (where the gallery and "Zur Original-Anzeige" link
have their own meaning).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 web/static/app.css | 10 ++++------
 web/static/app.js  | 17 ++++++++++++++++-
 2 files changed, 20 insertions(+), 7 deletions(-)

diff --git a/web/static/app.css b/web/static/app.css
index 2dec58f..d5ab98d 100644
--- a/web/static/app.css
+++ b/web/static/app.css
@@ -146,16 +146,14 @@ body:has(#v_map:checked) .view-map { display: block; }
 .lightbox button { background: rgba(0, 0, 0, .55); color: #fff; border: 0;
                    border-radius: 9999px; cursor: pointer;
                    display: inline-flex; align-items: center; justify-content: center;
-                   transition: background .15s, transform .05s; padding: 0;
+                   transition: background .12s; padding: 0;
                    z-index: 2; }
-.lightbox button:hover { background: rgba(0, 0, 0, .8); }
-.lightbox button:active { transform: scale(.96); }
+.lightbox button:hover { background: rgba(0, 0, 0, .7); }
 .lightbox-close { position: absolute; top: 1.25rem; right: 1.25rem;
-                  width: 2.5rem; height: 2.5rem; }
+                  width: 3rem; height: 3rem; }
 .lightbox-prev, .lightbox-next { position: absolute; top: 50%;
                                   transform: translateY(-50%);
-                                  width: 3rem; height: 3rem; }
-.lightbox-prev:active, .lightbox-next:active { transform: translateY(-50%) scale(.96); }
+                                  width: 3.5rem; height: 3.5rem; }
 .lightbox-prev { left: 1.25rem; }
 .lightbox-next { right: 1.25rem; }
 .lightbox-prev[hidden], .lightbox-next[hidden] { display: none; }
diff --git a/web/static/app.js b/web/static/app.js
index cc2105d..d41f866 100644
--- a/web/static/app.js
+++ b/web/static/app.js
@@ -65,8 +65,23 @@ setInterval(updateRelativeTimes, 5000);
 // Flat detail expand — lazily fetches /partials/wohnung/<id> into the sibling
 // .flat-detail container on first open, toggles visibility on subsequent clicks.
 // Event delegation survives HTMX swaps without re-binding on each poll.
+//
+// The trigger is either the chevron button OR any non-interactive area inside
+// the row's header (so users can click the empty whitespace next to the title
+// to expand). Clicks on a link / form button / partner badge / inside the
+// already-loaded detail pane are NOT counted as expand triggers.
+function expandTriggerFor(target) {
+  const directBtn = target.closest(".flat-expand-btn");
+  if (directBtn) return directBtn;
+  if (target.closest("a, button, input, label, form, .partner-badge")) return null;
+  if (target.closest(".flat-detail")) return null;
+  const row = target.closest(".flat-row");
+  if (!row) return null;
+  return row.querySelector(".flat-expand-btn");
+}
+
 document.addEventListener("click", (ev) => {
-  const btn = ev.target.closest(".flat-expand-btn");
+  const btn = expandTriggerFor(ev.target);
   if (!btn) return;
   const row = btn.closest(".flat-row");
   if (!row) return;