From 16500793a5d279d4e8fd0cde3189e7522b3c9439 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tr=C3=A8sAbhi?= <43380238+tresabhi@users.noreply.github.com>
Date: Mon, 22 Jul 2024 20:59:38 -0500
Subject: [PATCH] fix: no session search result overlap

---
 src/app/tools/session/page.tsx | 73 +++++++++++++++-------------------
 1 file changed, 32 insertions(+), 41 deletions(-)

diff --git a/src/app/tools/session/page.tsx b/src/app/tools/session/page.tsx
index 8993e04e2..13620fe3a 100644
--- a/src/app/tools/session/page.tsx
+++ b/src/app/tools/session/page.tsx
@@ -8,7 +8,6 @@ import {
 import {
   AlertDialog,
   Button,
-  Card,
   DropdownMenu,
   Flex,
   Heading,
@@ -110,7 +109,7 @@ export default function Page({
   const search = debounce(async () => {
     if (!input.current) return;
 
-    setSearchResults(await searchPlayersAcrossRegions(input.current.value, 9));
+    setSearchResults(await searchPlayersAcrossRegions(input.current.value, 15));
     setSearching(false);
   }, 500);
 
@@ -269,46 +268,38 @@ export default function Page({
             <TextField.Slot>
               <MagnifyingGlassIcon />
             </TextField.Slot>
-
-            {showSearch && (
-              <Card
-                mt="2"
-                style={{
-                  position: 'absolute',
-                  top: '100%',
-                  left: 0,
-                  width: '100%',
-                }}
-              >
-                {searching && (
-                  <Flex justify="center">
-                    <Text color="gray">Searching...</Text>
-                  </Flex>
-                )}
-
-                {!searching && searchResults.length === 0 && (
-                  <Flex justify="center">
-                    <Text color="gray">No players found</Text>
-                  </Flex>
-                )}
-
-                {!searching && searchResults.length > 0 && (
-                  <Flex direction="column" gap="2">
-                    {searchResults.map((player) => (
-                      <Button
-                        key={player.account_id}
-                        variant="ghost"
-                        onClick={() => track(player.account_id)}
-                      >
-                        {player.nickname} (
-                        {UNLOCALIZED_REGION_NAMES_SHORT[player.region]})
-                      </Button>
-                    ))}
-                  </Flex>
-                )}
-              </Card>
-            )}
           </TextField.Root>
+
+          {showSearch && (
+            <Flex mt="2">
+              {searching && (
+                <Flex justify="center">
+                  <Text color="gray">Searching...</Text>
+                </Flex>
+              )}
+
+              {!searching && searchResults.length === 0 && (
+                <Flex justify="center">
+                  <Text color="gray">No players found</Text>
+                </Flex>
+              )}
+
+              {!searching && searchResults.length > 0 && (
+                <Flex direction="column" gap="2">
+                  {searchResults.map((player) => (
+                    <Button
+                      key={player.account_id}
+                      variant="ghost"
+                      onClick={() => track(player.account_id)}
+                    >
+                      {player.nickname} (
+                      {UNLOCALIZED_REGION_NAMES_SHORT[player.region]})
+                    </Button>
+                  ))}
+                </Flex>
+              )}
+            </Flex>
+          )}
         </Flex>
       )}