From ea3a309b2dafb26b17d467a273e0436f07fe03df Mon Sep 17 00:00:00 2001
From: admin <tim.leikauf@gmail.com>
Date: Wed, 27 May 2026 15:35:31 +0200
Subject: [PATCH] fix: fix nav scrolling and card layout on mobile

- App.jsx: use flex column layout so BottomNav stays at bottom and
  never scrolls away; Feed gets a proper definite height for scroll-snap
- Feed.css: feed-slot uses min-height so long cards can grow, align top
- PairCards.css: cap image at 40dvh so card always fits on screen

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/App.jsx                  | 6 ++++--
 src/components/PairCards.css | 2 ++
 src/pages/Feed.css           | 7 ++++---
 3 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/src/App.jsx b/src/App.jsx
index 48297e7..6891765 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -29,8 +29,10 @@ function AppContent() {
   const PageComponent = PAGES[page] || Feed
 
   return (
-    <div style={{ minHeight: '100vh', background: '#F5F0E8', paddingBottom: '72px' }}>
-      <PageComponent />
+    <div style={{ flex: 1, display: 'flex', flexDirection: 'column', background: '#F5F0E8', overflow: 'hidden' }}>
+      <div style={{ flex: 1, overflow: 'hidden', minHeight: 0 }}>
+        <PageComponent />
+      </div>
       <BottomNav active={page} onNavigate={setPage} />
     </div>
   )
diff --git a/src/components/PairCards.css b/src/components/PairCards.css
index d5b82dd..b3ff5e9 100644
--- a/src/components/PairCards.css
+++ b/src/components/PairCards.css
@@ -83,6 +83,8 @@
   position: relative;
   width: 100%;
   aspect-ratio: 1 / 1;
+  /* Bild nie höher als ~40% des Viewport, damit die Karte komplett sichtbar ist */
+  max-height: 40dvh;
   overflow: hidden;
   cursor: default;
   background: #1a1a1a;
diff --git a/src/pages/Feed.css b/src/pages/Feed.css
index 6548892..f4b4b8b 100644
--- a/src/pages/Feed.css
+++ b/src/pages/Feed.css
@@ -8,10 +8,11 @@
 
 .feed-slot {
   scroll-snap-align: start;
-  height: 100%;
+  /* Mindesthöhe = volle Slot-Höhe; bei langer Karte wächst der Slot mit */
+  min-height: 100%;
   display: flex;
-  align-items: center;
+  align-items: flex-start;
   justify-content: center;
-  padding: 24px 20px;
+  padding: 16px 20px;
   flex-shrink: 0;
 }