Verbesserung Ablagedialog bei mehreren ausgewählten Dateien

ui/gemeinsam.css

@@ -1,16 +1,21 @@
-/* Gemeinsames Aussehen der Dialoge. Bewusst zurückhaltend, damit sie sich
-   in die Oberfläche von Thunderbird einfügen statt sich abzuheben. */
+/* Gemeinsames Aussehen der Dialoge.
+   Bewusst zurückhaltend, damit sie sich in die Oberfläche von
+   Thunderbird einfügen statt sich abzuheben. */
+
 :root {
   --gruen: #175420;
   --rand: #c8ccd0;
   --hell: #f6f6f4;
   color-scheme: light dark;
 }
+
 * { box-sizing: border-box; }
+
 /* Muss VOR den Anzeigearten stehen und !important tragen: Eine Regel wie
    ".wahl { display: flex }" überstimmt sonst das eingebaute
    "[hidden] { display: none }", und ausgeblendete Elemente erscheinen. */
 [hidden] { display: none !important; }
+
 body {
   font: message-box;
   font-size: 13px;
@@ -19,9 +24,16 @@ body {
   display: flex;
   flex-direction: column;
   gap: 10px;
+
+  /* Feste Höhe UND overflow:hidden. Mit min-height wuchs die Seite über
+     das Fenster hinaus, und die Fußzeile lag unerreichbar darunter.
+     Gestaucht wird stattdessen innen: Die Listen blättern selbst. */
   height: 100vh;
+  overflow: hidden;
 }
+
 h1 { font-size: 14px; margin: 0 0 2px; font-weight: 600; }
+
 fieldset {
   border: 1px solid var(--rand);
   border-radius: 4px;
@@ -30,7 +42,9 @@ fieldset {
   min-width: 0;
 }
 legend { padding: 0 4px; font-weight: 600; }
+
 label { display: block; margin: 4px 0 2px; }
+
 input[type=text], input[type=password], input[type=number], select {
   width: 100%;
   padding: 4px 6px;
@@ -39,14 +53,18 @@ input[type=text], input[type=password], input[type=number], select {
   background: Field;
   color: FieldText;
 }
+
 .zeile { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
+.zeile > input[type=text] { flex: 1; }
+
 /* Kompakte Zahlenfelder mit vorangestellter Beschriftung. */
 .masse { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
 .mass { display: flex; gap: 5px; align-items: center; }
 .mass label { margin: 0; white-space: nowrap; }
 .mass input { width: 68px; }
-.zeile > input[type=text] { flex: 1; }
+
 .wahl { display: flex; gap: 6px; align-items: center; margin: 3px 0; }
+.wahl input { width: auto; margin: 0; }
 
 /* Dateiliste mit Wahl der Ablageart je Datei. */
 .dateizeile {
@@ -58,7 +76,7 @@ input[type=text], input[type=password], input[type=number], select {
 .dateizeile .art label { margin: 0; white-space: nowrap; font-size: 12px; }
 .dateizeile .art input { width: auto; margin: 0; }
 .dateizeile .art label.aus { color: GrayText; }
-.wahl input { width: auto; margin: 0; }
+
 button {
   padding: 5px 14px;
   border: 1px solid var(--rand);
@@ -67,18 +85,28 @@ button {
   color: ButtonText;
   cursor: pointer;
 }
-button.haupt { background: var(--gruen); color: #fff; border-color: var(--gruen); }
+button.haupt {
+  background: var(--gruen); color: #fff; border-color: var(--gruen);
+}
 button:disabled { opacity: .5; cursor: default; }
-.fuss { display: flex; justify-content: flex-end; gap: 8px; margin-top: auto; }
+
+.fuss {
+  display: flex; justify-content: flex-end; gap: 8px; margin-top: auto;
+}
+
 .liste {
   border: 1px solid var(--rand);
   border-radius: 3px;
   overflow: auto;
   background: Field;
   flex: 1;
-  min-height: 90px;
+  min-height: 80px;
+}
+
+table {
+  width: 100%; border-collapse: collapse;
+  font-variant-numeric: tabular-nums;
 }
-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
 th, td { padding: 3px 8px; text-align: left; white-space: nowrap; }
 th {
   position: sticky; top: 0;
@@ -89,18 +117,64 @@ th {
 td.zahl, th.zahl { text-align: right; }
 tr.gewaehlt { background: SelectedItem; color: SelectedItemText; }
 tbody tr { cursor: default; }
-.hinweis { color: GrayText; font-size: 12px; }
 
-/* Gewählte Tags stehen oben und bleiben sichtbar, auch wenn der Filter
-   sie ausschliesst. Sonst verliert man beim Suchen den Überblick, was
-   bereits angehakt ist. */
-.gewaehlteTags {
-  padding: 4px 8px;
-  border-bottom: 1px solid var(--rand);
-  background: color-mix(in srgb, Field 94%, CanvasText);
-}
-.gewaehlteTags:empty { display: none; }
-.gewaehlteTags .wahl label { font-weight: 600; }
-.trefferHervor { background: color-mix(in srgb, Mark 60%, transparent); }
+.hinweis { color: GrayText; font-size: 12px; }
 .fehler { color: #b32; }
-.wachsen { flex: 1; display: flex; flex-direction: column; gap: 6px; min-height: 0; }
+.trefferHervor { background: color-mix(in srgb, Mark 60%, transparent); }
+
+.wachsen {
+  flex: 1; display: flex; flex-direction: column; gap: 6px; min-height: 0;
+}
+
+/* --------------------------------------------------- Zweispaltig */
+
+/* KEIN flex-wrap.
+   Mit Umbruch bemisst sich die Hoehe einer Flexzeile nach ihrem INHALT,
+   nicht nach dem Behaelter - die Spalten wachsen dann, statt sich zu
+   stauchen, und die Liste laeuft wieder aus dem Fenster.
+   Der urspruengliche Dialog hatte genau deshalb keinen Umbruch. Das
+   Fenster ist ohnehin 980 px breit; zwei Spalten zu 340 px passen
+   immer. */
+.spalten {
+  display: flex;
+  flex-wrap: nowrap;
+  gap: 12px;
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
+}
+
+/* KEIN fieldset für wachsende Bereiche.
+   Ein fieldset taugt nicht als Flex-Behälter: Browser behandeln seinen
+   inneren anonymen Kasten gesondert, height:100% löst sich darin nicht
+   verlässlich auf, und eine Liste darin wächst über den Rahmen hinaus.
+   Ein gewöhnliches Element verhält sich wie erwartet.
+   Der einzige sichtbare Unterschied: Die Überschrift steht innen statt
+   auf dem Rahmen. */
+.kasten {
+  border: 1px solid var(--rand);
+  border-radius: 4px;
+  padding: 10px;
+  /* Grundbreite 0 statt 340 px: Bei nowrap wuerde eine Grundbreite die
+     Spalten ueber das Fenster hinausschieben. Die Aufteilung ergibt
+     sich aus flex-grow zu gleichen Teilen. */
+  flex: 1 1 0;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  min-height: 0;
+  min-width: 0;
+}
+.kasten > h2 {
+  font-size: 13px;
+  font-weight: 600;
+  margin: 0 0 4px;
+}
+
+/* Die Liste füllt, was nach den festen Elementen übrig bleibt, und
+   blättert selbst. Genau das war das Ziel - es scheiterte bisher am
+   fieldset, nicht an der Vorgehensweise. */
+.kasten .liste {
+  flex: 1;
+  min-height: 80px;
+}