maciejpi/nordabiz
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

fix(messages): Quill editor styling, message bubble content padding, unread badges, group avatar
Some checks are pending
NordaBiz Tests / Unit & Integration Tests (push) Waiting to run
Details
NordaBiz Tests / E2E Tests (Playwright) (push) Blocked by required conditions
Details
NordaBiz Tests / Smoke Tests (Production) (push) Blocked by required conditions
Details
NordaBiz Tests / Send Failure Notification (push) Blocked by required conditions
Details

Browse Source 
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Maciej Pienczyn 2026-03-27 13:47:14 +01:00
parent 51f041baa4
commit 0f3f343f79
1 changed files with 84 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

84
static/css/conversations.css
View File

@ -951,6 +951,90 @@
transform: none;
}
/* --- Quill editor inside input wrapper --- */
.chat-input-wrapper .ql-toolbar {
border: none;
border-bottom: 1px solid var(--conv-border);
padding: 4px 0;
font-family: inherit;
}
.chat-input-wrapper .ql-container {
border: none;
font-family: inherit;
font-size: 14px;
}
.chat-input-wrapper .ql-editor {
padding: 6px 0;
min-height: 24px;
max-height: 120px;
overflow-y: auto;
line-height: 1.45;
color: var(--conv-text-primary);
}
.chat-input-wrapper .ql-editor.ql-blank::before {
color: var(--conv-text-muted);
font-style: normal;
left: 0;
}
.chat-input-wrapper .ql-editor p {
margin: 0;
}
.chat-input-wrapper #quillEditor {
flex: 1;
min-width: 0;
}
.input-actions {
display: flex;
align-items: center;
gap: 4px;
flex-shrink: 0;
padding-bottom: 2px;
}
/* --- Message bubble: ensure content doesn't clip --- */
.message-bubble p,
.message-bubble ol,
.message-bubble ul {
margin: 0 0 4px 0;
}
.message-bubble ol,
.message-bubble ul {
padding-left: 20px;
}
.message-bubble strong {
font-weight: 700;
}
/* --- Unread badge in conversation list --- */
.unread-badge {
background: var(--conv-accent);
color: #fff;
font-size: 10px;
font-weight: 700;
min-width: 18px;
height: 18px;
border-radius: 9px;
display: flex;
align-items: center;
justify-content: center;
padding: 0 5px;
flex-shrink: 0;
}
/* --- Group avatar color --- */
.conv-avatar.group {
background: var(--conv-avatar-teal);
color: #fff;
}
/* ============================================================
* 9. MOBILE RESPONSIVE
* ============================================================ */