feat: final stuff

packages/website/src/components/TankCard/index.css

@@ -23,7 +23,7 @@
 
 .tank-search-card .image {
   width: 100%;
-  height: 6rem;
+  height: 8rem;
   object-position: center right;
   object-fit: contain;
   filter: drop-shadow(-1px -1px 4px black);

packages/website/src/components/TankSearch/components/TankCardWrapper.tsx

@@ -6,11 +6,11 @@ export function TankCardWrapper(props: GridProps) {
       py="4"
       columns={{
         initial: 'repeat(auto-fill, minmax(6rem, 1fr))',
-        sm: 'repeat(auto-fill, minmax(8rem, 1fr))',
+        sm: 'repeat(auto-fill, minmax(10rem, 1fr))',
       }}
       flow="dense"
-      gap="2"
-      gapY="6"
+      gap="4"
+      gapY="8"
       {...props}
     />
   );

packages/website/src/components/Tankopedia/HeroSection/components/TankSandbox/Title.tsx

@@ -100,8 +100,8 @@ export function Title({ outline }: TitleProps) {
           fontSize: revealed
             ? disturbed
               ? '2rem'
-              : `${125 / name.length}vw`
-            : `${75 / name.length}vw`,
+              : `min(65vh, ${125 / name.length}vw)`
+            : `min(48vh, ${75 / name.length}vw)`,
           whiteSpace: 'nowrap',
           color: outline ? Var(`${nationColors.tint}-a2`) : color,
           opacity: outline && disturbed ? 0 : 1,

packages/website/src/components/Tankopedia/HeroSection/index.tsx

@@ -179,22 +179,6 @@ export function HeroSection({ skeleton }: MaybeSkeletonComponentProps) {
 
         <Title outline />
       </Flex>
-
-      {!disturbed && (
-        <Box
-          onClick={(event) => {
-            event.stopPropagation();
-            mutateTankopediaEphemeral((draft) => {
-              draft.disturbed = true;
-            });
-          }}
-          position="absolute"
-          width="100%"
-          height="100%"
-          top="0"
-          left="0"
-        />
-      )}
     </Flex>
   );
 }