web/roomlist: prevent overflow in unread counters

This commit is contained in:
Jade Ellis 2024-12-07 19:07:10 +00:00
parent 5638adf6bc
commit a019d5f692
No known key found for this signature in database
GPG key ID: 8705A2A3EBF77BD2

View file

@ -106,22 +106,28 @@ div.room-entry {
width: 3rem; width: 3rem;
> div.unread-count { > div.unread-count {
--unread-count-size: 1rem;
--unread-count-padding-inline: calc(1rem/4);
--unread-count-padding-block: calc(1rem/8);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
border-radius: 50%; border-radius: var(--unread-count-size);
color: var(--unread-counter-text-color); color: var(--unread-counter-text-color);
background-color: var(--unread-counter-message-bg); background-color: var(--unread-counter-message-bg);
width: 1rem; height: var(--unread-count-size);
height: 1rem; min-width: calc(var(--unread-count-size) - 2*(var(--unread-count-padding-inline) - var(--unread-count-padding-block)));
line-height: 1; line-height: 1;
font-size: .75em; font-size: .75em;
padding-inline: var(--unread-count-padding-inline);
padding-block: var(--unread-count-padding-block);
&.notified, &.marked-unread, &.highlighted { &.notified, &.marked-unread, &.highlighted {
width: 1.5rem; --unread-count-size: 1.5rem;
height: 1.5rem;
padding-bottom: 0;
font-size: 1em; font-size: 1em;
font-weight: bold; font-weight: bold;
} }