discourse/plugins/chat/assets/stylesheets/common/chat-user-threads.scss
David Battersby 1dbf4ebeb7
UX: wrap chat thread title to nearest word (#36698)
Chat thread titles currently wrap to the nearest character, sometimes
wrapping in the middle of a word.

### Before

<img width="319" height="323" alt="Screenshot 2025-12-15 at 8 09 29 PM"
src="https://github.com/user-attachments/assets/e60bca06-3c1f-4c03-b659-52a1bf9280b2"
/>

### After

<img width="320" alt="Screenshot 2025-12-15 at 8 10 46 PM"
src="https://github.com/user-attachments/assets/224ac6a2-1ba7-4373-b89b-84226d3449d0"
/>
2025-12-15 23:50:09 +04:00

79 lines
1.3 KiB
SCSS
Vendored

.c-user-thread {
padding-block: 1.25rem;
margin-inline: 1rem;
border-bottom: 1px solid var(--content-border-color);
.c-unread-indicator {
width: 8px;
height: 8px;
align-self: flex-start;
}
.chat-message-thread-indicator {
margin-left: 0;
margin-top: 1rem;
&:hover {
box-shadow: none;
}
}
.chat__thread-title {
&-container {
display: flex;
gap: 1rem;
}
&__name {
font-size: var(--font-up-1-rem);
word-break: break-word;
&:hover {
color: var(--primary-very-high);
}
}
}
.chat-channel-icon {
font-size: var(--font-down-1-rem);
}
.chat-channel-name {
font-size: var(--font-down-1-rem);
color: var(--primary-high);
}
.chat-channel-title__name {
color: var(--primary-high);
font-size: var(--font-down-1);
}
}
.c-list {
overflow: auto;
}
.c-list-empty-state {
grid-column: 1/-1;
}
.c-user-threads .empty-state-threads {
display: flex;
justify-content: center;
padding: 1.25rem 1rem;
font-size: var(--font-up-1-rem);
color: var(--primary);
}
// sidebar
#sidebar-section-content-user-threads {
padding-bottom: 0.35em;
.sidebar-section-link-content-text {
color: var(--d-sidebar-link-color);
}
.active .sidebar-section-link-content-text {
color: var(--d-sidebar-active-color);
}
}