From 5a055fba700bee3493d6312e98d827248072aefa Mon Sep 17 00:00:00 2001
From: Fabian Schieder <fabian.schieder.1010@gmail.com>
Date: Fri, 27 Feb 2026 22:43:47 +0100
Subject: [PATCH] enhance mobile layout with responsive design adjustments and
 improved accessibility features

---
 .idea/php.xml              | 15 +++++++++++++
 account.php                |  3 ++-
 assets/css/productpage.css | 10 +++++++++
 header.php                 | 14 ++++++++++++
 style.css                  | 46 +++++++++++++++++++-------------------
 wunschliste.php            |  4 ++--
 6 files changed, 66 insertions(+), 26 deletions(-)

diff --git a/.idea/php.xml b/.idea/php.xml
index 8e445c2..01ce694 100644
--- a/.idea/php.xml
+++ b/.idea/php.xml
@@ -10,12 +10,27 @@
     <option name="highlightLevel" value="WARNING" />
     <option name="transferred" value="true" />
   </component>
+  <component name="PhpCodeSniffer">
+    <phpcs_settings>
+      <phpcs_by_interpreter asDefaultInterpreter="true" interpreter_id="b74b3486-711a-42ad-bf18-c51cc1addaa5" timeout="30000" />
+    </phpcs_settings>
+  </component>
   <component name="PhpProjectSharedConfiguration" php_language_level="7.0">
     <option name="suggestChangeDefaultLanguageLevel" value="false" />
   </component>
+  <component name="PhpStan">
+    <PhpStan_settings>
+      <phpstan_by_interpreter asDefaultInterpreter="true" interpreter_id="b74b3486-711a-42ad-bf18-c51cc1addaa5" timeout="60000" />
+    </PhpStan_settings>
+  </component>
   <component name="PhpStanOptionsConfiguration">
     <option name="transferred" value="true" />
   </component>
+  <component name="Psalm">
+    <Psalm_settings>
+      <psalm_fixer_by_interpreter asDefaultInterpreter="true" interpreter_id="b74b3486-711a-42ad-bf18-c51cc1addaa5" timeout="60000" />
+    </Psalm_settings>
+  </component>
   <component name="PsalmOptionsConfiguration">
     <option name="transferred" value="true" />
   </component>
diff --git a/account.php b/account.php
index 024f71d..cacd594 100644
--- a/account.php
+++ b/account.php
@@ -69,7 +69,8 @@ include 'header.php';
             <header class="auth__header">
                 <img src="<?php echo htmlspecialchars($user['profilePicture']); ?>"
                      alt="Profilbild"
-                     width="240">
+                     width="240"
+                     style="max-width:100%; height:auto;">
             </header>
         </div>
 
diff --git a/assets/css/productpage.css b/assets/css/productpage.css
index 3759760..91e6b87 100644
--- a/assets/css/productpage.css
+++ b/assets/css/productpage.css
@@ -203,6 +203,16 @@
     .product-specs p:hover {
         transform: none;
     }
+
+    /* Wishlist button under image on mobile */
+    .product-left .auth__actions {
+        margin-top: 0.75rem;
+    }
+
+    .product-left .auth__submit {
+        font-size: 0.88rem;
+        min-height: 46px;
+    }
 }
 
 /* ==========================================================
diff --git a/header.php b/header.php
index 7536faa..270af5e 100644
--- a/header.php
+++ b/header.php
@@ -17,12 +17,26 @@
     <!-- Prevent tap-highlight on mobile -->
     <style>
         * { -webkit-tap-highlight-color: transparent; }
+        /* Safe area for notch phones */
+        body {
+            padding-left: env(safe-area-inset-left);
+            padding-right: env(safe-area-inset-right);
+        }
+        .header {
+            padding-left: env(safe-area-inset-left);
+            padding-right: env(safe-area-inset-right);
+        }
+        .footer {
+            padding-bottom: env(safe-area-inset-bottom);
+        }
         /* Mobile menu overlay */
         .nav__overlay {
             display: none;
             position: fixed;
             inset: 0;
             background: rgba(0,0,0,0.5);
+            backdrop-filter: blur(4px);
+            -webkit-backdrop-filter: blur(4px);
             z-index: 1000;
             opacity: 0;
             transition: opacity 300ms ease;
diff --git a/style.css b/style.css
index 7728710..a438f79 100755
--- a/style.css
+++ b/style.css
@@ -391,18 +391,38 @@ a:hover {
         width: 100%;
         position: static;
         transform: none;
+        margin-bottom: 0.5rem;
     }
 
     .nav__searchForm--mobile .nav__searchField {
         width: 100%;
     }
 
+    .nav__searchForm--mobile .nav__searchField::before {
+        content: "🔍";
+        position: absolute;
+        left: 12px;
+        top: 50%;
+        transform: translateY(-50%);
+        font-size: 0.8rem;
+        pointer-events: none;
+        opacity: 0.45;
+    }
+
     .nav__searchForm--mobile .nav__searchInput {
         width: 100%;
-        height: 44px;
-        padding: 0 16px;
-        font-size: 0.92rem;
+        height: 46px;
+        padding: 0 14px 0 36px;
+        font-size: 16px; /* Prevents iOS zoom */
         border-radius: var(--radius-md);
+        background: rgba(255, 255, 255, 0.05);
+        border: 1px solid var(--border-default);
+    }
+
+    .nav__searchForm--mobile .nav__searchInput:focus {
+        border-color: var(--color-primary);
+        background: rgba(255, 255, 255, 0.08);
+        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
     }
 
     .nav__list {
@@ -924,26 +944,6 @@ a:hover {
         max-width: 120px;
     }
 
-    /* Mobile search inside hamburger */
-    .nav__searchForm--mobile {
-        display: block;
-        width: 100%;
-        position: static;
-        transform: none;
-        margin-bottom: 1rem;
-    }
-
-    .nav__searchForm--mobile .nav__searchField {
-        width: 100%;
-    }
-
-    .nav__searchForm--mobile .nav__searchInput {
-        width: 100%;
-        height: 44px;
-        padding: 0 16px 0 42px;
-        font-size: 0.95rem;
-    }
-
     .container {
         padding-inline: 1rem;
     }
diff --git a/wunschliste.php b/wunschliste.php
index c1b02ba..c9d5b0c 100644
--- a/wunschliste.php
+++ b/wunschliste.php
@@ -66,8 +66,8 @@ if (!$conn)
             </section>
             </main>
         <?php else: ?>
-            <main style="padding: 3rem 2rem; text-align: center; animation: fadeInUp 0.5s ease both;">
-                <p style="color: var(--text-secondary); font-size: 1.1rem;">Deine Wunschliste ist noch leer.</p>
+            <main style="padding: 2rem 1rem; text-align: center; animation: fadeInUp 0.5s ease both;">
+                <p style="color: var(--text-secondary); font-size: 1rem;">Deine Wunschliste ist noch leer.</p>
             </main>
         <?php endif; ?>