From 1a94b27a224a6d24b59aac6a9e9fd66d58720cb5 Mon Sep 17 00:00:00 2001
From: Dotty Dotter <dotty@Mac.wideopen.space>
Date: Wed, 6 May 2026 15:57:40 +0200
Subject: [PATCH] ux(#171): Mobile-Polish fuer Tab-Bars + Drilldown-Modal

- auswertungen.html: .auswert-tabs scrollt jetzt horizontal (overflow-x:auto)
  + nowrap-Buttons + kleinere Padding/Font auf <600px.
- aktuelle-themen.html: .at-tab Buttons whitespace:nowrap, Tab-Container
  ebenfalls scrollbar.
- Drilldown-Modal: 8px statt 20px Padding aussen, Tabelle in
  overflow-x-Wrapper, max-height 90vh statt 80vh.

Visueller Test auf 375px steht aus (kein Browser im Build-Setup),
diese Aenderungen folgen aus statischer CSS-Audit.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 app/templates/v2/screens/aktuelle-themen.html |  6 +++++-
 app/templates/v2/screens/auswertungen.html    | 19 +++++++++++++++----
 2 files changed, 20 insertions(+), 5 deletions(-)

diff --git a/app/templates/v2/screens/aktuelle-themen.html b/app/templates/v2/screens/aktuelle-themen.html
index 63afa61..d613a35 100644
--- a/app/templates/v2/screens/aktuelle-themen.html
+++ b/app/templates/v2/screens/aktuelle-themen.html
@@ -100,6 +100,10 @@
   border-bottom: 1px dotted var(--ecg-border);
 }
 .at-match:last-child { border-bottom: none; }
+.at-tab { white-space: nowrap; }
+@media (max-width: 600px) {
+  .at-tab { padding: 6px 10px !important; font-size: 10px !important; }
+}
 .at-score-pill {
   display: inline-block;
   padding: 1px 7px;
@@ -183,7 +187,7 @@
 </div>
 
 <!-- Tabs -->
-<div class="auswert-tabs" role="tablist" style="display:flex;gap:4px;margin:1.5rem 0 1rem;border-bottom:2px solid var(--ecg-border);padding-bottom:0;">
+<div class="auswert-tabs" role="tablist" style="display:flex;gap:4px;margin:1.5rem 0 1rem;border-bottom:2px solid var(--ecg-border);padding-bottom:0;overflow-x:auto;-webkit-overflow-scrolling:touch;">
   <button class="at-tab active" role="tab" data-tab="news" onclick="switchAtTab('news', this)" style="font-family:var(--font-mono);font-size:11px;text-transform:uppercase;letter-spacing:0.06em;padding:6px 14px;border:none;background:none;cursor:pointer;color:var(--ecg-teal);opacity:1;border-bottom:2px solid var(--ecg-teal);margin-bottom:-2px;">News × Anträge</button>
   <button class="at-tab" role="tab" data-tab="cluster" onclick="switchAtTab('cluster', this)" style="font-family:var(--font-mono);font-size:11px;text-transform:uppercase;letter-spacing:0.06em;padding:6px 14px;border:none;background:none;cursor:pointer;color:var(--ecg-dark);opacity:0.55;border-bottom:2px solid transparent;margin-bottom:-2px;">Themen-Cluster</button>
   <button class="at-tab" role="tab" data-tab="antraege" onclick="switchAtTab('antraege', this)" style="font-family:var(--font-mono);font-size:11px;text-transform:uppercase;letter-spacing:0.06em;padding:6px 14px;border:none;background:none;cursor:pointer;color:var(--ecg-dark);opacity:0.55;border-bottom:2px solid transparent;margin-bottom:-2px;">GWÖ-Top-Anträge</button>
diff --git a/app/templates/v2/screens/auswertungen.html b/app/templates/v2/screens/auswertungen.html
index bf4b9d7..cb2044f 100644
--- a/app/templates/v2/screens/auswertungen.html
+++ b/app/templates/v2/screens/auswertungen.html
@@ -13,6 +13,15 @@
   margin-bottom: 1rem;
   border-bottom: 2px solid var(--ecg-border);
   padding-bottom: 0;
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+}
+.auswert-tab {
+  white-space: nowrap;
+}
+@media (max-width: 600px) {
+  .auswert-tabs { gap: 0; }
+  .auswert-tab { padding: 6px 10px; font-size: 10px; }
 }
 .auswert-tab {
   font-family: var(--font-mono);
@@ -971,9 +980,9 @@ async function openHeucheleiDrilldown(partei, bl) {
   if (!modal) {
     modal = document.createElement('div');
     modal.id = 'sv-heuchelei-modal';
-    modal.style.cssText = 'position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.6);z-index:9999;display:flex;align-items:center;justify-content:center;padding:20px;';
+    modal.style.cssText = 'position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.6);z-index:9999;display:flex;align-items:center;justify-content:center;padding:8px;';
     modal.innerHTML = `
-      <div style="background:var(--paper);max-width:760px;width:100%;max-height:80vh;overflow:auto;border-radius:8px;padding:24px;">
+      <div style="background:var(--paper);max-width:760px;width:100%;max-height:90vh;overflow:auto;border-radius:8px;padding:16px;">
         <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;">
           <h3 id="sv-heuchelei-modal-title" style="margin:0;font-family:var(--font-display);">…</h3>
           <button onclick="closeHeucheleiDrilldown()"
@@ -1005,7 +1014,8 @@ async function openHeucheleiDrilldown(partei, bl) {
       <p style="font-size:11px;font-family:var(--font-mono);opacity:0.6;margin-bottom:8px;">
         ${data.count} Treffer${data.items.length < data.count ? ` — Top ${data.items.length} angezeigt` : ''}.
       </p>
-      <table style="width:100%;border-collapse:collapse;font-size:12px;">
+      <div style="overflow-x:auto;">
+      <table style="width:100%;border-collapse:collapse;font-size:12px;min-width:520px;">
         <thead style="background:var(--ecg-card-bg);">
           <tr>
             <th style="padding:6px 10px;text-align:left;border-bottom:1px solid var(--ecg-border);">Drucksache</th>
@@ -1031,7 +1041,8 @@ async function openHeucheleiDrilldown(partei, bl) {
             </tr>
           `).join('')}
         </tbody>
-      </table>`;
+      </table>
+      </div>`;
   } catch (e) {
     document.getElementById('sv-heuchelei-modal-body').textContent = 'Fehler: ' + e;
   }