fix(chat): валидная разметка карточки диалога и доступ с клавиатуры

Карточка треда была вложенными <button>, поэтому кнопки действий внутри
неё ломали HTML-структуру. Заменена на <div role="button" tabindex="0">
с обработкой Enter/Space; классы действий переименованы в
chat-thread-act / chat-thread-act-danger, чтобы не путаться с .chat-act.

Также ужата шапка списка диалогов: заголовок не сжимается, кнопки
не переносятся, подпись у кнопки скрытых заменена на бейдж.
This commit is contained in:
dev
2026-10-05 20:02:03 +03:00
parent 7d282d4f3d
commit 62239a35a4
4 changed files with 25 additions and 17 deletions
+10 -10
View File
@@ -909,10 +909,10 @@ body.report-card-open .report-fields{display:flex}
.chat-layout{display:grid;grid-template-columns:300px 1fr;gap:16px;align-items:start}
.chat-layout.chat-layout-solo{grid-template-columns:1fr}
.chat-side{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;max-height:calc(100dvh - 190px)}
.chat-side-head{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--border)}
.chat-side-title{font-size:.85rem;font-weight:600}
.chat-side-head{display:flex;align-items:center;gap:6px;padding:10px 10px;border-bottom:1px solid var(--border)}
.chat-side-title{font-size:.85rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.chat-side-head .grow{flex:1}
.chat-new-btn{padding:7px 12px;font-size:.8rem}
.chat-new-btn{padding:7px 10px;font-size:.78rem;gap:6px;flex-shrink:0;white-space:nowrap}
.chat-new-btn svg{width:14px;height:14px}
.chat-thread-list{overflow-y:auto;display:flex;flex-direction:column}
.chat-side-empty{padding:22px 14px;color:var(--muted);font-size:.85rem;text-align:center}
@@ -930,7 +930,7 @@ body.report-card-open .report-fields{display:flex}
.chat-thread-preview{font-size:.78rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-off{font-size:.65rem;color:var(--muted);border:1px solid var(--border);border-radius:5px;padding:1px 5px;flex-shrink:0}
.chat-thread-badge{min-width:18px;height:18px;padding:0 6px;border-radius:999px;background:#ef4444;color:#fff;font-size:.65rem;font-weight:700;line-height:18px;text-align:center;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;align-self:center}
.chat-side-toggle{padding:7px 12px;font-size:.8rem;display:inline-flex;align-items:center;gap:6px}
.chat-side-toggle{padding:7px 10px;font-size:.8rem;display:inline-flex;align-items:center;gap:6px;flex-shrink:0;white-space:nowrap}
.chat-side-toggle svg{width:14px;height:14px}
.chat-side-toggle.on{background:rgba(37,99,235,.1);border-color:var(--accent);color:var(--accent)}
.chat-hidden-count{min-width:16px;height:16px;padding:0 5px;border-radius:999px;background:var(--muted);color:var(--card);font-size:.62rem;font-weight:700;line-height:16px;text-align:center}
@@ -939,12 +939,12 @@ body.report-card-open .report-fields{display:flex}
.chat-side-hint[hidden]{display:none}
.chat-thread-acts{display:flex;align-items:center;gap:4px;margin-left:auto;align-self:center;opacity:0;transition:opacity .15s}
.chat-thread:hover .chat-thread-acts,.chat-thread:focus-visible .chat-thread-acts,.chat-thread.active .chat-thread-acts{opacity:1}
.chat-act{width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;background:var(--bg);border:1px solid var(--border);border-radius:8px;color:var(--muted);cursor:pointer;padding:0;flex-shrink:0}
.chat-act:hover{color:var(--accent);border-color:var(--accent);background:rgba(37,99,235,.07)}
.chat-act:hover svg{stroke:var(--accent)}
.chat-act-danger:hover{color:#ef4444;border-color:#ef4444;background:rgba(239,68,68,.08)}
.chat-act-danger:hover svg{stroke:#ef4444}
.chat-act svg{width:14px;height:14px}
.chat-thread-act{width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;background:var(--bg);border:1px solid var(--border);border-radius:8px;color:var(--muted);cursor:pointer;padding:0;flex-shrink:0}
.chat-thread-act:hover{color:var(--accent);border-color:var(--accent);background:rgba(37,99,235,.07)}
.chat-thread-act:hover svg{stroke:var(--accent)}
.chat-thread-act-danger:hover{color:#ef4444;border-color:#ef4444;background:rgba(239,68,68,.08)}
.chat-thread-act-danger:hover svg{stroke:#ef4444}
.chat-thread-act svg{width:14px;height:14px}
.chat-thread.is-hidden .chat-thread-avatar{opacity:.5}
.chat-thread.is-hidden .chat-thread-name,.chat-thread.is-hidden .chat-thread-preview{opacity:.65}
.chat-hidden-tag{border-color:rgba(239,68,68,.35);color:#ef4444}