Fix: sessions menu overflow

This commit is contained in:
nizune 2021-07-07 10:46:23 +02:00
parent c28110ffe5
commit 60746b8c21
4 changed files with 12 additions and 2 deletions

2
external/lang vendored

@ -1 +1 @@
Subproject commit ce5e32d444a35a691ac6b0abfbc722945e7cdf46 Subproject commit e91ad23b9747d424e14566e858b21d59a61d0ee0

View file

@ -51,6 +51,7 @@ export default styled.button<Props>`
css` css`
height: 32px !important; height: 32px !important;
padding: 2px 12px !important; padding: 2px 12px !important;
font-size: 13px;
`} `}
${(props) => ${(props) =>
@ -102,6 +103,7 @@ export default styled.button<Props>`
props.error && props.error &&
css` css`
color: white; color: white;
font-weight: 600;
background: var(--error); background: var(--error);
&:hover { &:hover {

View file

@ -127,7 +127,7 @@ export function Friend({ user }: Props) {
onContextMenu={attachContextMenu("Menu", { user: user._id })}> onContextMenu={attachContextMenu("Menu", { user: user._id })}>
<UserIcon target={user} size={36} status /> <UserIcon target={user} size={36} status />
<div className={styles.name}> <div className={styles.name}>
<span>@{user.username}</span> <span>{user.username}</span>
{subtext && <span className={styles.subtext}>{subtext}</span>} {subtext && <span className={styles.subtext}>{subtext}</span>}
</div> </div>
<div className={styles.actions}>{actions}</div> <div className={styles.actions}>{actions}</div>

View file

@ -310,6 +310,7 @@
.sessions { .sessions {
.session { .session {
display: flex; display: flex;
align-items: center;
gap: 12px; gap: 12px;
} }
@ -345,6 +346,7 @@
outline: 0; outline: 0;
border-radius: 0; border-radius: 0;
color: inherit; color: inherit;
width: 100%;
&:focus { &:focus {
border-bottom: 2px solid var(--accent); border-bottom: 2px solid var(--accent);
@ -383,6 +385,10 @@
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
.name { .name {
text-transform: capitalize; text-transform: capitalize;
text-overflow: ellipsis; text-overflow: ellipsis;
@ -391,6 +397,8 @@
.time { .time {
font-size: .75rem; font-size: .75rem;
color: var(--teriary-text); color: var(--teriary-text);
text-overflow: ellipsis;
overflow: hidden;
} }
} }
} }