web/roomview: don't allow room name to overflow

This commit is contained in:
Tulir Asokan 2024-10-31 00:54:34 +02:00
parent 244443c7fd
commit d573f2fa58
2 changed files with 7 additions and 7 deletions

View file

@ -4,12 +4,13 @@ div.room-header {
gap: .5rem; gap: .5rem;
padding-left: .5rem; padding-left: .5rem;
border-bottom: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color);
overflow: hidden;
> span.room-name { > div.room-name {
font-weight: bold; font-weight: bold;
} overflow: hidden;
text-overflow: ellipsis;
> div.divider { text-wrap: nowrap;
flex: 1; flex: 1;
} }

View file

@ -43,10 +43,9 @@ const RoomViewHeader = ({ room }: RoomViewHeaderProps) => {
onClick={use(LightboxContext)} onClick={use(LightboxContext)}
alt="" alt=""
/> />
<span className="room-name"> <div className="room-name">
{roomMeta.name ?? roomMeta.room_id} {roomMeta.name ?? roomMeta.room_id}
</span> </div>
<div className="divider"/>
<div className="right-buttons"> <div className="right-buttons">
<button <button
data-target-panel="pinned-messages" data-target-panel="pinned-messages"