Geraeteauswahl: Suchfeld statt Auswahlliste

Die Gruppierung nach Geraeteart hat die Liste geordnet, aber nicht kuerzer
gemacht: elf Jalousien bleiben elf Zeilen. Statt der Auswahlliste steht
jetzt ein Knopf in der Zeile, der eine durchsuchbare Liste ueber die volle
Breite aufklappt.

Gesucht wird ueber Beschriftung UND Geraeteart zugleich, also quer zur
Gruppierung: "bad" findet die drei Thermostate im Bad und die zwei
Jalousien "Bad Links"/"Bad Rechts", "jalousie" alle elf auf einmal. Ohne
Suchtext bleiben die Zwischenueberschriften stehen; sobald gefiltert wird,
faellt die Gruppierung weg, weil die Treffer dann quer ueber alle Arten
stehen und die Art ohnehin an jeder Zeile mitlaeuft.

Die aufgeklappte Liste haengt unter der ganzen Zeile und nicht in ihr - in
einer input-group stuende sie sonst als weitere Spalte daneben. Escape
schliesst, Enter nimmt den ersten Treffer, ein Klick daneben schliesst
ebenfalls. Es ist immer hoechstens eine offen.

Dabei zwei Sachen mitgenommen:

Eine neue Zeile beginnt jetzt ohne Geraet ("Gerät wählen …"). Bisher stand
dort das erste Geraet mit seinem ersten Messwert - nach dem
Geraete-Discovery also "Bad Links: Gesperrt = ", eine Bedingung, die
niemand gemeint hat und die man erst wegklicken musste. Der Satz darunter
sagt in dem Fall "Noch kein Ausloeser", und der Server lehnt eine
unvollstaendige Bedingung ohnehin ab.

Auf dem Handy quetschten sich Geraet, Messwert, Vergleich, Wert, Einheit
und Papierkorb in eine Zeile - uebrig blieben "Therm OG Bad" und "te".
Unter 576 px bekommen Geraet und Messwert jetzt je eine eigene Zeile. Die
Regel braucht die input-group-Klasse im Selektor: solar.css wird vor
AdminLTE geladen, und Bootstraps ".input-group > .form-select" haette sonst
dasselbe Gewicht und wuerde als spaeteres Blatt gewinnen.

Geprueft bei 375 px und am Rechner.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

css/solar.css

@@ -85,3 +85,20 @@ input[type='range']::-webkit-slider-runnable-track {
     font-size: .8rem;
   }
 }
+
+/* Editor der Automatiken. Eine Bedingungszeile traegt Geraet, Messwert,
+   Vergleich, Wert, Einheit und den Papierkorb nebeneinander - auf einem
+   Handy bleiben davon "Therm OG Bad" und "te" uebrig, weil die Felder in
+   der input-group einfach mitschrumpfen. Unter 576 px bekommen deshalb
+   Geraet und Messwert je eine eigene Zeile; Vergleich, Wert und Einheit
+   sind kurz genug, um zusammen in die naechste zu passen. */
+@media (max-width: 575.98px) {
+  /* Die input-group-Klasse muss mit in den Selektor: solar.css wird vor
+     AdminLTE geladen, und Bootstraps ".input-group > .form-select" haette
+     sonst dasselbe Gewicht und wuerde als spaeteres Blatt gewinnen. */
+  .input-group.auto-zeile > .auto-geraet,
+  .input-group.auto-zeile > .auto-messwert {
+    flex: 1 1 100%;
+    width: auto;
+  }
+}