get over it

packages/website/src/components/TankSearch/index.module.css

@@ -8,14 +8,13 @@
   .label {
     margin: var(--space-4) 0;
 
-    /* mt="2" gap="1" align="center" justify="center" direction="column" */
+    display: flex;
+    justify-content: center;
 
     .count {
-      /* gap="2" */
+      display: flex;
+      flex-direction: column;
+      gap: var(--space-2);
     }
   }
-
-  .test-warning {
-    /* justify="center" mt="4" */
-  }
 }

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

@@ -29,7 +29,6 @@ import {
 import type { MaybeSkeletonComponentProps } from "../../types/maybeSkeletonComponentProps";
 import { Callout } from "../Callout";
 import { ExperimentIcon } from "../ExperimentIcon";
-import { Flex } from "../Flex";
 import { IncrementalLoader } from "../IncrementalLoader";
 import { Link } from "../Link";
 import { RecentlyViewedTanks } from "../RecentlyViewedTanks";
@@ -218,17 +217,37 @@ export const TankSearch = memo<TankSearchProps>(
         {!skeleton && !compact && <RecentlyViewedTanks />}
 
         {sorted.length > 0 && (
-          <Flex justify="center" className={styles.label}>
-            <div className={styles.count}>
-              <Text lowContrast>
+          <div className={styles.label}>
+            <Text lowContrast className={styles.count}>
               {sorted.length === 1
                 ? strings.website.common.tank_search.count_singular
                 : literals(strings.website.common.tank_search.count_plural, {
                     count: sorted.length.toLocaleString(locale),
                   })}
-              </Text>
+
+              {sortConfig && (
+                <>
+                  {" - "}
+                  {literals(strings.website.common.tank_search.sorting_by, {
+                    name: (
+                      strings.tanks.characteristics.items as Record<
+                        string,
+                        string
+                      >
+                    )[sortConfig],
+                  })}
+                  ,{" "}
+                  {
+                    strings.website.common.tank_search.sort.direction[
+                      tankopediaSort.direction
+                    ]
+                  }
+                </>
+              )}
 
               {onSelectAll && (
+                <>
+                  {" "}
                   <Link
                     underline="always"
                     href="#"
@@ -247,23 +266,10 @@ export const TankSearch = memo<TankSearchProps>(
                   >
                     {strings.website.common.tank_search.select_all}
                   </Link>
+                </>
               )}
-            </div>
-
-            {sortConfig && (
-              <Text color="gray">
-                {literals(strings.website.common.tank_search.sorting_by, {
-                  name: (
-                    strings.tanks.characteristics.items as Record<
-                      string,
-                      string
-                    >
-                  )[sortConfig],
-                })}
-                , {tankopediaSort.direction}
             </Text>
-            )}
-          </Flex>
+          </div>
         )}
 
         {tankFilters.showTesting && !tankFilters.showNonTesting && (

packages/website/src/components/TankSearchSort.tsx

@@ -107,10 +107,8 @@ export function TankSearchSort() {
           {strings.website.common.tank_search.sort.direction.label}
         </DropdownMenu.Label>
         <DropdownMenu.RadioGroup
-          value={`${direction}`}
-          onValueChange={(_value) => {
-            const value = Number(_value);
-
+          value={direction}
+          onValueChange={(value) => {
             if (
               value !== TankopediaSortDirection.Ascending &&
               value !== TankopediaSortDirection.Descending
@@ -123,18 +121,14 @@ export function TankSearchSort() {
             });
           }}
         >
-          <DropdownMenu.RadioItem
-            value={`${TankopediaSortDirection.Ascending}`}
-          >
+          <DropdownMenu.RadioItem value={TankopediaSortDirection.Ascending}>
             <DropdownMenu.ItemIndicator>
               <DotFilledIcon />
             </DropdownMenu.ItemIndicator>
 
             {strings.website.common.tank_search.sort.direction.ascending}
           </DropdownMenu.RadioItem>
-          <DropdownMenu.RadioItem
-            value={`${TankopediaSortDirection.Descending}`}
-          >
+          <DropdownMenu.RadioItem value={TankopediaSortDirection.Descending}>
             <DropdownMenu.ItemIndicator>
               <DotFilledIcon />
             </DropdownMenu.ItemIndicator>

packages/website/src/components/Tooltip/index.module.css

@@ -32,8 +32,7 @@
     }
   }
 
-  &:hover,
-  &:focus-within {
+  &:hover {
     .text {
       display: block;
     }

packages/website/src/stores/tankopediaPersistent/index.ts

@@ -1,8 +1,8 @@
 import { Soapstone } from "soapstone";
 
 export enum TankopediaSortDirection {
-  Ascending,
-  Descending,
+  Ascending = "ascending",
+  Descending = "descending",
 }
 
 export interface TankopediaPersistent {