diff --git a/public/app.js b/public/app.js index ebc9759..9845510 100644 --- a/public/app.js +++ b/public/app.js @@ -1573,7 +1573,7 @@ function initAppShell() { }, 80) }) - // Sichtbare Hoehe (ohne Tastatur) fuer den Chat; neueste Nachricht bleibt sichtbar. + // Sichtbare Hoehe (ohne Tastatur) fuer den Chat. // Schliesst die Tastatur, ohne dass das Feld den Fokus verliert (Android-Zurueck-Geste), // kommt die Tab-Leiste zurueck; tippt man erneut hinein, verschwindet sie wieder. const vv = window.visualViewport @@ -1600,14 +1600,12 @@ function initAppShell() { vv.addEventListener('resize', syncHeight) syncHeight() } + // Wird der Verlauf kleiner (Tastatur, Tab-Leiste), bleibt die neueste Nachricht sichtbar – sofern + // man unten war (data-stick setzt ChatComposer.trackScroll) const messages = document.getElementById('chat-messages') if (messages && typeof ResizeObserver !== 'undefined') { - let atBottom = true - messages.addEventListener('scroll', () => { - atBottom = messages.scrollHeight - messages.scrollTop - messages.clientHeight < 48 - }, { passive: true }) new ResizeObserver(() => { - if (atBottom) messages.scrollTop = messages.scrollHeight + if (messages.dataset.stick !== 'false') messages.scrollTop = messages.scrollHeight }).observe(messages) } diff --git a/public/kundenbereich.css b/public/kundenbereich.css index 734ca1a..5d6b6f9 100644 --- a/public/kundenbereich.css +++ b/public/kundenbereich.css @@ -597,13 +597,8 @@ button.kb-avatar:disabled { cursor: default; box-shadow: none; } #view-chat .chat-box { flex: 1 1 auto; min-height: 0; height: auto; padding: 10px; border-radius: 20px; } .chat-messages { overscroll-behavior: contain; padding: 4px 2px; } .chat-bubble { max-width: 84%; font-size: 15px; } - .chat-input-row { gap: 8px; margin-top: 10px; } + /* Eingabe des Chat-Composers als Pille, passend zu dessen runden Knoepfen (Senden-Knopf: chat-composer.css) */ .chat-input-row textarea { box-sizing: border-box; min-height: 46px; padding: 11px 16px; border-radius: 23px; font-size: 16px; line-height: 1.35; } - /* Senden als runder Pfeil-Button; der Text bleibt fuer Screenreader erhalten */ - .chat-send { - flex: none; width: 46px; height: 46px; padding: 0; border-radius: 50%; font-size: 0; color: transparent; - background: var(--kb-purple) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19V5M5 12l7-7 7 7'/%3E%3C/svg%3E") center / 22px no-repeat; - } /* Tab "Wartung": Abo-Karte gross; darunter Unterseiten Stundenkonto/Bestellung und Gutschrift */ #kb-abo-slot:has(> .kb-abo:not(.hidden)) > .kb-empty { display: none; } @@ -649,8 +644,9 @@ button.kb-avatar:disabled { cursor: default; box-shadow: none; } .kb-sheet-links a, .kb-sheet-logout { padding-top: 14px; padding-bottom: 14px; } } -/* Touch: Tastatur-Hinweise zum Chat braucht es nicht */ -@media (pointer: coarse) { +/* App-Ansicht mit Touch: der Hinweis unter dem Chat (Enter-Taste, Anhaenge) kostet zu viel Hoehe, + Bueroklammer und Mikrofon sprechen fuer sich */ +@media (max-width: 880px) and (pointer: coarse), (pointer: coarse) and (max-height: 500px) { .chat-hint { display: none; } } @@ -663,9 +659,8 @@ button.kb-avatar:disabled { cursor: default; box-shadow: none; } .kb-nav-item.active { color: #d4b4ff; } .kb-tab-ico { margin-top: 0; } .kb-nav-item .kb-badge { position: static; margin-left: -2px; } - /* Chat: Ueberschrift weglassen (steht dann in der App-Leiste), einzeilige Eingabe */ + /* Chat: Ueberschrift weglassen, sie steht dann in der App-Leiste */ #view-chat .kb-head { display: none; } - .chat-input-row textarea { height: 46px; } } @media (prefers-reduced-motion: reduce) {