0
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2026-08-15 17:24:47 +08:00
discourse/plugins/chat/assets/stylesheets/common/chat-message-blocks.scss
Kris a40aeb0514
UX: fix wrapping in chat block button (#38899)
Fixes an issue with buttons causing overflow in chat 

before
<img width="432" alt="image"
src="https://github.com/user-attachments/assets/8f0634c8-f72e-4c86-9c77-cea413e773e5"
/>


after 
<img width="422" alt="image"
src="https://github.com/user-attachments/assets/46fdcf86-dbdb-4ea0-9f3a-b68bca75a2d0"
/>
2026-03-27 17:10:20 -04:00

101 lines
2 KiB
SCSS
Vendored

.chat-message__blocks {
padding-block: 0.5em;
display: flex;
flex-direction: column;
gap: 0.5em;
}
.chat-message__block {
.block__actions {
display: flex;
flex-wrap: wrap;
gap: 0.5em;
}
.block__button {
.emoji {
height: 18px;
width: 18px;
}
}
.block__informative-wrapper {
margin: 0.5em 0;
}
.block__informative {
display: flex;
flex-direction: column;
gap: 0.5em;
padding: 0.5em 0;
}
.block__informative-item {
display: flex;
align-items: stretch;
}
.block__category {
position: relative;
display: flex;
flex-direction: row;
box-sizing: border-box;
border-width: 0;
border-radius: var(--d-border-radius);
background-color: var(--d-category-box-background-color);
border-left-width: var(--d-category-border-accent-width);
border-style: solid;
border-color: var(--category-badge-color, var(--primary-low));
width: 100%;
}
.block__category-inner {
box-sizing: border-box;
width: 100%;
padding: 1em;
display: flex;
flex-direction: column;
gap: 0.5em;
border-width: var(--d-category-border-box-width);
border-left-width: 0;
border-style: solid;
border-color: var(--primary-low);
border-top-right-radius: var(--d-border-radius);
border-bottom-right-radius: var(--d-border-radius);
}
.block__category-heading {
margin-bottom: 0.5em;
.badge-category__wrapper {
font-size: var(--font-up-2);
}
.badge-category__name {
font-weight: bold;
color: var(--primary);
}
.block__category-link {
text-decoration: none;
color: inherit;
&:hover {
.badge-category__name {
color: var(--tertiary);
}
}
}
}
.block__category-parent {
font-size: var(--font-down-1);
color: var(--primary-high);
}
.block__category-description {
font-size: var(--font-0);
color: var(--primary-high);
line-height: var(--line-height-medium);
}
}