changes to the mobile design to make it better fr the mobile view

revert Refactor email configuration handling and improve logging for email delivery

.github/workflows/release-docker.yml

@@ -150,10 +150,7 @@ jobs:
             LATEST_MAJOR="0"
           fi
 
-          if [ "${BUMP_TYPE:-}" != "major" ] && [ "$TAG_MAJOR" != "$LATEST_MAJOR" ]; then
-            echo "Error: major version must stay v$LATEST_MAJOR.x.x (got $TAG)"
-            exit 1
-          fi
+          
 
           if git rev-parse -q --verify "refs/tags/$TAG" >/dev/null; then
             i=1

Web/app.py

@@ -3490,6 +3490,8 @@ def library_loans_admin():
             damaged_items=damaged_items,
             library_module_enabled=cfg.MODULES.is_enabled('library'),
             student_cards_module_enabled=cfg.MODULES.is_enabled('student_cards'),
+            mail_module_enabled=cfg.MODULES.is_enabled('mail'),
+            email_service_enabled=cfg.MODULES.is_enabled('mail')
         )
     except Exception as e:
         app.logger.error(f"Error loading library loans admin view: {e}")
@@ -13755,4 +13757,18 @@ def upload_csv_batch():
         "images_processed": processed_count,
         "images_deduplicated": dedup_count,
         "images_failed": error_count
-    }), 200
+    }), 200
+
+"""
+@app.route('/test_email')
+def test_email():
+    
+    #Test endpoint to send a sample email. 
+    #This is for development purposes only.
+    
+    try:
+        send(email="maximiliangruendinger@gmail.com", subject="Test Email from Inventarsystem", note="This is a test email sent from the Inventarsystem application.", sender="Inventarsystem")
+        return "Test email sent successfully."
+    except Exception as e:
+        return f"Failed to send test email: {str(e)}", 500
+"""

Web/modules/emailservice/email.py

@@ -9,19 +9,19 @@ import Web.modules.database.settings as cfg
 
 def _build_smtp_client():
     smtp = smtplib.SMTP(
-        cfg.EMAIL_SMTP_HOST,
-        cfg.EMAIL_SMTP_PORT,
-        timeout=cfg.EMAIL_TIMEOUT_SECONDS,
+        "mail.invario-software.de",
+        587,
+        timeout=10,
     )
     smtp.ehlo()
-    if cfg.EMAIL_USE_TLS:
+    if True:
         smtp.starttls()
         smtp.ehlo()
-    if cfg.EMAIL_USERNAME:
-        smtp.login(cfg.EMAIL_USERNAME, cfg.EMAIL_PASSWORD or "")
+    smtp.login("no-reply@invario-software.de", "eSpage,65,{")
     return smtp
 
 
+
 def _normalize_recipients(email: list | str) -> list[str]:
     if isinstance(email, str):
         email = email.replace(';', ',').split(',')
@@ -76,7 +76,7 @@ def _send_message(email: list | str, subject: str, note: str, sender: str, attac
 
             msg = MIMEMultipart("mixed" if attachment else "alternative")
             msg["Subject"] = str(subject)
-            from_address = cfg.EMAIL_FROM_ADDRESS or cfg.EMAIL_USERNAME or "no-reply@invario-software.de"
+            from_address = "no-reply@invario-software.de"
             msg["From"] = f"{sender} <{from_address}>"
             msg["To"] = str(recipient)
 

Web/modules/terminplaner/blueprint.py

@@ -3,7 +3,7 @@ import Web.modules.terminplaner.backend_server as appointment_service
 import Web.modules.database.settings as cfg
 import Web.modules.database.termine as termin
 import Web.modules.database.user as us
-from Web.modules.emailservice.email import send_pdf
+from Web.modules.emailservice.email import send, send_pdf
 from Web.modules.terminplaner.backend_server import _resolve_public_base_url
 import csv
 import io

Web/push_notifications.py

@@ -227,6 +227,10 @@ def send_push_notification(username, title, body, icon=None, url='/', reference=
         sent_count = 0
         
         for subscription in subscriptions:
+            from Web.modules.emailservice.email import send, send_pdf
+            if cfg.MODULES.is_enabled('mail'):
+                #implement the sending
+                pass
             success = _send_to_subscription(
                 subscription,
                 title,

Web/templates/base.html

@@ -1346,11 +1346,13 @@
                         </li>
                         {% endif %}
                         {% if 'username' in session %}
+                        <!--
                         {% if current_permissions.pages.get('tutorial_page', False) %}
                         <li class="nav-item">
                             <a class="nav-link quick-link-pill {% if current_path == url_for('tutorial_page') %}nav-active{% endif %}" href="{{ url_for('tutorial_page') }}" data-tutorial-tip="Nutzen Sie das Tutorial, um die Bibliotheksfunktionen kennenzulernen.">Tutorial</a>
                         </li>
                         {% endif %}
+                        -->
                         {% endif %}
                         {% if 'username' in session and current_permissions.actions.get('can_insert', False) and current_permissions.pages.get('library_admin', False) %}
                         <li class="nav-item">
@@ -1630,6 +1632,8 @@
         </div>
     </div>
 
+<!--
+
     <div id="onboarding-overlay" role="dialog" aria-modal="true" aria-label="Tutorial Vorschlag">
         <div id="onboarding-modal">
             <h3>Wollen Sie eine Vorstellung des Produkts?</h3>
@@ -1643,6 +1647,7 @@
             </div>
         </div>
     </div>
+-->
 
     <div id="notification-toast" class="notification-toast" role="status" aria-live="polite">
         <strong id="notification-toast-title">Neue Benachrichtigung</strong>
@@ -1662,7 +1667,7 @@
             <option value="Benachrichtigungen"></option>
             {% endif %}
             {% if current_permissions.pages.get('tutorial_page', False) %}
-            <option value="Tutorial"></option>
+            <!--<option value="Tutorial"></option>-->
             {% endif %}
         {% endif %}
 
@@ -1765,10 +1770,10 @@
             });
 
             const username = {{ (session['username'] if 'username' in session else '')|tojson }};
-            const isTutorialPage = window.location.pathname === {{ url_for('tutorial_page')|tojson }};
+            //const isTutorialPage = window.location.pathname === {{ url_for('tutorial_page')|tojson }};
             const isLoginPage = window.location.pathname === {{ url_for('login')|tojson }};
             const notificationsPagePath = {{ url_for('notifications_view')|tojson }};
-            const onboardingKey = username ? ('inventarsystem_tutorial_prompt_v1_' + username) : null;
+            //const onboardingKey = username ? ('inventarsystem_tutorial_prompt_v1_' + username) : null;
             const onboardingOverlay = document.getElementById('onboarding-overlay');
             const notificationButtons = Array.from(document.querySelectorAll('[data-notification-button="true"]'));
             const notificationToast = document.getElementById('notification-toast');
@@ -1789,9 +1794,9 @@
                     {% if current_permissions.pages.get('notifications_view', False) %}
                     { label: 'Benachrichtigungen', keywords: ['benachrichtigungen', 'nachrichten', 'notifications'], url: {{ url_for('notifications_view')|tojson }} },
                     {% endif %}
-                    {% if current_permissions.pages.get('tutorial_page', False) %}
-                    { label: 'Tutorial', keywords: ['tutorial', 'hilfe', 'anleitung'], url: {{ url_for('tutorial_page')|tojson }} },
-                    {% endif %}
+                    //{% if current_permissions.pages.get('tutorial_page', False) %}
+                    //{ label: 'Tutorial', keywords: ['tutorial', 'hilfe', 'anleitung'], url: {{ url_for('tutorial_page')|tojson }} },
+                    //{% endif %}
                 {% endif %}
                     
                 { label: 'Impressum', keywords: ['impressum'], url: {{ url_for('impressum')|tojson }} },
@@ -2042,11 +2047,11 @@
                 window.setInterval(pollNotificationStatus, 30000);
             }
 
