Merge pull request 'Fix #189: Formularfelder in Dialogen einzeilig, Hilfetexte als Tooltip' (#190) from fds2610-bot/Steuerkram:main into main

Reviewed-on: https://codeberg.org/fds2610/Steuerkram/pulls/190

Changes.md

@@ -2,6 +2,13 @@
 
 ---
 
+## 2026-08-18 – Modale Dialoge: Label und Feld in einer Zeile, Hilfetexte als Tooltip (#189)
+
+- Einige Dialoge (v.a. „Neue Direktverbindung"/„Verbindung bearbeiten" unter Bank, „Rechnung per E-Mail senden"/„Zahlungen" unter Rechnungen) waren durch zweizeilige Formularfelder (Bezeichnung über dem Feld) höher als ein Standardbildschirm und mussten gescrollt werden.
+- **`public/static/css/app.css`:** neue Klasse `.modal-inline-form` – wird auf die Dialogbox gesetzt und bringt darin jedes `.form-group` per Flexbox in eine Zeile (Bezeichnung links, Feld rechts, mit Umbruch bei zu wenig Platz statt Überlauf).
+- **`src/Views/bank/fints.php`, `src/Views/invoices/show.php`, `src/Views/assets/form.php`, `src/Views/belege/_vorschau.php`:** betroffene Dialoge auf `.modal-inline-form` umgestellt; das Zahlungs-Erfassungsformular im Rechnungs-Dialog (bereits zweispaltig) bekommt je Spalte ebenfalls Bezeichnung und Feld nebeneinander statt gestapelt.
+- Erklärende Texte, die bisher als eigene Zeile unter dem Feld standen (z.B. „optional", Hinweise zu Abruf-Zeitraum/TAN-Verfahren, FinTS-vs.-API-Erklärung), sind entfernt und stehen jetzt als `title`-Attribut auf der Feldbezeichnung – erscheinen also nur noch als Tooltip beim Hovern.
+
 ## 2026-08-18 – Bankleitzahlen-Verzeichnis: FinTS-Institutsliste unter Einstellungen einlesen (#187)
 
 - Neuer Punkt unter Einstellungen (`/settings/bankinstitute`, analog zu „CSV Bankimport Formate"): nimmt die CSV-Institutsliste der Deutschen Kreditwirtschaft (hbci-zka.de) auf, damit `bank_providers.default_fints_url`/die FinTS-Server-URL nicht mehr per Migration gepflegt werden muss (siehe `069_bank_providers_fints_url.sql`).

public/static/css/app.css

@@ -288,6 +288,26 @@ textarea { min-height: 80px; resize: vertical; }
 
 .form-hint { font-size: .78rem; color: var(--color-muted); margin-top: .2rem; }
 
+/* ── Dialoge: Label und Feld in einer Zeile statt zweizeilig ───── */
+.modal-inline-form .form-group {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: .3rem .75rem;
+}
+.modal-inline-form .form-group > label {
+    flex: 0 0 auto;
+    max-width: 45%;
+    margin-bottom: 0;
+}
+.modal-inline-form .form-group > input,
+.modal-inline-form .form-group > select,
+.modal-inline-form .form-group > textarea {
+    flex: 1 1 140px;
+    width: auto;
+    min-width: 0;
+}
+
 /* ── Tables ──────────────────────────────────────────────────── */
 .table-wrap { overflow-x: auto; }
 

src/Views/assets/form.php

@@ -306,7 +306,7 @@ $conflictBadge = function(string $field, string $label) use ($bkHints, $h): stri
 
 <!-- ── AFA-Buchungs-Dialog ──────────────────────────────────── -->
 <div class="modal-overlay" id="modal-afa-book">
-    <div class="modal" style="width:min(460px,95vw)">
+    <div class="modal modal-inline-form" style="width:min(460px,95vw)">
         <div class="modal-title">AFA-Buchung anlegen</div>
         <p class="text-sm text-muted" style="margin-bottom:1rem">
             Jahr <strong id="afabook-jahr"></strong> &middot; Betrag <strong id="afabook-betrag"></strong>&nbsp;€

src/Views/bank/fints.php

@@ -118,7 +118,7 @@ $csvDateFormatOptions = [
 <!-- Modal: Neue Verbindung -->
 <div id="modal-new-connection"
      style="display:none;position:fixed;inset:0;z-index:1000;background:rgba(0,0,0,.4);align-items:center;justify-content:center">
-    <div style="background:#fff;border-radius:var(--radius);box-shadow:0 8px 32px rgba(0,0,0,.15);width:100%;max-width:480px;padding:1.5rem">
+    <div class="modal-inline-form" style="background:#fff;border-radius:var(--radius);box-shadow:0 8px 32px rgba(0,0,0,.15);width:100%;max-width:480px;padding:1.5rem">
         <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:1.25rem">
             <h2 style="margin:0;font-size:1.125rem">Neue Direktverbindung</h2>
             <button type="button" id="btn-modal-close"
@@ -148,7 +148,7 @@ $csvDateFormatOptions = [
                            placeholder="z. B. Sparkasse Musterstadt" maxlength="100">
                 </div>
                 <div class="form-group">
-                    <label>Verbindungstyp</label>
+                    <label title="FinTS = klassischer Bank-Abruf via PIN. API = REST/NVP-Schnittstelle (wie PayPal).">Verbindungstyp</label>
                     <div style="display:flex;gap:1rem;padding:.25rem 0">
                         <label style="display:flex;align-items:center;gap:.4rem;font-weight:normal;cursor:pointer">
                             <input type="radio" name="new_bank_typ" value="FinTS" checked style="width:auto;margin:0">
@@ -159,7 +159,6 @@ $csvDateFormatOptions = [
                             <span>API</span>
                         </label>
                     </div>
-                    <div class="text-muted text-sm">FinTS = klassischer Bank-Abruf via PIN. API = REST/NVP-Schnittstelle (wie PayPal).</div>
                 </div>
             </div>
 
@@ -213,9 +212,9 @@ $csvDateFormatOptions = [
                     <input type="password" id="fc-pin" name="pin" autocomplete="new-password">
                 </div>
                 <div class="form-group">
-                    <label for="fc-fints-url">FinTS-Server-URL <span class="text-muted text-sm">(optional, wird sonst über BLZ ermittelt)</span></label>
+                    <label for="fc-fints-url" title="Optional, wird sonst über BLZ ermittelt">FinTS-Server-URL</label>
                     <input type="url" id="fc-fints-url" name="fints_url" placeholder="https://...">
-                    <div style="margin-top:.4rem">
+                    <div style="margin-top:.4rem;flex-basis:100%">
                         <input type="text" id="fc-blz-search" placeholder="Bankleitzahl, BIC, Name oder Ort suchen…" style="font-size:.8rem">
                         <div id="fc-blz-results" style="display:none;margin-top:.3rem;max-height:160px;overflow-y:auto;border:1px solid var(--color-border);border-radius:var(--radius)"></div>
                     </div>
@@ -285,7 +284,7 @@ $csvDateFormatOptions = [
 <!-- Modal: Verbindung bearbeiten -->
 <div id="modal-edit-connection"
      style="display:none;position:fixed;inset:0;z-index:1000;background:rgba(0,0,0,.4);align-items:center;justify-content:center">
-    <div style="background:#fff;border-radius:var(--radius);box-shadow:0 8px 32px rgba(0,0,0,.15);width:100%;max-width:480px;padding:1.5rem">
+    <div class="modal-inline-form" style="background:#fff;border-radius:var(--radius);box-shadow:0 8px 32px rgba(0,0,0,.15);width:100%;max-width:480px;padding:1.5rem">
         <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:1.25rem">
             <h2 style="margin:0;font-size:1.125rem">Verbindung bearbeiten</h2>
             <button type="button" id="btn-edit-close"
@@ -334,15 +333,12 @@ $csvDateFormatOptions = [
                     <label for="edit-sandbox" style="margin:0;font-weight:normal;cursor:pointer">Sandbox-Modus (Testumgebung)</label>
                 </div>
                 <div class="form-group">
-                    <label for="edit-fetch-range-api">Abrufen ab</label>
+                    <label for="edit-fetch-range-api" title="Gilt nur für den nächsten Abruf – danach wieder „Ab letztem Abruf".">Abrufen ab</label>
                     <select id="edit-fetch-range-api" name="fetch_range" disabled>
                         <?php foreach ($fetchRangeOptions as $val => $label): ?>
                             <option value="<?= $h($val) ?>"><?= $h($label) ?></option>
                         <?php endforeach; ?>
                     </select>
-                    <div class="text-muted text-sm">
-                        Gilt nur für den nächsten Abruf – danach wieder „Ab letztem Abruf".
-                    </div>
                 </div>
             </div>
 
@@ -361,28 +357,24 @@ $csvDateFormatOptions = [
                            placeholder="Leer = unverändert behalten">
                 </div>
                 <div class="form-group">
-                    <label for="edit-fints-url">FinTS-Server-URL <span class="text-muted text-sm">(optional)</span></label>
+                    <label for="edit-fints-url" title="Optional">FinTS-Server-URL</label>
                     <input type="url" id="edit-fints-url" name="fints_url" placeholder="https://...">
                 </div>
                 <div class="form-group">
-                    <label for="edit-tan-mode-id">TAN-Verfahren-ID <span class="text-muted text-sm">(optional)</span></label>
+                    <label for="edit-tan-mode-id" title="Optional. Leer = erstes verfügbares Verfahren">TAN-Verfahren-ID</label>
                     <input type="number" id="edit-tan-mode-id" name="tan_mode_id" min="1" placeholder="z.B. 913 für chipTAN QR">
-                    <div class="text-muted text-sm">Leer = erstes verfügbares Verfahren</div>
                 </div>
                 <div class="form-group">
-                    <label for="edit-fetch-range-fints">Abrufen ab</label>
+                    <label for="edit-fetch-range-fints" title="Gilt nur für den nächsten Abruf – danach wieder „Ab letztem Abruf".">Abrufen ab</label>
                     <select id="edit-fetch-range-fints" name="fetch_range" disabled>
                         <?php foreach ($fetchRangeOptions as $val => $label): ?>
                             <option value="<?= $h($val) ?>"><?= $h($label) ?></option>
                         <?php endforeach; ?>
                     </select>
-                    <div class="text-muted text-sm">
-                        Gilt nur für den nächsten Abruf – danach wieder „Ab letztem Abruf".
-                    </div>
                 </div>
 
-                <div class="form-group">
+                <div class="form-group" style="display:block">
-                    <label>Aktive Konten</label>
+                    <label style="margin-bottom:.3rem">Aktive Konten</label>
                     <div id="edit-account-list" style="display:flex;flex-direction:column;gap:.3rem;padding:.2rem 0"></div>
                     <div id="edit-account-empty" class="text-sm text-muted" style="display:none;padding:.4rem 0">
                         (wird beim nächsten Abruf abgefragt)
@@ -433,7 +425,7 @@ $csvDateFormatOptions = [
 <!-- Modal: TAN-Eingabe (photoTAN/chipTAN) -->
 <div id="modal-tan-input"
      style="display:none;position:fixed;inset:0;z-index:1100;background:rgba(0,0,0,.4);align-items:center;justify-content:center">
-    <div style="background:#fff;border-radius:var(--radius);box-shadow:0 8px 32px rgba(0,0,0,.15);width:100%;max-width:480px;padding:1.5rem;display:flex;flex-direction:column;gap:.75rem">
+    <div class="modal-inline-form" style="background:#fff;border-radius:var(--radius);box-shadow:0 8px 32px rgba(0,0,0,.15);width:100%;max-width:480px;padding:1.5rem;display:flex;flex-direction:column;gap:.75rem">
         <h2 style="margin:0;font-size:1.125rem">TAN eingeben</h2>
         <div id="tan-context" class="text-muted text-sm"></div>
         <div id="tan-challenge" class="text-sm" style="white-space:pre-wrap"></div>

src/Views/belege/_vorschau.php

@@ -91,7 +91,7 @@
 
                                 <!-- Storno-Modal -->
                                 <div class="modal-overlay" id="modal-storno-<?= $h($bk['id']) ?>">
-                                    <div class="modal">
+                                    <div class="modal modal-inline-form">
                                         <div class="modal-title">Buchung stornieren</div>
                                         <p class="text-sm text-muted mb-2">Die Buchung <?= $h($bk['buchungs_nr']) ?> wird durch eine Gegenbuchung storniert (GoBD-konform).</p>
                                         <form method="post" action="/bookings/<?= $h($bk['id']) ?>/reverse">

src/Views/invoices/show.php

@@ -396,7 +396,7 @@ $badgeClass = match($invoice['status']) {
 
 <!-- E-Mail-Senden-Modal -->
 <div id="send-modal" style="display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:1000;align-items:center;justify-content:center">
-    <div style="background:#fff;border-radius:8px;padding:1.5rem;width:420px;max-width:95vw;box-shadow:0 8px 32px rgba(0,0,0,.2)">
+    <div class="modal-inline-form" style="background:#fff;border-radius:8px;padding:1.5rem;width:420px;max-width:95vw;box-shadow:0 8px 32px rgba(0,0,0,.2)">
         <h3 style="margin:0 0 1rem">Rechnung per E-Mail senden</h3>
         <form method="post" action="/invoices/<?= $h($invoice['id']) ?>/send">
             <div class="form-group">
@@ -406,12 +406,12 @@ $badgeClass = match($invoice['status']) {
                        placeholder="empfaenger@example.com">
             </div>
             <div class="form-group">
-                <label>CC 1 <span style="font-weight:normal;color:#888">(optional)</span></label>
+                <label title="optional">CC 1</label>
                 <input type="email" name="email_cc1" placeholder="cc1@example.com"
                        value="<?= $h($customer['email_cc1'] ?? '') ?>">
             </div>
             <div class="form-group">
-                <label>CC 2 <span style="font-weight:normal;color:#888">(optional)</span></label>
+                <label title="optional">CC 2</label>
                 <input type="email" name="email_cc2" placeholder="cc2@example.com"
                        value="<?= $h($customer['email_cc2'] ?? '') ?>">
             </div>
@@ -513,31 +513,31 @@ $badgeClass = match($invoice['status']) {
             <div style="font-size:.8rem;font-weight:600;margin-bottom:.75rem">Neue Buchung erfassen</div>
             <form method="post" action="/invoices/<?= $h($invoice['id']) ?>/bookings">
                 <input type="hidden" name="_from_modal" value="1">
-                <div style="display:grid;grid-template-columns:1fr 1fr;gap:.75rem;margin-bottom:.75rem">
+                <div style="display:grid;grid-template-columns:1fr 1fr;gap:.5rem .75rem;margin-bottom:.75rem">
-                    <div>
+                    <div style="display:flex;align-items:center;gap:.4rem">
-                        <label style="font-size:.75rem;font-weight:600;display:block;margin-bottom:.25rem">Zahldatum *</label>
+                        <label style="font-size:.75rem;font-weight:600;white-space:nowrap;margin:0">Zahldatum *</label>
-                        <input type="date" name="buchungs_datum" value="<?= date('Y-m-d') ?>" required style="width:100%">
+                        <input type="date" name="buchungs_datum" value="<?= date('Y-m-d') ?>" required style="width:100%;min-width:0">
                     </div>
-                    <div>
+                    <div style="display:flex;align-items:center;gap:.4rem">
-                        <label style="font-size:.75rem;font-weight:600;display:block;margin-bottom:.25rem">Nettobetrag (€) *</label>
+                        <label style="font-size:.75rem;font-weight:600;white-space:nowrap;margin:0">Nettobetrag (€) *</label>
                         <input type="number" name="betrag_netto" step="0.01" min="0.01" required
                                value="<?= $h(number_format(abs($vorschlagNet), 2, '.', '')) ?>"
-                               style="width:100%">
+                               style="width:100%;min-width:0">
                     </div>
                 </div>
-                <div style="display:grid;grid-template-columns:1fr 1fr;gap:.75rem;margin-bottom:.75rem">
+                <div style="display:grid;grid-template-columns:1fr 1fr;gap:.5rem .75rem;margin-bottom:.75rem">
-                    <div>
+                    <div style="display:flex;align-items:center;gap:.4rem">
-                        <label style="font-size:.75rem;font-weight:600;display:block;margin-bottom:.25rem">Kategorie-Konto *</label>
+                        <label style="font-size:.75rem;font-weight:600;white-space:nowrap;margin:0">Kategorie-Konto *</label>
-                        <select name="kategorie_konto_id" required style="width:100%">
+                        <select name="kategorie_konto_id" required style="width:100%;min-width:0">
                             <option value="">– Konto wählen –</option>
                             <?php foreach ($kontenGruppen['Betriebseinnahme'] ?? [] as $acc): ?>
                             <option value="<?= $h($acc['id']) ?>"><?= $h($acc['kontonummer']) ?> – <?= $h($acc['bezeichnung']) ?></option>
                             <?php endforeach; ?>
                         </select>
                     </div>
-                    <div>
+                    <div style="display:flex;align-items:center;gap:.4rem">
-                        <label style="font-size:.75rem;font-weight:600;display:block;margin-bottom:.25rem">Zahlungskonto *</label>
+                        <label style="font-size:.75rem;font-weight:600;white-space:nowrap;margin:0">Zahlungskonto *</label>
-                        <select name="zahlungskonto_id" required style="width:100%">
+                        <select name="zahlungskonto_id" required style="width:100%;min-width:0">
                             <option value="">– Konto wählen –</option>
                             <?php foreach ($kontenGruppen['Zahlungskonto'] ?? [] as $acc): ?>
                             <option value="<?= $h($acc['id']) ?>"><?= $h($acc['kontonummer']) ?> – <?= $h($acc['bezeichnung']) ?></option>
@@ -545,20 +545,20 @@ $badgeClass = match($invoice['status']) {
                         </select>
                     </div>
                 </div>
-                <div style="display:grid;grid-template-columns:1fr 1fr;gap:.75rem;margin-bottom:.75rem">
+                <div style="display:grid;grid-template-columns:1fr 1fr;gap:.5rem .75rem;margin-bottom:.75rem">
-                    <div>
+                    <div style="display:flex;align-items:center;gap:.4rem">
-                        <label style="font-size:.75rem;font-weight:600;display:block;margin-bottom:.25rem">USt-Satz (%)</label>
+                        <label style="font-size:.75rem;font-weight:600;white-space:nowrap;margin:0">USt-Satz (%)</label>
-                        <select name="ust_satz" style="width:100%">
+                        <select name="ust_satz" style="width:100%;min-width:0">
                             <?php foreach (['0','7','19'] as $s): ?>
                             <option value="<?= $s ?>"<?= $s === $ustVorgabe ? ' selected' : '' ?>><?= $s ?> %</option>
                             <?php endforeach; ?>
                         </select>
                     </div>
-                    <div>
+                    <div style="display:flex;align-items:center;gap:.4rem">
-                        <label style="font-size:.75rem;font-weight:600;display:block;margin-bottom:.25rem">Buchungstext *</label>
+                        <label style="font-size:.75rem;font-weight:600;white-space:nowrap;margin:0">Buchungstext *</label>
                         <input type="text" name="buchungstext" required
                                value="Ausgangsrechnung <?= $h($invoice['rechnungs_nr'] ?? '') ?>"
-                               style="width:100%">
+                               style="width:100%;min-width:0">
                     </div>
                 </div>
                 <div style="display:flex;gap:.75rem;justify-content:flex-end">