Optimierung Feldbreite Gebinde und Zeilenabstände Erfassungsmaske

README.md

@@ -1314,6 +1314,11 @@ Warengruppe mit den zuletzt verwendeten Werten – **trägt den Artikel aber noc
 nicht ein.** Der Fokus springt ins Gebinde-Feld, damit noch Änderungen möglich
 sind. Erst „Hinzufügen" oder Enter übernimmt.
 
+Der Zeilenabstand der Eingabemaske kommt aus einer einzigen Regel
+(`.add-row > * + *`), nicht aus `margin-bottom` an jeder Zeile. Beim Umbau der
+Namenszeile – sie steckt seit der Vorschlagsliste in einem `.name-wrap` – war
+eine solche Einzelregel wirkungslos geworden, ohne dass es auffiel.
+
 ### Markt direkt beim Eintragen
 
 Unter den Detailfeldern steht eine Marktauswahl. Ohne sie müsste jeder Eintrag

web/html/app.css

@@ -344,9 +344,6 @@ button.danger {
 
 /* --- Artikel hinzufügen --- */
 .add-row { margin-top: .5rem; }
-.add-row > input { margin-bottom: .5rem; }
-.add-row .qty { flex: 0 0 5.5rem; }
-.add-row .unit { flex: 0 0 6rem; }
 
 /* --- Markt- und Gruppenabschnitte --- */
 .market {
@@ -1039,21 +1036,27 @@ input[type="search"] {
 
 /* --- Eingabezeile: Name, Detailfelder, Schaltflächen untereinander --- */
 
-.add-row > input#add-name { margin-bottom: .5rem; }
+/* Gleicher Abstand zwischen allen Zeilen der Eingabemaske.
+   Über den direkten Kindern statt über einzelne margin-bottom-Regeln:
+   Bei letzteren wurde beim Umbau der Namenszeile - sie steckt seit der
+   Vorschlagsliste in einem .name-wrap - eine Regel wirkungslos, ohne
+   dass es auffiel. */
+.add-row > * + * { margin-top: .5rem; }
 
 .add-fields {
   display: flex;
   flex-wrap: wrap;
   gap: .5rem;
-  margin-bottom: .5rem;
 }
 
 /* Menge schmal, Einheit schmal, Eigenschaft nimmt den Rest. Bei sehr
    schmalen Geräten bricht die Eigenschaft in die nächste Zeile. */
-.add-fields .count { flex: 0 1 4rem; min-width: 3.2rem; text-align: center; }
+/* Breiten so bemessen, dass die Platzhaltertexte vollständig lesbar
-.add-fields .qty { flex: 0 1 5rem; min-width: 4rem; }
+   bleiben - ein abgeschnittenes "Gebind" sagt nicht, was gemeint ist. */
-.add-fields .unit { flex: 0 1 5.5rem; min-width: 4rem; }
+.add-fields .count { flex: 0 1 4.2rem; min-width: 3.4rem; text-align: center; }
-.add-fields .variant { flex: 1 1 8rem; min-width: 0; }
+.add-fields .qty { flex: 0 1 6.6rem; min-width: 6.2rem; }
+.add-fields .unit { flex: 0 1 6rem; min-width: 5rem; }
+.add-fields .variant { flex: 1 1 8rem; min-width: 6rem; }
 
 .add-actions {
   display: flex;
@@ -1559,8 +1562,6 @@ body.modal-open .app-footer { display: none; }
 
 /* --- Marktauswahl in der Eingabezeile --- */
 
-.add-market { margin-bottom: .5rem; }
-
 select.market-select {
   width: 100%;
   padding: .65rem .5rem;

web/html/sw.js

@@ -5,7 +5,7 @@
 
 // Bei jeder Änderung an den Dateien unten hochzählen. Der Wert entscheidet,
 // wann alte Zwischenspeicher verworfen werden.
-const VERSION = "v28";
+const VERSION = "v29";
 const SHELL_CACHE = `einkaufsapp-shell-${VERSION}`;
 
 const SHELL = [