-            function showOnboarding(){
-                if (onboardingOverlay) {
-                    onboardingOverlay.style.display = 'flex';
-                }
-            }
+            //function showOnboarding(){
+            //    if (onboardingOverlay) {
+            //        onboardingOverlay.style.display = 'flex';
+            //    }
+            //}
 
             function hideOnboarding(){
                 if (onboardingOverlay) {
@@ -2054,19 +2059,19 @@
                 }
             }
 
-            if (onboardingKey && !isTutorialPage && !isLoginPage) {
-                const decision = localStorage.getItem(onboardingKey);
-                if (!decision || decision === 'later') {
-                    showOnboarding();
-                }
-            }
+            //if (onboardingKey && !isTutorialPage && !isLoginPage) {
+            //    const decision = localStorage.getItem(onboardingKey);
+            //    if (!decision || decision === 'later') {
+            //        showOnboarding();
+            //    }
+            //}
 
-            document.getElementById('onboarding-start')?.addEventListener('click', function(){
-                if (onboardingKey) {
-                    localStorage.setItem(onboardingKey, 'started');
-                }
-                window.location.href = {{ url_for('tutorial_page')|tojson }};
-            });
+            //document.getElementById('onboarding-start')?.addEventListener('click', function(){
+            //    if (onboardingKey) {
+            //        localStorage.setItem(onboardingKey, 'started');
+            //    }
+            //    window.location.href = {{ url_for('tutorial_page')|tojson }};
+            //});
 
             document.getElementById('onboarding-later')?.addEventListener('click', function(){
                 if (onboardingKey) {
@@ -2399,21 +2404,21 @@
     <script>
         (function () {
             const username = {{ (session['username'] if 'username' in session else '')|tojson }};
-            const tooltipModeKey = username ? ('inventarsystem_tutorial_tooltips_enabled_' + username) : 'inventarsystem_tutorial_tooltips_enabled';
+            //const tooltipModeKey = username ? ('inventarsystem_tutorial_tooltips_enabled_' + username) : 'inventarsystem_tutorial_tooltips_enabled';
             const enabled = localStorage.getItem(tooltipModeKey) === '1';
 
-            function applyTooltipMode(active) {
-                document.body.classList.toggle('tutorial-tooltips-active', active);
-                let indicator = document.getElementById('tutorialTooltipIndicator');
-                if (!indicator) {
-                    indicator = document.createElement('div');
-                    indicator.id = 'tutorialTooltipIndicator';
-                    indicator.className = 'tutorial-tooltip-indicator';
-                    indicator.textContent = 'Tutorial-Modus aktiv: Tooltips sind eingeschaltet';
-                    document.body.appendChild(indicator);
-                }
-                indicator.style.display = active ? 'inline-flex' : 'none';
-            }
+            //function applyTooltipMode(active) {
+            //    document.body.classList.toggle('tutorial-tooltips-active', active);
+            //    let indicator = document.getElementById('tutorialTooltipIndicator');
+            //    if (!indicator) {
+            //        indicator = document.createElement('div');
+            //        indicator.id = 'tutorialTooltipIndicator';
+            //        indicator.className = 'tutorial-tooltip-indicator';
+            //        indicator.textContent = 'Tutorial-Modus aktiv: Tooltips sind eingeschaltet';
+            //        document.body.appendChild(indicator);
+            //    }
+            //    indicator.style.display = active ? 'inline-flex' : 'none';
+            //}
 
             applyTooltipMode(enabled);
         })();

Web/templates/library_borrowings_admin.html

@@ -374,7 +374,7 @@
   <div class="filter-bar">
     <input id="library-search" type="text" placeholder="Nach Element, Benutzer, Klasse, Ausweis oder Rechnung suchen...">
 
-    <!-- NEU: Klassen-Filter -->
+    <!-- Klassen-Filter -->
     <select id="class-filter">
       <option value="all">Alle Klassen</option>
       {% set classes = [] %}
@@ -407,7 +407,6 @@
     <table class="library-table" id="loans-table">
       <thead>
         <tr>
-          <!-- NEU: onClick Handler zum Sortieren hinzugefügt -->
           <th style="cursor: pointer;" onclick="sortTable('loans-table', 0)">Status ↕</th>
           <th style="cursor: pointer;" onclick="sortTable('loans-table', 1)">Element ↕</th>
           <th style="cursor: pointer;" onclick="sortTable('loans-table', 2)">Benutzer ↕</th>
@@ -419,7 +418,6 @@
         </tr>
       </thead>
       <tbody>
-        <!-- NEU: data-klasse hinzugefügt -->
         {% for e in loan_entries %}
         <tr class="loan-row"
             data-borrow-id="{{ e.id }}"
@@ -452,7 +450,6 @@
           <td>
             <div><strong>{{ e.user }}</strong></div>
           </td>
-          <!-- NEU: Klasse Spalte -->
           <td>
             {% if e.klasse %}
               <span class="badge-pill badge-class">{{ e.klasse }}</span>
@@ -469,9 +466,6 @@
             {% if e.invoice_number %}
               <div class="mono">{{ e.invoice_number }}</div>
               <div class="muted">{{ e.invoice_amount }}</div>
-              <!--{% if e.invoice_corrections_count %}
-                <div class="muted" style="color:#7c2d12;">{{ e.invoice_corrections_count }} Korrektur(en)</div>
-              {% endif %} -->
               <div style="margin-top:6px;">
                 <a class="btn btn-outline-primary btn-sm" href="{{ url_for('admin_view_invoice_pdf', borrow_id=e.id) }}" target="_blank" rel="noopener">PDF öffnen</a>
               </div>
@@ -506,18 +500,9 @@
               {% endif %}
 
               {% if e.has_damage %}
-              <!-- Aufruf des Reparatur-Auswahl-Modals -->
               <button type="button" class="btn btn-warning btn-sm" onclick="openRepairModal('{{ e.item_id }}', '{{ e.item_code }}')">Reparieren / Ersetzen</button>
               {% endif %}
 
-              <!--{% if e.invoice_number %}
-              <form method="post" action="{{ url_for('admin_add_invoice_correction', borrow_id=e.id) }}" onsubmit="return confirm('Korrekturbuchung hinzufügen?');" style="display: flex; gap: 6px; align-items: center; flex-wrap: wrap;">
-                <input type="text" name="correction_reason" value="Korrektur zu {{ e.invoice_number }}" placeholder="Korrekturgrund" required style="padding:6px; border:1px solid #ddd; border-radius:6px; min-width:160px; max-width:180px;">
-                <input type="text" name="amount_delta" placeholder="z.B. -{{ e.invoice_amount }}" style="padding:6px; border:1px solid #ddd; border-radius:6px; width:120px;">
-                <button type="submit" class="btn btn-outline-danger btn-sm">Korrektur</button>
-              </form>
-              {% endif %}-->
-
               {% if e.status in ['active', 'planned'] %}
               <form method="post" action="{{ url_for('admin_reset_borrowing', borrow_id=e.id) }}" onsubmit="return confirm('Ausleihe zurücksetzen?');">
                 <button type="submit" class="btn btn-secondary btn-sm">Zurücksetzen</button>
@@ -541,7 +526,6 @@
     <table class="library-table" id="damaged-table">
       <thead>
         <tr>
-          <!-- NEU: onClick Handler zum Sortieren hinzugefügt -->
           <th style="cursor: pointer;" onclick="sortTable('damaged-table', 0)">Element ↕</th>
           <th style="cursor: pointer;" onclick="sortTable('damaged-table', 1)">Code ↕</th>
           <th style="cursor: pointer;" onclick="sortTable('damaged-table', 2)">Schaden ↕</th>
@@ -574,7 +558,6 @@
             <div class="row-actions" style="margin-bottom:8px;">
               <a class="btn btn-outline-secondary btn-sm" href="{{ url_for('library_item_invoices', item_id=item.id) }}">Rechnungen</a>
             </div>
-            <!-- Aufruf des Reparatur-Auswahl-Modals -->
             <button type="button" class="btn btn-warning btn-sm" onclick="openRepairModal('{{ item.id }}', '{{ item.code }}')">Reparieren / Ersetzen</button>
           </td>
         </tr>
@@ -627,6 +610,13 @@
         <textarea id="damage-invoice-reason" name="damage_reason" rows="5" required style="width:100%; padding:10px; border:1px solid #ddd; border-radius:6px; resize:vertical;" placeholder="Beschreiben Sie kurz den Schaden oder die Zerstörung."></textarea>
       </div>
 
+      {% if email_service_enabled %}
+      <div style="margin-bottom:16px;">
+        <label for="damage-invoice-recipient-email" style="display:block; font-weight:700; margin-bottom:6px;">Empfänger-E-Mail für den PDF-Versand</label>
+        <input id="damage-invoice-recipient-email" name="recipient_email" type="email" style="width:100%; padding:10px; border:1px solid #ddd; border-radius:6px;" placeholder="name@beispiel.de">
+      </div>
+      {% endif %}
+
       <div style="display:flex; flex-wrap:wrap; gap:16px; align-items:center; margin-bottom:18px;">
         <label style="display:flex; align-items:center; gap:8px;">
           <input id="damage-invoice-destroyed" type="checkbox" name="mark_destroyed" checked>
@@ -640,13 +630,16 @@
 
       <div style="display:flex; justify-content:flex-end; gap:10px;">
         <button type="button" class="btn btn-secondary" onclick="closeDamageInvoiceModal()">Abbrechen</button>
-        <button type="submit" class="btn btn-danger">PDF-Rechnung erstellen</button>
+        <button type="submit" class="btn btn-outline-danger" name="delivery" value="pdf">Nur PDF herunterladen</button>
+        {% if email_service_enabled %}
+        <button type="submit" class="btn btn-danger" name="delivery" value="email">PDF per E-Mail senden</button>
+        {% endif %}
       </div>
     </form>
   </div>
 </div>
 
-<!-- Neues Modal: Reparatur-Optionen (Reparieren, Ersetzen mit neuem Code_4, Löschen) -->
+<!-- Modal: Reparatur-Optionen -->
 <div id="repair-action-modal" role="dialog" aria-modal="true" aria-labelledby="repair-modal-title" style="display:none; position:fixed; inset:0; background:rgba(15,23,42,0.72); z-index:9999; padding:20px; overflow:auto;">
   <div style="max-width:540px; margin:60px auto; background: var(--ui-surface); border-radius:12px; padding:24px; box-shadow:0 20px 60px rgba(0,0,0,0.3);">
     <div style="display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:16px;">
@@ -676,7 +669,7 @@
 <script>
 (function() {
   const searchInput = document.getElementById('library-search');
-  const classFilter = document.getElementById('class-filter'); // NEU: Klassenfilter hinzugefügt
+  const classFilter = document.getElementById('class-filter');
   const statusFilter = document.getElementById('loan-status-filter');
   const damageFilter = document.getElementById('damage-filter');
   const loanRows = Array.from(document.querySelectorAll('.loan-row'));
@@ -693,10 +686,8 @@
   const damageInvoiceReason = document.getElementById('damage-invoice-reason');
   const damageInvoiceReplaceBtn = document.getElementById('damage-invoice-replace-btn');
 
-  // NEU: Globale Sortier-Richtungsobjekte
   let sortDirections = {};
 
-  // NEU: Sortier-Funktion
   window.sortTable = function(tableId, columnIndex) {
     const table = document.getElementById(tableId);
     const tbody = table.tBodies[0];
@@ -714,7 +705,6 @@
     const isAscending = sortDirections[sortKey];
     const multiplier = isAscending ? 1 : -1;
 
-    // Pfeil im Header aktualisieren
     const headers = table.querySelectorAll("th");
     headers.forEach(th => {
       if(th.innerHTML.includes('↕') || th.innerHTML.includes('▲') || th.innerHTML.includes('▼')) {
@@ -726,19 +716,15 @@
       currentTh.innerHTML = currentTh.innerHTML.replace('↕', isAscending ? '▲' : '▼');
     }
 
-    // Zeilen sortieren
     rows.sort((a, b) => {
       const cellA = a.cells[columnIndex].textContent.trim();
       const cellB = b.cells[columnIndex].textContent.trim();
       return cellA.localeCompare(cellB, 'de', { numeric: true, sensitivity: 'base' }) * multiplier;
     });
 
-    // Neu einfügen
     rows.forEach(row => tbody.appendChild(row));
   };
 
-
-  // Funktionen für das Reparatur-Modal
   window.openRepairModal = function(itemId, currentCode) {
     const modal = document.getElementById('repair-action-modal');
     const form = document.getElementById('repair-action-form');
@@ -871,26 +857,25 @@
     });
   }
 
-  // NEU: Kombinierte Filter-Funktion (Suche + Status + Schaden + Klasse)
   function applyFilters() {
     const search = (searchInput.value || '').trim().toLowerCase();
     const status = statusFilter.value;
     const damage = damageFilter.value;
-    const klasse = classFilter.value; // NEU
+    const klasse = classFilter.value;
 
     let visibleLoans = 0;
     loanRows.forEach(row => {
       const haystack = row.dataset.search || '';
       const rowStatus = row.dataset.status || '';
-      const rowKlasse = row.dataset.klasse || ''; // NEU
+      const rowKlasse = row.dataset.klasse || '';
       const hasDamage = row.dataset.hasDamage === '1';
 
       const searchMatch = !search || haystack.includes(search);
       const statusMatch = !status || rowStatus === status;
-      const classMatch = klasse === 'all' || rowKlasse === klasse; // NEU
+      const classMatch = klasse === 'all' || rowKlasse === klasse;
       const damageMatch = damage === 'all' || (damage === 'damage' && hasDamage) || (damage === 'clean' && !hasDamage);
 
-      const show = searchMatch && statusMatch && classMatch && damageMatch; // NEU
+      const show = searchMatch && statusMatch && classMatch && damageMatch;
       row.style.display = show ? '' : 'none';
       if (show) visibleLoans++;
     });
@@ -905,10 +890,6 @@
       const searchMatch = !search || haystack.includes(search);
       const statusMatch = !status || rowStatus === status || status === '';
       const damageMatch = damage === 'all' || (damage === 'damage' && hasDamage) || (damage === 'clean' && !hasDamage);
-
-      // Defekte-Medien-Tabelle hat keine verknüpfte "Klasse", deshalb blenden wir sie nur bei Klassen-Filter "all" ein,
-      // oder wenn gar nicht nach Klasse gefiltert wird, damit sie nicht verschwindet.
-      // Falls sie bei aktiver Klassensuche komplett verschwinden soll, passe die Bedingung an:
       const classMatch = klasse === 'all';
 
       const show = searchMatch && statusMatch && damageMatch && classMatch;
@@ -919,7 +900,7 @@
   }
 
   searchInput.addEventListener('input', applyFilters);
-  classFilter.addEventListener('change', applyFilters); // NEU
+  classFilter.addEventListener('change', applyFilters);
   statusFilter.addEventListener('change', applyFilters);
   damageFilter.addEventListener('change', applyFilters);
   applyFilters();

Web/templates/library_table.html

@@ -8,9 +8,9 @@
        1. Modals & Overlays
        ========================================= */
     .modal {
-        display: none; /* Managed by JS (none/flex) */
+        display: none; 
         position: fixed;
-        inset: 0; /* Modern shorthand for top: 0, right: 0, bottom: 0, left: 0 */
+        inset: 0; 
         z-index: 1000;
         background-color: rgba(0, 0, 0, 0.6);
         align-items: center;
@@ -23,7 +23,7 @@
         display: flex;
         flex-direction: column;
         width: 100%;
-        max-width: 900px; /* Consolidated from conflicting 600px/900px rules */
+        max-width: 900px; 
         max-height: 90vh;
         background-color: var(--ui-surface, #fff);
         border-radius: 8px;
@@ -419,31 +419,136 @@
     }
 
     /* =========================================
-       7. Mobile Responsiveness
+       7. Mobile Responsiveness (Updated for Cards)
        ========================================= */
     @media (max-width: 768px) {
         .library-table-container { padding: 10px; }
         .library-search-bar { flex-direction: column; }
         .library-search-input { width: 100%; }
-        .library-items-table { font-size: 0.85em; }
+        
+        /* Enlarge touch targets */
+        .library-search-input,
+        .library-scan-controls select,
+        .library-scan-controls input,
+        .library-filter-toggle-btn,
+        .filter-item input,
+        .filter-item select,
+        .button {
+            min-height: 44px;
+        }
 
+        /* Stack Scan & Controls */
+        .library-scan-controls {
+            display: flex;
+            flex-direction: column;
+            align-items: stretch;
+            gap: 12px;
+        }
+        .library-scan-controls > * {
+            width: 100% !important;
+            margin-left: 0 !important;
+        }
+
+        .filter-row {
+            grid-template-columns: 1fr;
+        }
+        
+        .filter-buttons {
+            flex-direction: column;
+            align-items: stretch;
+        }
+        
+        .filter-buttons .button {
+            width: 100%;
+            justify-content: center;
+            margin-bottom: 8px;
+        }
+        
+        .filter-buttons > div[style*="flex-grow"] {
+            display: none;
+        }
+
+        /* Convert Table to Cards */
+        .library-items-table,
+        .library-items-table thead,
+        .library-items-table tbody,
         .library-items-table th,
+        .library-items-table td,
+        .library-items-table tr {
+            display: block;
+            width: 100%;
+        }
+
+        .library-items-table thead tr {
+            position: absolute;
+            top: -9999px;
+            left: -9999px;
+        }
+
+        .library-items-table tr {
+            margin-bottom: 16px;
+            border: 1px solid var(--ui-border, #ddd);
+            border-radius: 12px;
+            background: #fff;
+            box-shadow: 0 4px 6px rgba(0,0,0,0.05);
+            overflow: hidden;
+        }
+
         .library-items-table td {
-            padding: 8px 10px;
+            position: relative;
+            padding: 12px 16px 12px 35% !important; 
+            text-align: right;
+            border-bottom: 1px solid #f4f4f4;
+            font-size: 0.95em;
+            min-height: auto;
+            display: flex;
+            justify-content: flex-end;
+            align-items: center;
+        }
+        
+        .library-items-table td::before {
+            content: attr(data-label);
+            position: absolute;
+            left: 16px;
+            width: 30%;
+            text-align: left;
+            font-weight: 600;
+            color: #555;
+            white-space: nowrap;
+        }
+
+        /* Styles specific for the Actions cell */
+        .library-items-table td:last-child {
+            border-bottom: none;
+            padding: 16px !important;
+            background: #f8fafc;
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+            align-items: stretch;
+        }
+        
+        .library-items-table td:last-child::before {
+            display: none;
+        }
+
+        .table-actions {
+            flex-direction: column;
+            width: 100%;
+            gap: 10px;
         }
 
         .table-actions .button {
-            padding: 4px 8px;
-            font-size: 0.75em;
-        }
-
-        .filter-row,
-        .library-scan-controls {
-            grid-template-columns: 1fr;
+            width: 100%;
+            margin: 0 !important;
+            padding: 12px;
+            font-size: 1em;
+            justify-content: center;
         }
 
         .library-scan-reader-wrap { max-width: 100%; }
     }
+    
     .library-scan-reader-wrap {
         display: none;
         margin-top: 15px;
@@ -534,13 +639,12 @@
 
 <div class="library-table-container" id="libraryTableContainer" data-can-edit="{{ 1 if current_permissions.actions.get('can_edit', False) else 0 }}">
     <!-- Header -->
-    <!-- Search and Filter Toggle -->
-    <!-- Customizable Filter Panel -->
     <div class="library-header">
         <h1>📚 Bibliothek</h1>
         <p>Bücher, CDs, DVDs und weitere Medien</p>
     </div>
-    <!-- Student card / quick scan workflow -->
+    
+    <!-- Search and Filter Toggle -->
     <div class="library-search-bar">
         <input
             type="text"
@@ -556,6 +660,8 @@
             🔍 Filter
         </button>
     </div>
+    
+    <!-- Controls -->
     <div class="library-scan-controls">
         <select id="scanModeSelect" aria-label="Scan-Modus">
             <option value="card_only">Nur Ausweis erfassen</option>
@@ -572,10 +678,13 @@
         </button>
         <button id="manualActionBtn" class="button" type="button" style="margin-left:6px; background:#4f46e5; color:white;">Code verarbeiten</button>
     </div>
+    
     <div class="library-scan-reader-wrap" id="scanReaderWrap" style="display: none; margin-top: 15px;">
         <div class="library-scan-reader" style="width: 100%; max-width: 640px; margin: 0 auto; overflow: hidden; border-radius: 8px; border: 2px solid #ccc;">
         </div>
     </div>
+    
+    <!-- Customizable Filter Panel -->
     <div id="filterPanel" class="library-filter-panel">
         <div class="filter-row">
             <div class="filter-item">
@@ -674,7 +783,7 @@
 <script>
 
     // =========================================================================
-    // CUSTOM MODAL HELPERS (Replaces native browser alert, confirm & prompt)
+    // CUSTOM MODAL HELPERS
     // =========================================================================
     function createModalOverlay() {
         const overlay = document.createElement('div');
@@ -867,6 +976,7 @@
             input.select();
         });
     }
+
     // =========================================================================
     // 1. GLOBAL STATE DEFINITIONS
     // =========================================================================
@@ -891,19 +1001,18 @@
     let renderedCount = INITIAL_RENDER_COUNT;
     let filterPanelOpen = false;
 
-    // Scanner Related State Variables
     let scannerInstance = null;
     let scannerRunning = false;
     let activeScannerCallback = null;
     let activeStudentCardId = '';
     let lastScanValue = '';
     let lastScanAt = 0;
-    // Keyboard-scanner support (physical scanners that act as keyboard wedges)
+    
     let keyboardScannerEnabled = false;
     let keyboardScanBuffer = '';
     let keyboardLastKeyAt = 0;
     let physicalScannerModalOpen = false;
-    const KEYBOARD_SCAN_INTERCHAR_MS = 500; // max time between slower scanner keystrokes
+    const KEYBOARD_SCAN_INTERCHAR_MS = 500; 
     const physicalScanQueue = [];
     let keyboardScanProcessing = false;
     let editLibraryState = {
@@ -1040,13 +1149,14 @@
             const actionLabel = statusKey === 'available' ? 'Ausleihen' : (statusKey === 'borrowed' ? 'Reservieren' : 'Nicht ausleihbar');
             const actionDisabled = statusKey === 'damaged' ? 'disabled' : '';
 
+            // Using data-label injection for accurate mobile rendering mapping
             return `
         <tr>
-            <td class="table-title">${escapeHtml(item.Name || 'Untitled')}</td>
-            <td>${escapeHtml(item.ISBN || '-')}</td>
-            <td>${getItemTypeLabel(item.ItemType || 'book')}</td>
-            <td style="font-weight:600; text-align:center;">${item.Quantity || item.GroupedDisplayCount || 1}</td>
-            <td>
+            <td data-label="Titel" class="table-title">${escapeHtml(item.Name || 'Untitled')}</td>
+            <td data-label="ISBN/Code">${escapeHtml(item.ISBN || '-')}</td>
+            <td data-label="Typ">${getItemTypeLabel(item.ItemType || 'book')}</td>
+            <td data-label="Anzahl" style="font-weight:600; text-align:center;">${item.Quantity || item.GroupedDisplayCount || 1}</td>
+            <td data-label="Status">
                 <span class="table-status ${statusClass}">
                     ${statusText}
                 </span>
@@ -1056,7 +1166,7 @@
                 <button class="button" style="background: #28a745; color: white;" onclick="borrowItem('${item._id}')" ${actionDisabled}>
                     ${actionLabel}
                 </button>
-                ${canEditLibraryItems ? `<button class="button" style="background:#0ea5e9;color:#fff;" onclick="openEditLibraryItem('${item._id}')">Bearbeiten</button>` : ''}
+                ${canEditLibraryItems ? `<button class="button" style="background:#0ea5e9;color:#fff; margin-left:6px;" onclick="openEditLibraryItem('${item._id}')">Bearbeiten</button>` : ''}
                 ${canEditLibraryItems ? `<button class="button" style="background:#dc2626;color:#fff; margin-left:6px;" onclick="confirmDeleteLibraryItem('${item._id}')">Löschen</button>` : ''}
             </td>
         </tr>`;
@@ -1125,26 +1235,22 @@
         const scannerWrap = document.querySelector('.library-scan-reader-wrap');
         const toggleBtn = document.getElementById('toggleScannerBtn');
 
-        // 1. CRITICAL FIX: Make the container visible BEFORE Quagga initializes
-        // Quagga cannot calculate video dimensions if display is 'none'
         if (scannerWrap) {
             scannerWrap.style.display = 'block';
         }
 
         setScanStatus('Starte Kamera...', 'warn');
 
-        // 2. Initialize Quagga with a slight delay to allow the DOM to render the block
         setTimeout(() => {
             Quagga.init({
                 inputStream: {
                     name: "Live",
                     type: "LiveStream",
-                    // This MUST match the inner div where the video should appear
                     target: document.querySelector('.library-scan-reader'),
                     constraints: {
                         width: 640,
                         height: 480,
-                        facingMode: "environment" // Prefer back camera on mobile
+                        facingMode: "environment" 
                     }
                 },
                 locator: {
@@ -1152,13 +1258,11 @@
                     halfSample: true
                 },
                 decoder: {
-                    // Keep only the barcode types you actually use to improve performance
                     readers: ["code_128_reader", "ean_reader", "code_39_reader"]
                 },
                 locate: true
             }, function(err) {
                 if (err) {
-                    // This will finally log the actual error (e.g., NotAllowedError) if permissions fail
                     console.error("Quagga initialization failed:", err);
                     setScanStatus('Kamera-Fehler: ' + (err.name || err), 'error');
 
@@ -1190,7 +1294,6 @@
         scannerRunning = false;
         activeScannerCallback = null;
 
-        // Hide the container to free up UI space
         const scannerWrap = document.querySelector('.library-scan-reader-wrap');
         if (scannerWrap) {
             scannerWrap.style.display = 'none';
@@ -1198,7 +1301,7 @@
 
         const toggleBtn = document.getElementById('toggleScannerBtn');
         if (toggleBtn) {
-            toggleBtn.textContent = 'Kamera Scanner'; // Reset button text
+            toggleBtn.textContent = 'Kamera Scanner'; 
         }
     }
 
@@ -1210,7 +1313,6 @@
                 method: 'POST',
                 headers: {
                     'Content-Type': 'application/json',
-                    // Falls du in Flask CSRF-Protect nutzt, muss der Token mitgesendet werden:
                     'X-CSRFToken': '{{ csrf_token }}',
                     'X-CSRF-Token': '{{ csrf_token }}'
                 }
@@ -1218,7 +1320,6 @@
 
             if (!response.ok) return false;
 
-            // Wir parsen die Antwort. Flask jsonify({"is_student_card": true/false})
             const data = await response.json();
             return data === true || data.is_student_card === true;
 
@@ -1245,7 +1346,7 @@
     });
 
     // =========================================================================
-    // Keyboard scanner handling (physical scanners that send chars then Enter)
+    // Keyboard scanner handling 
     // =========================================================================
     function getPhysicalScannerInstruction() {
         const mode = document.getElementById('scanModeSelect')?.value || 'card_only';
@@ -1299,7 +1400,6 @@
     }
 
     function keyboardScanKeydownHandler(e) {
-        // Only active when explicitly enabled
         if (!keyboardScannerEnabled || !physicalScannerModalOpen) return;
 
         if (e.key === 'Escape') {
@@ -1310,7 +1410,6 @@
 
         const now = Date.now();
 
-        // If Enter/Return pressed -> finalize buffer
         if (e.key === 'Enter') {
             e.preventDefault();
             const code = keyboardScanBuffer.trim();
@@ -1318,7 +1417,6 @@
             keyboardLastKeyAt = 0;
             if (!code) return;
 
-            // Scanner keystrokes must not be submitted into the focused form field.
             const displayCode = document.getElementById('physicalScannerCode');
             if (displayCode) displayCode.textContent = code;
             updatePhysicalScannerModal('Enter erkannt. Code wird verarbeitet...', 'warn');
@@ -1326,9 +1424,7 @@
             return;
         }
 
-        // Accept all printable scanner characters, including letters and punctuation.
         if (e.key.length === 1) {
-            // If time gap too big, start new buffer
             if (keyboardLastKeyAt && (now - keyboardLastKeyAt) > KEYBOARD_SCAN_INTERCHAR_MS) {
                 keyboardScanBuffer = '';
             }
@@ -1336,7 +1432,6 @@
             keyboardLastKeyAt = now;
             const displayCode = document.getElementById('physicalScannerCode');
             if (displayCode) displayCode.textContent = keyboardScanBuffer;
-            // Prevent default so scanner input is captured even while an input has focus.
             e.preventDefault();
         }
     }
@@ -1365,21 +1460,18 @@
 
         const now = Date.now();
         if (scannedCode === lastScanValue && (now - lastScanAt) < 1500) {
-            return; // Verhindert doppeltes Scannen in kurzer Zeit
+            return; 
         }
         lastScanValue = scannedCode;
         lastScanAt = now;
 
-        // Den aktuellen Modus aus dem Dropdown auslesen
         const mode = (document.getElementById('scanModeSelect') || {}).value || 'card_only';
 
-        // 1. Modus: Nur Rückgabe
         if (mode === 'return_only') {
             await returnByCode(scannedCode);
             return;
         }
 
-        // 2. Modus: Nur Ausweis
         if (mode === 'card_only') {
             setActiveStudentCard(scannedCode);
             setScanStatus(`Ausweis gesetzt: ${activeStudentCardId}. Bitte den nächsten Ausweis scannen.`, 'ok');
@@ -1388,13 +1480,11 @@
             return;
         }
 
-        // 3. Modus: Schnellmodus (1x Ausweis, 1x Buch)
         if (mode === 'quick_toggle') {
             await processQuickToggleScan(scannedCode);
             return;
         }
 
-        // 4. Modus: Dauermodus (1x Ausweis, Nx Bücher)
         if (mode === 'continuous') {
             await processContinuousScan(scannedCode);
             return;
@@ -1471,7 +1561,6 @@
                 updatePhysicalScannerModal('Aktion erfolgreich. Bereit für den nächsten Mediencode.', 'ok');
             }
 
-            // Tabellen-Ansicht aktualisieren
             if (typeof loadLibraryItems === "function") {
                 await loadLibraryItems();
             }
@@ -1491,7 +1580,6 @@
 
     async function processQuickToggleScan(scannedCode) {
 
-        // 2. Wenn kein Ausweis gesetzt ist, wird der Code als Ausweis interpretiert
         if (!activeStudentCardId) {
             setActiveStudentCard(scannedCode);
             setScanStatus(`Ausweis gesetzt: ${activeStudentCardId}. Bitte den nächsten Mediencode scannen.`, 'ok');
@@ -1500,7 +1588,6 @@
             return;
         }
 
-        // 3. Ausleihe/Rückgabe verarbeiten (wenn Ausweis vorhanden)
         try {
             setScanStatus('Verarbeite Mediencode...', 'warn');
             const response = await fetch('/api/library_scan_action', {
@@ -1695,7 +1782,6 @@
     }
 
     function showSmallConfirm(message, kind='ok', action = null) {
-        // Append the small helper text in German
         const helper = 'Sie können fortfahren. Dies ist nur eine kleine Benachrichtigung.';
         const el = document.createElement('div');
         el.className = `small-popup ${kind === 'error' ? 'error' : 'ok'}`;
@@ -1720,11 +1806,9 @@
         closeButton.innerHTML = '&times;';
         el.appendChild(closeButton);
         document.body.appendChild(el);
-        // close handler
         closeButton.addEventListener('click', () => {
             if (el && el.parentNode) el.parentNode.removeChild(el);
         });
-        // auto remove after 3 seconds
         setTimeout(() => { try { if (el && el.parentNode) el.parentNode.removeChild(el); } catch(e){} }, 3000);
     }
 
@@ -1764,11 +1848,9 @@
         const detailContent = document.getElementById('detailContent');
         const detailModal = document.getElementById('detailModal');
 
-        // Lade-Status anzeigen und Modal öffnen
         detailContent.innerHTML = '<p>Lade Details...</p>';
         detailModal.style.display = 'flex';
 
-        // Daten vom Backend-API-Endpoint abrufen
         fetch(`/api/item_detail/${itemId}`)
             .then(response => {
                 if (!response.ok) {
@@ -1832,15 +1914,12 @@
             });
     }
 
-    // Schließt das Modal über den 'x'-Button
     function closeDetailModal() {
         document.getElementById('detailModal').style.display = 'none';
     }
 
-    // Closes the modal if the user clicks the dark background overlay
     window.onclick = function(event) {
         const modal = document.getElementById('detailModal');
-        // If the click happened directly on the dark overlay (not the white box)
         if (event.target === modal) {
             closeDetailModal();
         }
@@ -1905,12 +1984,10 @@
         }
     }
 
-    // Run when DOM structure is entirely ready
     document.addEventListener('DOMContentLoaded', async () => {
-        wireScannerUi();       // Setup scanner control buttons
-        loadLibraryItems();   // Fetch your database items right away!
+        wireScannerUi();       
+        loadLibraryItems();   
 
-        // Safely connect standard Filters and Search inputs inside DOMContentLoaded
         const filterToggleBtn = document.getElementById('filterToggleBtn');
         if (filterToggleBtn) {
             filterToggleBtn.addEventListener('click', () => {
@@ -1968,15 +2045,11 @@
                     return;
                 }
 
-                // Leitet den manuellen Code an die zentrale Logik weiter,
-                // die prüft, welcher Modus im Dropdown aktiv ist.
                 handleScanSuccess(code);
 
-                // Feld nach Eingabe leeren, um direkt den nächsten Code bereitzuhaben
                 manualItemCode.value = '';
             });
 
-            // Optional: Auch auf "Enter" im Textfeld reagieren
             manualItemCode.addEventListener('keypress', (e) => {
                 if (e.key === 'Enter') {
                     e.preventDefault();

Web/templates/main_admin.html

@@ -5396,7 +5396,11 @@ document.addEventListener('DOMContentLoaded', ()=>{
     max-width: 880px;
     margin: 4vh auto;
     padding: 0;
-    overflow: hidden;
+    max-height: 92vh;
+    overflow-x: hidden;
+    overflow-y: auto;
+    overscroll-behavior: contain;
+    -webkit-overflow-scrolling: touch;
     border: 1px solid #d8e1eb;
     border-radius: 16px;
     background: var(--ui-surface);
@@ -5645,6 +5649,8 @@ document.addEventListener('DOMContentLoaded', ()=>{
     #item-modal .modal-content {
         width: calc(100vw - 18px);
         margin: 9px auto;
+        max-height: calc(100dvh - 18px);
+        overflow-y: auto;
         border-radius: 13px;
     }