Fix: sessions menu overflow

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 {

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>

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;
             }
         }
     }