feat: compact search

src/app/tools/tankopedia/components/TankSearch/index.tsx

@@ -43,7 +43,7 @@ const tankTypeOrder: TankType[] = ['light', 'medium', 'heavy', 'tankDestroyer'];
 const treeTypeOrder: TreeType[] = ['researchable', 'premium', 'collector'];
 
 export function TankSearch({ compact, onSelect = () => {} }: TankSearchProps) {
-  const tanksPerPage = compact ? 16 : 24;
+  const tanksPerPage = compact ? 64 : 96;
   const nations = use(NATIONS);
   const filters = useTankopediaPersistent((state) => state.filters);
   const sort = useTankopediaPersistent((state) => state.sort);
@@ -213,7 +213,7 @@ export function TankSearch({ compact, onSelect = () => {} }: TankSearchProps) {
         <PageTurner tanksPerPage={tanksPerPage} searchedList={searchResults} />
       )}
 
-      <Flex wrap="wrap" gap="3" justify={compact ? 'between' : 'center'}>
+      <Flex wrap="wrap" gap="2" justify={compact ? 'between' : 'center'}>
         {!compact &&
           searchResultsPageSlice.map((tank) => (
             <Card
@@ -223,13 +223,14 @@ export function TankSearch({ compact, onSelect = () => {} }: TankSearchProps) {
               style={{
                 flex: 1,
                 cursor: 'pointer',
+                height: 64,
               }}
             >
               <Inset
                 key={tank.id}
                 style={{
                   minWidth: 256,
-                  minHeight: 128,
+                  minHeight: 64,
                   position: 'relative',
                   display: 'flex',
                 }}

src/app/tools/tankopedia/page.css.ts

@@ -7,6 +7,7 @@ export const flag = style({
   transitionDuration: theme.durations.regular,
   left: '0',
   top: '0',
+  scale: 1.5,
 
   // [`.${listing}:hover &, .${listing}:active &`]: {
   //   transform: 'translateX(-25%)',
@@ -15,10 +16,10 @@ export const flag = style({
 });
 
 export const listingShadow = style({
-  boxShadow: `inset 128px -128px 128px -128px ${theme.colors.appBackground1}`,
+  boxShadow: `inset 64px -80px 64px -64px ${theme.colors.appBackground1}`,
 
   [`.${listing}:hover &, .${listing}:active &`]: {
-    boxShadow: `inset 0 0 0 -128px ${theme.colors.appBackground1}`,
+    boxShadow: `inset 0 0 0 -64px ${theme.colors.appBackground1}`,
   },
 });
 
@@ -35,6 +36,7 @@ export const listingImage = style({
   transition: `transform ${theme.durations.regular}`,
   position: 'absolute',
   left: '50%',
+  top: '-25%',
 
   // [`.${listing}:hover &, .${listing}:active &`]: {
   //   transform: 'translate(-25%, 10%)',