From 11b99ef2113da0282311127c5983c1ac0566617b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tr=C3=A8sAbhi?= <43380238+tresabhi@users.noreply.github.com>
Date: Sat, 6 Apr 2024 17:28:45 -0500
Subject: [PATCH] feat: better compact search chunking

---
 .../components/TankSearch/index.tsx           | 25 ++++++++++++++-----
 1 file changed, 19 insertions(+), 6 deletions(-)

diff --git a/src/app/tools/tankopedia/components/TankSearch/index.tsx b/src/app/tools/tankopedia/components/TankSearch/index.tsx
index f1c8f9098..b2791f32b 100644
--- a/src/app/tools/tankopedia/components/TankSearch/index.tsx
+++ b/src/app/tools/tankopedia/components/TankSearch/index.tsx
@@ -401,14 +401,17 @@ export function TankSearch({
   ]);
   const [searchResults, setSearchedList] = useState(searchableTanks);
   const page = useTankopediaPersistent((state) => state.filters.page);
-  const wideFormat = typeof window !== 'undefined' && window.innerWidth > 512;
-  const chunkSize = wideFormat ? tanksPerPage / 2 : Infinity;
   const searchResultsPageSlice = searchResults.slice(
     page * tanksPerPage,
     (page + 1) * tanksPerPage,
   );
-  const firstChunk = searchResultsPageSlice.slice(0, chunkSize);
-  const secondChunk = searchResultsPageSlice.slice(chunkSize);
+  const firstChunk = searchResultsPageSlice.slice(
+    0,
+    Math.ceil(searchResultsPageSlice.length / 2),
+  );
+  const secondChunk = searchResultsPageSlice.slice(
+    Math.ceil(searchResultsPageSlice.length / 2),
+  );
 
   useEffect(() => {
     setSearchedList(searchableTanks);
@@ -848,7 +851,17 @@ export function TankSearch({
       {!compact && (
         <PageTurner tanksPerPage={tanksPerPage} searchedList={searchResults} />
       )}
-      <Flex wrap="wrap" gap="2" justify={compact ? 'between' : 'center'}>
+
+      <Flex
+        wrap="wrap"
+        gap="2"
+        style={{
+          justifyContent:
+            compact && firstChunk.length > 0 && secondChunk.length > 0
+              ? 'space-around'
+              : 'center',
+        }}
+      >
         {!compact &&
           searchResultsPageSlice.map((tank) => (
             <Link
@@ -970,7 +983,7 @@ export function TankSearch({
             </Link>
           ))}
 
-        {compact && (
+        {compact && firstChunk.length > 0 && (
           <CompactSearchResultRow tanks={firstChunk} onSelect={onSelect} />
         )}