Kundenansicht neu Chat-Fix: Chat als Vollbild-Ansicht (Verlauf scrollt in sich, Eingabe unten, Spalte zentriert, "Chat" klein im Kopf)
Pilot-Feedback 17.10.: Der Chat wirkte durchsichtig und verrutscht. - Handy: Inhalt steht fest zwischen Kopf und Leiste (wie das Blatt); die Eingabe sitzt höchstens 6 px über der Leiste bzw. dem Widerrufsstreifen und bei offener Tastatur am unteren Rand des sichtbaren Bereichs. "Chat" steht klein im Kopf (die H1 bleibt nur für Screenreader), der Kopf ist deckend mit Haarlinie, der Verlauf beginnt direkt darunter und scrollt in sich. - Desktop: Spalte in Fensterhöhe, Chat höchstens 760 px breit und mittig, Verlauf füllt die Höhe, Eingabe am unteren Spaltenrand. - Verlauf steht unten (neueste Nachricht sichtbar), kurze Verläufe unten bei der Eingabe; Blasen fremd #f8f9fb, eigen #ebeef1. - "Senden" bleibt schwarz, auch bei leerem Feld (gesperrt im Ansichtsmodus weiter gedämpft). - haltFokus: Druck auf Senden, Anhang oder Mikrofon nimmt dem Textfeld den Fokus nicht; sonst kommt die Leiste zurück, schiebt die feste Eingabe hoch und der Tipp auf "Senden" geht bei offener Tastatur verloren (im Browser nachgestellt). public/chat-composer.js und die alte Ansicht bleiben unverändert. Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
This commit is contained in:
1 parent
5cd49d6a4a
commit
670ead3091
4 files changed
+128
-8
No files matched your search
@@ -128,13 +128,16 @@
|
||||
--chat-surface: var(--kn-bg);
|
||||
--chat-line: var(--kn-line-strong);
|
||||
--chat-muted: var(--kn-text-2);
|
||||
--chat-bubble-in: var(--kn-bg-hover);
|
||||
--chat-bubble-in: var(--kn-bg-subtle);
|
||||
--chat-bubble-out: var(--kn-grau-bg);
|
||||
--chat-track: var(--kn-spur);
|
||||
display: flex; flex-direction: column; gap: var(--kn-sp-2); min-width: 0;
|
||||
display: flex; flex: 1 1 auto; flex-direction: column; gap: var(--kn-sp-2); width: 100%; min-width: 0; min-height: 0; max-width: 760px; margin-inline: auto;
|
||||
}
|
||||
.kn .kn-chat .chat-box { display: flex; flex-direction: column; gap: var(--kn-sp-2); min-width: 0; }
|
||||
.kn .kn-chat .chat-messages { display: flex; flex-direction: column; gap: 8px; min-height: 280px; max-height: 60vh; overflow-y: auto; padding: 4px 0; }
|
||||
.kn .kn-chat .chat-box { display: flex; flex: 1 1 auto; flex-direction: column; gap: var(--kn-sp-2); min-width: 0; min-height: 0; }
|
||||
/* Der Verlauf füllt die Höhe zwischen Kopf und Eingabe und scrollt in sich; kurze Verläufe stehen unten, bei der Eingabe (Rahmen der Höhe: huelle.css) */
|
||||
.kn .kn-chat .chat-messages { display: flex; flex: 1 1 0; flex-direction: column; gap: 8px; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 8px 0; }
|
||||
.kn .kn-chat .chat-messages > :first-child { margin-top: auto; }
|
||||
.kn .kn-chat .chat-messages > .kn-leer { margin: auto 0; padding: 24px 0; }
|
||||
.kn .kn-chat .chat-bubble {
|
||||
align-self: flex-start; max-width: 78%; padding: 8px 12px; border: 0; border-radius: var(--kn-radius-lg);
|
||||
background: var(--chat-bubble-in); color: var(--kn-text); overflow-wrap: anywhere;
|
||||
@@ -158,6 +161,7 @@
|
||||
.kn .kn-chat .chat-icon-btn:hover:not(:disabled) { background: var(--kn-bg-hover); }
|
||||
.kn .kn-chat .chat-icon-btn[aria-expanded="true"], .kn .kn-chat .chat-icon-btn[aria-expanded="true"]:hover:not(:disabled) { background: var(--kn-accent-soft); box-shadow: 0 0 0 1px var(--kn-accent); }
|
||||
.kn .kn-chat .chat-icon-btn:disabled, .kn .kn-chat .chat-send:disabled { opacity: .55; cursor: not-allowed; }
|
||||
.kn .kn-chat .chat-composer:not(.is-disabled) .chat-send:disabled:not(.is-busy) { opacity: 1; cursor: default; } /* „Senden“ bleibt der schwarze Hauptknopf, auch bei leerem Feld; gesperrt (Ansichtsmodus) wirkt er weiter grau */
|
||||
.kn .kn-chat .chat-send.is-busy:disabled { opacity: .8; cursor: progress; }
|
||||
.kn .kn-chat .chat-rec { border-color: var(--kn-danger-ring); background: var(--kn-rot-bg); }
|
||||
.kn .kn-chat .chat-rec .chat-icon-btn { background: transparent; box-shadow: none; }
|
||||
@@ -171,7 +175,7 @@
|
||||
.kn .kn-chat .chat-tray-item { border: 1px solid transparent; background: var(--kn-bg-hover); }
|
||||
.kn .kn-chat .chat-tray-item.is-error { border-color: var(--kn-danger); background: var(--kn-rot-bg); }
|
||||
.kn .kn-chat.chat-drop-active::after, .kn .kn-chat .chat-box.chat-drop-active::after { background: var(--kn-ablage-hell); color: var(--kn-text); border-color: var(--kn-text-3); }
|
||||
.kn .kn-chat .kn-chat-composer { margin-top: 0; }
|
||||
.kn .kn-chat .kn-chat-composer { flex: none; margin-top: 0; }
|
||||
.kn .kn-chat .kn-chat-kasten { position: relative; }
|
||||
.kn .kn-chat .kn-chat-verlauf { scroll-behavior: auto; }
|
||||
.kn .kn-chat .chat-composer { margin-top: 8px; }
|
||||
@@ -377,7 +381,6 @@
|
||||
.kn-sperrzeile { margin-bottom: 8px; }
|
||||
.kn-bestellen .kn-knopf { width: 100%; min-height: 44px; }
|
||||
.kn .kn-chat .chat-bubble { max-width: 88%; }
|
||||
.kn .kn-chat .chat-messages { min-height: 240px; max-height: 55vh; }
|
||||
.kn .kn-chat .chat-input-row textarea { font-size: 16px; }
|
||||
.kn .ab-portal .ab-karte-aktionen a, .kn .ab-portal .ab-knopf, .kn .ab-portal .ab-details > summary, .kn .ab-portal .ab-links a { min-height: 44px; }
|
||||
.kn .ab-portal .ab-knopf { width: 100%; }
|
||||
|
||||
Reference in new issue
Block a user