From b44779c89a3ac4e54db9af4a0a13d1323ef6b7dc Mon Sep 17 00:00:00 2001
From: Paul Makles <paulmakles@gmail.com>
Date: Tue, 14 Jun 2022 17:10:59 +0100
Subject: [PATCH] fix: user picker checkbox + width

fixes #657
fixes #681
---
 external/lang                                   |  2 +-
 src/components/common/user/UserCheckbox.tsx     | 17 ++++++++++++-----
 .../popovers/UserPicker.module.scss             | 15 ---------------
 3 files changed, 13 insertions(+), 21 deletions(-)

diff --git a/external/lang b/external/lang
index db62af5c..c8284d49 160000
--- a/external/lang
+++ b/external/lang
@@ -1 +1 @@
-Subproject commit db62af5cee441c5d78bf4fc18c40f4aeffafc97d
+Subproject commit c8284d49b09b108e42fac4a7bdeaf3a447757b61
diff --git a/src/components/common/user/UserCheckbox.tsx b/src/components/common/user/UserCheckbox.tsx
index b80ca1c1..15ffce7d 100644
--- a/src/components/common/user/UserCheckbox.tsx
+++ b/src/components/common/user/UserCheckbox.tsx
@@ -1,6 +1,6 @@
 import { User } from "revolt.js";
 
-import { Checkbox } from "@revoltchat/ui";
+import { Checkbox, Row, Column } from "@revoltchat/ui";
 
 import UserIcon from "./UserIcon";
 import { Username } from "./UserShort";
@@ -9,9 +9,16 @@ type UserProps = { value: boolean; onChange: (v: boolean) => void; user: User };
 
 export default function UserCheckbox({ user, ...props }: UserProps) {
     return (
-        <Checkbox {...props}>
-            <UserIcon target={user} size={32} />
-            <Username user={user} />
-        </Checkbox>
+        <Checkbox
+            {...props}
+            title={
+                <Row centred>
+                    <UserIcon target={user} size={32} />
+                    <Column centred>
+                        <Username user={user} />
+                    </Column>
+                </Row>
+            }
+        />
     );
 }
diff --git a/src/context/intermediate/popovers/UserPicker.module.scss b/src/context/intermediate/popovers/UserPicker.module.scss
index 610de5a7..f0c1e9a5 100644
--- a/src/context/intermediate/popovers/UserPicker.module.scss
+++ b/src/context/intermediate/popovers/UserPicker.module.scss
@@ -1,20 +1,5 @@
 .list {
-    width: 400px;
     max-width: 100%;
     max-height: 360px;
     overflow-y: scroll;
-
-    > label {
-        > span {
-            align-items: flex-start !important;
-            > span {
-                display: flex;
-                padding: 4px;
-                flex-direction: row;
-                gap: 10px;
-                justify-content: flex-start;
-                align-items: center;
-            }
-        }
-    }
 }