From ffd184ffe6fcf75a1671cef1f6bdcc8f713043c0 Mon Sep 17 00:00:00 2001
From: Kalle <38327916+Sendouc@users.noreply.github.com>
Date: Mon, 5 Sep 2022 15:21:56 +0300
Subject: [PATCH] Better user combobox options location badges modal

Closes #883
---
 app/routes/badges/$id/edit.tsx | 56 +++++++++++++++++++---------------
 app/styles/common.css          |  1 +
 2 files changed, 33 insertions(+), 24 deletions(-)

diff --git a/app/routes/badges/$id/edit.tsx b/app/routes/badges/$id/edit.tsx
index d8a5eea56..c0cf7ab35 100644
--- a/app/routes/badges/$id/edit.tsx
+++ b/app/routes/badges/$id/edit.tsx
@@ -137,19 +137,21 @@ function Managers({ data }: { data: BadgeDetailsLoaderData }) {
             </li>
           ))}
         </ul>
-        <UserCombobox
-          className="mx-auto"
-          inputName="new-manager"
-          onChange={(user) => {
-            if (!user) return;
+        <div className="text-center">
+          <UserCombobox
+            className="mx-auto"
+            inputName="new-manager"
+            onChange={(user) => {
+              if (!user) return;
 
-            setManagers([
-              ...managers,
-              { discordFullName: user.label, id: Number(user.value) },
-            ]);
-          }}
-          userIdsToOmit={userIdsToOmitFromCombobox}
-        />
+              setManagers([
+                ...managers,
+                { discordFullName: user.label, id: Number(user.value) },
+              ]);
+            }}
+            userIdsToOmit={userIdsToOmitFromCombobox}
+          />
+        </div>
       </div>
       <input
         type="hidden"
@@ -221,19 +223,25 @@ function Owners({ data }: { data: BadgeDetailsLoaderData }) {
             </li>
           ))}
         </ul>
-        <UserCombobox
-          className="mx-auto"
-          inputName="new-owner"
-          onChange={(user) => {
-            if (!user) return;
+        <div className="text-center">
+          <UserCombobox
+            className="mx-auto"
+            inputName="new-owner"
+            onChange={(user) => {
+              if (!user) return;
 
-            setOwners([
-              ...owners,
-              { discordFullName: user.label, id: Number(user.value), count: 1 },
-            ]);
-          }}
-          userIdsToOmit={userIdsToOmitFromCombobox}
-        />
+              setOwners([
+                ...owners,
+                {
+                  discordFullName: user.label,
+                  id: Number(user.value),
+                  count: 1,
+                },
+              ]);
+            }}
+            userIdsToOmit={userIdsToOmitFromCombobox}
+          />
+        </div>
       </div>
       {ownerDifferences.length > 0 ? (
         <ul className="badges-edit__differences">
diff --git a/app/styles/common.css b/app/styles/common.css
index a8e503ded..2e9d63211 100644
--- a/app/styles/common.css
+++ b/app/styles/common.css
@@ -302,6 +302,7 @@ abbr[title] {
 }
 
 dialog {
+  overflow: visible;
   width: min(90%, 24rem);
   border: 0;
   margin: auto;