From 60746b8c21be7cf06d28e6eef30272078c7c7a05 Mon Sep 17 00:00:00 2001
From: nizune <9-nizune@users.noreply.gitlab.insrt.uk>
Date: Wed, 7 Jul 2021 10:46:23 +0200
Subject: [PATCH] Fix: sessions menu overflow
---
external/lang | 2 +-
src/components/ui/Button.tsx | 2 ++
src/pages/friends/Friend.tsx | 2 +-
src/pages/settings/panes/Panes.module.scss | 8 ++++++++
4 files changed, 12 insertions(+), 2 deletions(-)
diff --git a/external/lang b/external/lang
index ce5e32d..e91ad23 160000
--- a/external/lang
+++ b/external/lang
@@ -1 +1 @@
-Subproject commit ce5e32d444a35a691ac6b0abfbc722945e7cdf46
+Subproject commit e91ad23b9747d424e14566e858b21d59a61d0ee0
diff --git a/src/components/ui/Button.tsx b/src/components/ui/Button.tsx
index 3fbad6c..0e31d88 100644
--- a/src/components/ui/Button.tsx
+++ b/src/components/ui/Button.tsx
@@ -51,6 +51,7 @@ export default styled.button<Props>`
css`
height: 32px !important;
padding: 2px 12px !important;
+ font-size: 13px;
`}
${(props) =>
@@ -102,6 +103,7 @@ export default styled.button<Props>`
props.error &&
css`
color: white;
+ font-weight: 600;
background: var(--error);
&:hover {
diff --git a/src/pages/friends/Friend.tsx b/src/pages/friends/Friend.tsx
index 650ce70..68039fe 100644
--- a/src/pages/friends/Friend.tsx
+++ b/src/pages/friends/Friend.tsx
@@ -127,7 +127,7 @@ export function Friend({ user }: Props) {
onContextMenu={attachContextMenu("Menu", { user: user._id })}>
<UserIcon target={user} size={36} status />
<div className={styles.name}>
- <span>@{user.username}</span>
+ <span>{user.username}</span>
{subtext && <span className={styles.subtext}>{subtext}</span>}
</div>
<div className={styles.actions}>{actions}</div>
diff --git a/src/pages/settings/panes/Panes.module.scss b/src/pages/settings/panes/Panes.module.scss
index c7d38ef..c807dda 100644
--- a/src/pages/settings/panes/Panes.module.scss
+++ b/src/pages/settings/panes/Panes.module.scss
@@ -310,6 +310,7 @@
.sessions {
.session {
display: flex;
+ align-items: center;
gap: 12px;
}
@@ -345,6 +346,7 @@
outline: 0;
border-radius: 0;
color: inherit;
+ width: 100%;
&:focus {
border-bottom: 2px solid var(--accent);
@@ -383,6 +385,10 @@
flex-direction: column;
justify-content: center;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ overflow: hidden;
+
.name {
text-transform: capitalize;
text-overflow: ellipsis;
@@ -391,6 +397,8 @@
.time {
font-size: .75rem;
color: var(--teriary-text);
+ text-overflow: ellipsis;
+ overflow: hidden;
}
}
}
--
GitLab