From 478c611d051366fadee16cbe93d8f1e6038944be Mon Sep 17 00:00:00 2001
From: orfelorfel23 <jannik.mueller.jannik+git@googlemail.com>
Date: Thu, 4 Jun 2026 00:40:26 +0200
Subject: [PATCH] UI: Make layout fully responsive for mobile and tablet

---
 src/pages/HomePage.tsx | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/pages/HomePage.tsx b/src/pages/HomePage.tsx
index 4a8d2a0..e6c2d80 100644
--- a/src/pages/HomePage.tsx
+++ b/src/pages/HomePage.tsx
@@ -346,14 +346,14 @@ export function HomePage() {
   );
 
   return (
-    <div className="flex flex-col h-screen overflow-hidden">
+    <div className="flex flex-col min-h-[100dvh] md:h-screen overflow-y-auto md:overflow-hidden">
       {/* Liquid background blobs */}
       <div className="liquid-blob-1" />
       <div className="liquid-blob-2" />
       <div className="liquid-blob-3" />
 
       {/* Header */}
-      <header className="shrink-0 z-20 bg-bg-card/40 backdrop-blur-md border-b border-border shadow-sm">
+      <header className="shrink-0 z-30 sticky top-0 bg-bg-card/70 backdrop-blur-md border-b border-border shadow-sm">
         <div className="max-w-screen-2xl mx-auto px-4 sm:px-6 h-12 flex items-center justify-between">
           {/* Logo */}
           <div className="flex items-center gap-2.5">
@@ -450,11 +450,11 @@ export function HomePage() {
       </header>
 
       {/* Main content: 1/3 left input + 2/3 right results */}
-      <div className="flex-1 min-h-0 flex overflow-hidden max-w-screen-2xl mx-auto w-full px-4 sm:px-6 py-4 gap-5">
+      <div className="flex-1 min-h-0 flex flex-col md:flex-row md:overflow-hidden max-w-screen-2xl mx-auto w-full px-4 sm:px-6 py-4 gap-5">
 
         {/* LEFT PANEL — 1/3 — Input */}
-        <div className="w-[340px] xl:w-[380px] shrink-0 flex flex-col">
-          <div className="card p-4 flex flex-col flex-1 min-h-0">
+        <div className="w-full md:w-[340px] xl:w-[380px] shrink-0 flex flex-col">
+          <div className="card p-4 flex flex-col flex-none md:flex-1 min-h-0">
             <InputPanel
               values={input}
               onChange={setInput}
@@ -475,8 +475,8 @@ export function HomePage() {
         </div>
 
         {/* RIGHT PANEL — 2/3 — Results */}
-        <div className="flex-1 min-w-0 flex flex-col overflow-hidden">
-          <div className="flex-1 overflow-y-auto scrollbar-thin px-1">
+        <div className="flex-1 min-w-0 flex flex-col md:overflow-hidden gap-4 md:gap-0 pb-4 md:pb-0">
+          <div className="flex-1 md:overflow-y-auto md:scrollbar-thin px-1">
             <ResultsPanel
               assets={assets}
               originalAssets={originalAssets}
@@ -496,7 +496,7 @@ export function HomePage() {
 
           {/* Download bar inside results column, always visible */}
           {assets && (
-            <div className="shrink-0 pt-2">
+            <div className="shrink-0 pt-2 sticky bottom-4 md:static z-20">
               <StickyZipBar
                 title={selectedTitle}
                 busy={loading}