Fix mobile layout: Verbesserte Lösung für Sprachauswahl-Überlappung mit mehr Abstand

README.md

@@ -472,22 +472,23 @@ Damit ist die App für Menschen mit unterschiedlichen Einschränkungen (z.B. Seh
 
 ### Code Statistik
 
-cloc|github.com/AlDanial/cloc v 2.06  T=0.08 s (269.8 files/s, 57268.4 lines/s)
+cloc|github.com/AlDanial/cloc v 2.06  T=0.08 s (301.6 files/s, 72354.1 lines/s)
 --- | ---
 
 Language|files|blank|comment|code
 :-------|-------:|-------:|-------:|-------:
-HTML|8|36|6|1998
-Python|2|53|57|614
+HTML|8|47|6|2086
+Python|2|59|68|690
 JavaScript|2|95|87|571
-Markdown|2|139|0|360
+Markdown|3|176|0|492
+PO File|2|234|240|492
 JSON|3|0|0|243
 CSS|1|186|3|188
 SVG|2|0|0|14
 Dockerfile|1|5|6|8
 DOS Batch|1|0|0|1
 --------|--------|--------|--------|--------
-SUM:|22|514|159|3997
+SUM:|25|802|410|4785
 
 ## Lizenz
 

app.py

@@ -20,7 +20,7 @@ app.config['BABEL_TRANSLATION_DIRECTORIES'] = 'translations'
 babel = Babel()
 
 # Version der App
-APP_VERSION = "1.4.0"
+APP_VERSION = "1.4.5"
 
 # HTML-Template wird jetzt aus templates/index.html geladen
 

cookies.txt

@@ -1,5 +0,0 @@
-# Netscape HTTP Cookie File
-# https://curl.se/docs/http-cookies.html
-# This file was generated by libcurl! Edit at your own risk.
-
-#HttpOnly_localhost	FALSE	/	FALSE	0	session	eyJsYW5ndWFnZSI6ImVuIn0.aIzL2Q.DZtPH-UmM3muNC8RZypEbL29jCg

templates/index.html

@@ -40,6 +40,11 @@
 * {
     box-sizing: border-box;
 }
+
+html {
+    overflow-x: hidden;
+    width: 100%;
+}
 body {
     background: var(--background);
     color: var(--text);
@@ -47,7 +52,10 @@ body {
     margin: 0;
     padding: 0;
     overflow-x: hidden;
+    overflow-y: auto;
     box-sizing: border-box;
+    min-height: 100vh;
+    width: 100%;
 }
 .container {
     max-width: 480px;
@@ -60,6 +68,7 @@ body {
     border: 1px solid var(--border);
     position: relative;
     box-sizing: border-box;
+    overflow: hidden;
 }
 .help-button-container {
     position: absolute;
@@ -145,8 +154,9 @@ body {
     padding: 2em;
     max-width: 90%;
     width: 90%;
-    max-height: 90%;
+    max-height: 90vh;
     overflow-y: auto;
+    overflow-x: hidden;
     position: relative;
     box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
     margin: 0 auto;
@@ -345,6 +355,7 @@ button:focus, .accordion-header:focus {
     /* Layout-Shift-Prävention */
     min-height: 200px;
     contain: layout style paint;
+    width: 100%;
 }
 .accordion-item + .accordion-item {
     border-top: 1px solid var(--border);
@@ -374,6 +385,7 @@ button:focus, .accordion-header:focus {
     overflow: hidden;
     transition: max-height 0.3s ease-out, padding 0.3s ease-out;
     opacity: 0;
+    width: 100%;
 }
 .accordion-content.active {
     display: block;
@@ -459,6 +471,10 @@ button:focus, .accordion-header:focus {
         padding: 1.2em 0.7em 1em 0.7em;
         width: calc(100% - 2em);
         max-width: none;
+        overflow: hidden;
+    }
+    .header-section {
+        margin-top: 4.5em; /* Mehr Abstand für Sprachauswahl und Hilfe-Button */
     }
     h1 {
         font-size: 1.3em;
@@ -494,8 +510,11 @@ button:focus, .accordion-header:focus {
         margin: 1em;
         width: calc(100% - 2em);
         max-width: none;
+        max-height: 85vh;
         left: 0;
         transform: none;
+        overflow-y: auto;
+        overflow-x: hidden;
     }
 }
 
@@ -602,7 +621,11 @@ footer br + a {
         function changeLanguage(language) {
             // Speichere Sprache in localStorage (datenschutzfreundlich)
             localStorage.setItem('preferred_language', language);
-            window.location.href = '/set_language/' + language;
+            
+            // Erstelle neue URL mit korrektem lang-Parameter
+            const currentUrl = new URL(window.location.href);
+            currentUrl.searchParams.set('lang', language);
+            window.location.href = currentUrl.toString();
         }
         function openAccordion(idx) {
             const headers = document.querySelectorAll('.accordion-header');
@@ -776,7 +799,7 @@ footer br + a {
                 <option value="en" {% if get_locale() == 'en' %}selected{% endif %}>{{ _('English') }}</option>
             </select>
         </div>
-        <div style="text-align:center; margin-bottom:1.2em;">
+        <div class="header-section" style="text-align:center; margin-bottom:1.2em;">
             <div style="font-size:1.1em; font-style:italic; color:#475569;">{{ _('Elpatrons') }}</div>
             <h1 style="margin:0;">{{ _('Datumsrechner') }}</h1>
             <div style="font-size:0.9em; color:#1e293b; margin-top:0.3em;">
@@ -832,7 +855,7 @@ footer br + a {
                                 </select>
                             </label>
                         </fieldset>
-                        <button name="action" value="tage_werktage" type="submit">Berechnen</button>
+                        <button name="action" value="tage_werktage" type="submit">{{ _('Berechnen') }}</button>
                     </form>
                     {% if tage is not none %}
                         <div class="result" aria-live="polite">