switchboard/core
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Releases 9 Wiki Activity

Fix chat surface dark mode theming and dialog dropdown overflow

Browse Source 
Replace non-existent CSS variable names (--text-primary, --text-muted,
--bg-active, --primary) with actual theme tokens from variables.css
(--text, --text-2, --text-3, --accent, --accent-dim, --input-bg,
--bg-raised, --bg-surface). Fixes invisible text and wrong backgrounds
in dark mode.

Allow UserPicker dropdown to overflow dialog body via :has() selector
override on sw-dialog__body overflow.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Jeffrey Smith
2026-03-30 14:56:34 +00:00
parent a0cd724d35
commit 6a04facc50
1 changed files with 92 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

149
packages/chat/css/main.css
View File

@@ -1,5 +1,10 @@
/* ═══════════════════════════════════════════ /* ═══════════════════════════════════════════
Chat Surface — Styles (v0.1.0) Chat Surface — Styles (v0.1.0)
Uses variables.css theme tokens:
--bg, --bg-surface, --bg-raised, --bg-hover, --bg-secondary
--text, --text-2, --text-3
--accent, --accent-dim, --border, --border-light
--input-bg, --danger, --danger-bg, --success
═══════════════════════════════════════════ */ ═══════════════════════════════════════════ */
/* ── Layout ─────────────────────────────── */ /* ── Layout ─────────────────────────────── */
@@ -9,8 +14,8 @@
flex-direction: column; flex-direction: column;
height: 100vh; height: 100vh;
overflow: hidden; overflow: hidden;
background: var(--bg-primary, #fff); background: var(--bg);
color: var(--text-primary, #1a1a1a); color: var(--text);
} }
.chat-loading { .chat-loading {
@@ -39,7 +44,7 @@
font-weight: 600; font-weight: 600;
font-size: 14px; font-size: 14px;
margin-right: 8px; margin-right: 8px;
color: var(--text-secondary, #666); color: var(--text-2);
} }
/* ── Sidebar ────────────────────────────── */ /* ── Sidebar ────────────────────────────── */
@@ -47,10 +52,10 @@
.chat-sidebar { .chat-sidebar {
width: 280px; width: 280px;
min-width: 280px; min-width: 280px;
border-right: 1px solid var(--border, #e2e2e2); border-right: 1px solid var(--border);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
background: var(--bg-secondary, #fafafa); background: var(--bg-secondary);
} }
.chat-sidebar__header { .chat-sidebar__header {
@@ -58,7 +63,7 @@
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
padding: 12px 16px; padding: 12px 16px;
border-bottom: 1px solid var(--border, #e2e2e2); border-bottom: 1px solid var(--border);
} }
.chat-sidebar__title { .chat-sidebar__title {
@@ -74,23 +79,23 @@
.chat-sidebar__empty { .chat-sidebar__empty {
padding: 24px 16px; padding: 24px 16px;
text-align: center; text-align: center;
color: var(--text-muted, #999); color: var(--text-3);
font-size: 13px; font-size: 13px;
} }
.chat-sidebar__item { .chat-sidebar__item {
padding: 10px 16px; padding: 10px 16px;
cursor: pointer; cursor: pointer;
border-bottom: 1px solid var(--border-light, #f0f0f0); border-bottom: 1px solid var(--border-light);
transition: background 0.1s; transition: background 0.1s;
} }
.chat-sidebar__item:hover { .chat-sidebar__item:hover {
background: var(--bg-hover, #f0f0f0); background: var(--bg-hover);
} }
.chat-sidebar__item--active { .chat-sidebar__item--active {
background: var(--bg-active, #e8f0fe); background: var(--accent-dim);
} }
.chat-sidebar__item-top { .chat-sidebar__item-top {
@@ -112,7 +117,7 @@
.chat-sidebar__item-time { .chat-sidebar__item-time {
font-size: 11px; font-size: 11px;
color: var(--text-muted, #999); color: var(--text-3);
white-space: nowrap; white-space: nowrap;
} }
@@ -124,7 +129,7 @@
.chat-sidebar__item-preview { .chat-sidebar__item-preview {
font-size: 12px; font-size: 12px;
color: var(--text-secondary, #666); color: var(--text-2);
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
@@ -132,8 +137,8 @@
} }
.chat-sidebar__badge { .chat-sidebar__badge {
background: var(--primary, #2563eb); background: var(--accent);
color: #fff; color: var(--text-on-color);
font-size: 11px; font-size: 11px;
font-weight: 600; font-weight: 600;
min-width: 18px; min-width: 18px;
@@ -158,7 +163,7 @@
.chat-thread--empty { .chat-thread--empty {
align-items: center; align-items: center;
justify-content: center; justify-content: center;
color: var(--text-muted, #999); color: var(--text-3);
} }
.chat-thread__messages { .chat-thread__messages {
@@ -179,23 +184,23 @@
.chat-thread__load-more { .chat-thread__load-more {
align-self: center; align-self: center;
background: none; background: none;
border: 1px solid var(--border, #e2e2e2); border: 1px solid var(--border);
border-radius: 4px; border-radius: 4px;
padding: 4px 12px; padding: 4px 12px;
font-size: 12px; font-size: 12px;
color: var(--text-secondary, #666); color: var(--text-2);
cursor: pointer; cursor: pointer;
margin-bottom: 8px; margin-bottom: 8px;
} }
.chat-thread__load-more:hover { .chat-thread__load-more:hover {
background: var(--bg-hover, #f0f0f0); background: var(--bg-hover);
} }
.chat-thread__typing { .chat-thread__typing {
padding: 4px 16px 8px; padding: 4px 16px 8px;
font-size: 12px; font-size: 12px;
color: var(--text-muted, #999); color: var(--text-3);
font-style: italic; font-style: italic;
} }
@@ -220,7 +225,7 @@
.chat-msg--system span { .chat-msg--system span {
font-size: 12px; font-size: 12px;
color: var(--text-muted, #999); color: var(--text-3);
font-style: italic; font-style: italic;
} }
@@ -231,25 +236,25 @@
.chat-msg--deleted em { .chat-msg--deleted em {
font-size: 12px; font-size: 12px;
color: var(--text-muted, #999); color: var(--text-3);
} }
.chat-msg__body { .chat-msg__body {
max-width: 65%; max-width: 65%;
background: var(--bg-secondary, #f5f5f5); background: var(--bg-raised);
border-radius: 12px; border-radius: 12px;
padding: 8px 12px; padding: 8px 12px;
} }
.chat-msg--own .chat-msg__body { .chat-msg--own .chat-msg__body {
background: var(--primary, #2563eb); background: var(--accent);
color: #fff; color: var(--text-on-color);
} }
.chat-msg__name { .chat-msg__name {
font-size: 11px; font-size: 11px;
font-weight: 600; font-weight: 600;
color: var(--text-secondary, #666); color: var(--text-2);
display: block; display: block;
margin-bottom: 2px; margin-bottom: 2px;
} }
@@ -270,7 +275,7 @@
.chat-msg__time { .chat-msg__time {
font-size: 10px; font-size: 10px;
color: var(--text-muted, #999); color: var(--text-3);
} }
.chat-msg--own .chat-msg__time { .chat-msg--own .chat-msg__time {
@@ -279,7 +284,7 @@
.chat-msg__edited { .chat-msg__edited {
font-size: 10px; font-size: 10px;
color: var(--text-muted, #999); color: var(--text-3);
font-style: italic; font-style: italic;
} }
@@ -295,10 +300,10 @@
position: absolute; position: absolute;
top: 0; top: 0;
right: 0; right: 0;
background: var(--bg-primary, #fff); background: var(--bg-surface);
border: 1px solid var(--border, #e2e2e2); border: 1px solid var(--border);
border-radius: 6px; border-radius: 6px;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1); box-shadow: var(--shadow-lg);
padding: 2px; padding: 2px;
} }
@@ -315,16 +320,16 @@
border-radius: 4px; border-radius: 4px;
font-size: 14px; font-size: 14px;
line-height: 1; line-height: 1;
color: var(--text-secondary, #666); color: var(--text-2);
} }
.chat-msg__action:hover { .chat-msg__action:hover {
background: var(--bg-hover, #f0f0f0); background: var(--bg-hover);
} }
.chat-msg__action--danger:hover { .chat-msg__action--danger:hover {
background: var(--danger-bg, #fee); background: var(--danger-bg);
color: var(--danger, #dc2626); color: var(--danger);
} }
/* ── Message Edit ───────────────────────── */ /* ── Message Edit ───────────────────────── */
@@ -338,14 +343,14 @@
.chat-msg__edit-input { .chat-msg__edit-input {
width: 100%; width: 100%;
min-width: 200px; min-width: 200px;
border: 1px solid var(--border, #e2e2e2); border: 1px solid var(--border);
border-radius: 6px; border-radius: 6px;
padding: 6px 8px; padding: 6px 8px;
font-size: 14px; font-size: 14px;
font-family: inherit; font-family: inherit;
resize: vertical; resize: vertical;
background: var(--bg-primary, #fff); background: var(--input-bg);
color: var(--text-primary, #1a1a1a); color: var(--text);
} }
.chat-msg__edit-actions { .chat-msg__edit-actions {
@@ -361,13 +366,13 @@
align-items: flex-end; align-items: flex-end;
gap: 8px; gap: 8px;
padding: 12px 16px; padding: 12px 16px;
border-top: 1px solid var(--border, #e2e2e2); border-top: 1px solid var(--border);
background: var(--bg-primary, #fff); background: var(--bg);
} }
.chat-compose__input { .chat-compose__input {
flex: 1; flex: 1;
border: 1px solid var(--border, #e2e2e2); border: 1px solid var(--border);
border-radius: 8px; border-radius: 8px;
padding: 8px 12px; padding: 8px 12px;
font-size: 14px; font-size: 14px;
@@ -375,14 +380,14 @@
resize: none; resize: none;
line-height: 1.4; line-height: 1.4;
max-height: 160px; max-height: 160px;
background: var(--bg-primary, #fff); background: var(--input-bg);
color: var(--text-primary, #1a1a1a); color: var(--text);
} }
.chat-compose__input:focus { .chat-compose__input:focus {
outline: none; outline: none;
border-color: var(--primary, #2563eb); border-color: var(--accent);
box-shadow: 0 0 0 2px var(--primary-light, rgba(37, 99, 235, 0.15)); box-shadow: 0 0 0 2px var(--accent-dim);
} }
/* ── Participant Sidebar ────────────────── */ /* ── Participant Sidebar ────────────────── */
@@ -390,10 +395,10 @@
.chat-participants { .chat-participants {
width: 240px; width: 240px;
min-width: 240px; min-width: 240px;
border-left: 1px solid var(--border, #e2e2e2); border-left: 1px solid var(--border);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
background: var(--bg-secondary, #fafafa); background: var(--bg-secondary);
} }
.chat-participants__header { .chat-participants__header {
@@ -401,7 +406,7 @@
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
padding: 12px 16px; padding: 12px 16px;
border-bottom: 1px solid var(--border, #e2e2e2); border-bottom: 1px solid var(--border);
font-weight: 600; font-weight: 600;
font-size: 13px; font-size: 13px;
} }
@@ -429,7 +434,7 @@
.chat-participants__badge { .chat-participants__badge {
font-size: 10px; font-size: 10px;
color: var(--primary, #2563eb); color: var(--accent);
font-weight: 600; font-weight: 600;
margin-left: 4px; margin-left: 4px;
} }
@@ -438,18 +443,18 @@
width: 8px; width: 8px;
height: 8px; height: 8px;
border-radius: 50%; border-radius: 50%;
background: var(--text-muted, #ccc); background: var(--text-3);
flex-shrink: 0; flex-shrink: 0;
} }
.chat-participants__status--online { .chat-participants__status--online {
background: var(--success, #16a34a); background: var(--success);
} }
.chat-participants__remove { .chat-participants__remove {
background: none; background: none;
border: none; border: none;
color: var(--text-muted, #999); color: var(--text-3);
cursor: pointer; cursor: pointer;
font-size: 16px; font-size: 16px;
padding: 0 4px; padding: 0 4px;
@@ -457,7 +462,7 @@
} }
.chat-participants__remove:hover { .chat-participants__remove:hover {
color: var(--danger, #dc2626); color: var(--danger);
} }
/* ── New Conversation Dialog ────────────── */ /* ── New Conversation Dialog ────────────── */
@@ -483,13 +488,13 @@
} }
.chat-new__title { .chat-new__title {
border: 1px solid var(--border, #e2e2e2); border: 1px solid var(--border);
border-radius: 6px; border-radius: 6px;
padding: 8px 10px; padding: 8px 10px;
font-size: 14px; font-size: 14px;
font-family: inherit; font-family: inherit;
background: var(--bg-primary, #fff); background: var(--input-bg);
color: var(--text-primary, #1a1a1a); color: var(--text);
} }
.chat-new__selected { .chat-new__selected {
@@ -502,8 +507,8 @@
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
gap: 4px; gap: 4px;
background: var(--bg-active, #e8f0fe); background: var(--accent-dim);
color: var(--primary, #2563eb); color: var(--accent);
font-size: 12px; font-size: 12px;
font-weight: 500; font-weight: 500;
padding: 3px 8px; padding: 3px 8px;
@@ -519,3 +524,33 @@
padding: 0; padding: 0;
line-height: 1; line-height: 1;
} }
/* ── Dialog UserPicker overflow fix ─────── */
/* Allow the autocomplete dropdown to overflow the dialog body */
.chat-new .sw-user-picker {
position: relative;
}
.chat-new .sw-user-picker__dropdown,
.chat-participants .sw-user-picker__dropdown {
position: absolute;
z-index: 9999;
left: 0;
right: 0;
max-height: 200px;
overflow-y: auto;
background: var(--bg-surface);
border: 1px solid var(--border);
border-radius: 6px;
box-shadow: var(--shadow-lg);
}
/* Ensure dialog content doesn't clip the dropdown */
.sw-dialog__body:has(.chat-new) {
overflow: visible;
}
.sw-dialog__content:has(.chat-new) {
overflow: visible;
}