Bot list formatting

online-go · Dec 10, 2024 · 51e82f7 · 51e82f7
1 parent 2fc9ad0
commit 51e82f7
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 9 deletions.
diff --git a/src/views/Play/QuickMatch.styl b/src/views/Play/QuickMatch.styl
@@ -573,6 +573,17 @@
     }
 
     .computer-select {
+        .option-label {
+            display: flex;
+            justify-content: space-between;
+            gap: 0.5rem;
+
+            > span {
+                display: flex;
+                align-items: center;
+                gap: 0.5rem;
+            }
+        }
 
         > div {
             width: 100%;

diff --git a/src/views/Play/QuickMatch.tsx b/src/views/Play/QuickMatch.tsx
@@ -155,14 +155,19 @@ const RenderBotOption = (props: {
             className={"option" + (props.isFocused ? " focused" : "")}
         >
             <div className="option-label">
-                <PlayerIcon user={opt} size={32} style={{ width: "32px", height: "32px" }} />
-                {opt.username}
-            </div>
-            <div className="option-description">
-                {rankString(opt.ranking || 0)}
-                <a target="_blank" href={`/user/view/${opt.id}`} title={_("Selected AI profile")}>
-                    <i className="fa fa-external-link" />
-                </a>
+                <span>
+                    <PlayerIcon user={opt} size={32} style={{ width: "32px", height: "32px" }} />
+                    {opt.username} ({rankString(opt.ranking || 0)})
+                </span>
+                <span>
+                    <a
+                        target="_blank"
+                        href={`/user/view/${opt.id}`}
+                        title={_("Selected AI profile")}
+                    >
+                        <i className="fa fa-external-link" />
+                    </a>
+                </span>
             </div>
         </div>
     );
@@ -173,7 +178,7 @@ const RenderBotValue = (props: any) => {
     return (
         <components.SingleValue {...props}>
             <PlayerIcon user={opt} size={32} style={{ width: "32px", height: "32px" }} />
-            {opt.username}
+            {opt.username} ({rankString(opt.ranking || 0)})
         </components.SingleValue>
     );
 };