Call_Log: Formularfelder in einer Zeile zusammengefasst (Datum/Zeit/Dauer, Ansprechpartner/Telefon)

Datum, Uhrzeit Beginn und Dauer nebeneinander in einem flex-Container;
Name Ansprechpartner und Telefon ebenfalls in einer Zeile. Macht das
Formular kompakter und übersichtlicher.

Generated by Mistral Vibe.
Co-Authored-By: Mistral Vibe <vibe@mistral.ai>

Client/Components/call_log.ts

@@ -286,9 +286,13 @@ export const Call_Log: m.ClosureComponent = (vnode) => {
                             readonly: kundeVoreingestellt,
                             required: true
                         } as iSelect)),
-                    m("label", "Datum", m(Input, {name: "datum", value: currentLog.datum, type: "date"} as iInput)),
+                    // Datum, Startzeit und Dauer in einer Zeile.
-                    m("label", "Uhrzeit Beginn", m(Input, {name: "uhrzeitBeginn", value: currentLog.uhrzeitBeginn, type: "time"} as iInput)),
+                    m("div", {style: {display: 'flex', gap: '8px', 'margin-bottom': '5px'}},
-                    m("label", "Dauer (mm:ss)",
+                        m("label", {style: {flex: '1'}}, "Datum",
+                            m(Input, {name: "datum", value: currentLog.datum, type: "date"} as iInput)),
+                        m("label", {style: {flex: '1'}}, "Uhrzeit Beginn",
+                            m(Input, {name: "uhrzeitBeginn", value: currentLog.uhrzeitBeginn, type: "time"} as iInput)),
+                        m("label", {style: {flex: '1'}}, "Dauer (mm:ss)",
                             // Raw input statt Input-Widget, damit oncreate die
                             // DOM-Referenz für den Timer greifen kann. Text-Typ,
                             // da das Format mm:ss keine Zahl ist.
@@ -296,14 +300,19 @@ export const Call_Log: m.ClosureComponent = (vnode) => {
                                 name: "dauer",
                                 type: "text",
                                 value: currentLog.dauer,
-                            style: {'margin-bottom': '5px', width: '100%'},
                                 oncreate: (vnode: m.VnodeDOM) => {
                                     dauerInput = vnode.dom as HTMLInputElement
                                 }
-                        })),
+                            }))
+                    ),
                     m("label", "Betreff", m(Input, {name: "betreff", value: currentLog.betreff, type: "text"} as iInput)),
-                    m("label", "Name Ansprechpartner", m(Input, {name: "nameAnsprechpartner", value: currentLog.nameAnsprechpartner, type: "text"} as iInput)),
+                    // Ansprechpartner und Telefon in einer Zeile.
-                    m("label", "Telefon", m(Input, {name: "telefon", value: currentLog.telefon, type: "tel"} as iInput)),
+                    m("div", {style: {display: 'flex', gap: '8px', 'margin-bottom': '5px'}},
+                        m("label", {style: {flex: '1'}}, "Name Ansprechpartner",
+                            m(Input, {name: "nameAnsprechpartner", value: currentLog.nameAnsprechpartner, type: "text"} as iInput)),
+                        m("label", {style: {flex: '1'}}, "Telefon",
+                            m(Input, {name: "telefon", value: currentLog.telefon, type: "tel"} as iInput))
+                    ),
                     m("label", "Notiz", m(Textarea, {name: "notiz", value: currentLog.notiz, rows: 4} as iTextarea)),
                     m("label", "Wiedervorlage Datum", m(Input, {name: "wiedervorlageDatum", value: currentLog.wiedervorlageDatum, type: "date"} as iInput)),
                     m("label", m(Input, {name: "erledigt", type: "checkbox", value: currentLog.erledigt} as iInput), "Erledigt")