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,52 +217,59 @@ export const TankSearch = memo<TankSearchProps>(
         {!skeleton && !compact && <RecentlyViewedTanks />}
 
         {sorted.length > 0 && (
-          <Flex justify="center" className={styles.label}>
-            <div className={styles.count}>
-              <Text lowContrast>
-                {sorted.length === 1
-                  ? strings.website.common.tank_search.count_singular
-                  : literals(strings.website.common.tank_search.count_plural, {
-                      count: sorted.length.toLocaleString(locale),
-                    })}
-              </Text>
+          <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),
+                  })}
+
+              {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="#"
-                  onClick={(event) => {
-                    event.preventDefault();
-                    onSelectAll(sorted);
-                    TankopediaPersistent.mutate((draft) => {
-                      draft.recentlyViewed = uniq([
-                        ...sorted.map(({ id }) => id),
-                        ...draft.recentlyViewed,
-                      ])
-                        .filter((id) => id in tankDefinitions.tanks)
-                        .slice(0, MAX_RECENTLY_VIEWED);
-                    });
-                  }}
-                >
-                  {strings.website.common.tank_search.select_all}
-                </Link>
+                <>
+                  {" "}
+                  <Link
+                    underline="always"
+                    href="#"
+                    onClick={(event) => {
+                      event.preventDefault();
+                      onSelectAll(sorted);
+                      TankopediaPersistent.mutate((draft) => {
+                        draft.recentlyViewed = uniq([
+                          ...sorted.map(({ id }) => id),
+                          ...draft.recentlyViewed,
+                        ])
+                          .filter((id) => id in tankDefinitions.tanks)
+                          .slice(0, MAX_RECENTLY_VIEWED);
+                      });
+                    }}
+                  >
+                    {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>
+            </Text>
+          </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 {