From 579d7570afdfb066a4061f71c3a1ed9be63f1ff6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tr=C3=A8sAbhi?= <43380238+tresabhi@users.noreply.github.com>
Date: Sun, 3 Dec 2023 18:26:48 -0600
Subject: [PATCH] feat: better sizing

---
 .../tankopedia/components/List/index.css.tsx  |  2 +-
 .../tankopedia/components/List/index.tsx      | 19 ++++++++++++-------
 src/app/tools/tankopedia/page.css.tsx         |  0
 src/components/PageWrapper.tsx                |  2 +-
 4 files changed, 14 insertions(+), 9 deletions(-)
 delete mode 100644 src/app/tools/tankopedia/page.css.tsx

diff --git a/src/app/tools/tankopedia/components/List/index.css.tsx b/src/app/tools/tankopedia/components/List/index.css.tsx
index 0d2846c87..fdf0efa93 100644
--- a/src/app/tools/tankopedia/components/List/index.css.tsx
+++ b/src/app/tools/tankopedia/components/List/index.css.tsx
@@ -7,7 +7,7 @@ export const listingShadow = style({
   boxShadow: `inset 0 -128px 128px -128px ${theme.colors.appBackground1}`,
 
   [`.${listing}:hover &`]: {
-    boxShadow: `inset 0 0 128px -128px ${theme.colors.appBackground1}`,
+    boxShadow: `inset 0 0 0 -128px ${theme.colors.appBackground1}`,
   },
 });
 
diff --git a/src/app/tools/tankopedia/components/List/index.tsx b/src/app/tools/tankopedia/components/List/index.tsx
index dcacec1c1..4b72a37f0 100644
--- a/src/app/tools/tankopedia/components/List/index.tsx
+++ b/src/app/tools/tankopedia/components/List/index.tsx
@@ -37,13 +37,18 @@ export function List() {
             input={input}
             list={awaitedTanks.map((tank, index) => ({
               node: (
-                <a href={`/tools/tankopedia/${tank.id}`}>
+                <a
+                  href={`/tools/tankopedia/${tank.id}`}
+                  style={{
+                    flex: 1,
+                  }}
+                >
                   <Card className={styles.listing}>
                     <Inset
                       key={index}
                       style={{
-                        height: 128,
-                        width: 256,
+                        minHeight: 128,
+                        minWidth: 256,
                         position: 'relative',
                         display: 'flex',
                         alignItems: 'center',
@@ -85,8 +90,8 @@ export function List() {
                             (tank.tree_type === 'collector'
                               ? TANK_ICONS_COLLECTOR
                               : tank.tree_type === 'premium'
-                              ? TANK_ICONS_PREMIUM
-                              : TANK_ICONS)[tank.type]
+                                ? TANK_ICONS_PREMIUM
+                                : TANK_ICONS)[tank.type]
                           }
                           style={{ width: '1em', height: '1em' }}
                         />
@@ -96,8 +101,8 @@ export function List() {
                             tank.tree_type === 'collector'
                               ? 'blue'
                               : tank.tree_type === 'premium'
-                              ? 'amber'
-                              : undefined
+                                ? 'amber'
+                                : undefined
                           }
                           weight="medium"
                           style={{
diff --git a/src/app/tools/tankopedia/page.css.tsx b/src/app/tools/tankopedia/page.css.tsx
deleted file mode 100644
index e69de29bb..000000000
diff --git a/src/components/PageWrapper.tsx b/src/components/PageWrapper.tsx
index df8f10e84..09ce1bfb6 100644
--- a/src/components/PageWrapper.tsx
+++ b/src/components/PageWrapper.tsx
@@ -19,7 +19,7 @@ export default function PageWrapper({
         gap="4"
         style={{
           width: '100%',
-          maxWidth: size === 'regular' ? 800 : 880,
+          maxWidth: size === 'regular' ? 800 : 960,
           margin: 'auto',
           padding: 16,
           boxSizing: 'border-box',