no results

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

@@ -6,6 +6,10 @@
   align-items: center;
   gap: var(--space-3);
 
+  &[data-underline="always"] {
+    text-decoration: underline;
+  }
+
   &[data-underline="hover"],
   &[data-underline="never"] {
     text-decoration: none;

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

@@ -2,6 +2,10 @@
   display: flex;
   justify-content: center;
 
+  &:last-child {
+    flex: 1;
+  }
+
   .content {
     flex: 1;
     max-width: var(--page-width);

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

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

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

@@ -31,9 +31,9 @@ import { TankCardSkeleton } from "../TankCardSkeleton";
 import { TankCardWrapper } from "../TankCardWrapper";
 import { TankSearchBar } from "../TankSearchBar";
 import { TankSearchFilters } from "../TankSearchFilters";
+import { TankSearchNoResults } from "../TankSearchNoResults";
 import { Text } from "../Text";
 import { TankSearchCard } from "./components/Card";
-import { NoResults } from "./components/NoResults";
 import { MAX_RECENTLY_VIEWED } from "./constants";
 import styles from "./index.module.css";
 
@@ -428,7 +428,7 @@ export const TankSearch = memo<TankSearchProps>(
     }, [tankFilters, tankopediaSort]);
 
     return (
-      <Flex column gap="4">
+      <Flex className={styles.container} column gap="4">
         <TankSearchBar
           skeleton={skeleton}
           topResult={tanks?.[0]}
@@ -439,6 +439,7 @@ export const TankSearch = memo<TankSearchProps>(
 
         {!skeleton && !compact && <RecentlyViewedTanks />}
 
+        {tanks.length > 0 && (
           <Flex justify="center" className={styles.label}>
             <div className={styles.count}>
               <Text lowContrast>
@@ -485,6 +486,7 @@ export const TankSearch = memo<TankSearchProps>(
               </Text>
             )}
           </Flex>
+        )}
 
         {tankFilters.showTesting && !tankFilters.showNonTesting && (
           <div className={styles["test-warning"]}>
@@ -525,7 +527,7 @@ export const TankSearch = memo<TankSearchProps>(
               </TankCardWrapper>
             )}
 
-            {tanks.length === 0 && <NoResults type="search" />}
+            {tanks.length === 0 && <TankSearchNoResults type="search" />}
           </>
         )}
       </Flex>

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

@@ -0,0 +1,3 @@
+.no-results {
+  flex: 1;
+}

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

@@ -1,22 +1,22 @@
-import { useLocale } from "../../../hooks/useLocale";
+import { useLocale } from "../../hooks/useLocale";
-import { TankFilters } from "../../../stores/tankFilters";
+import { TankFilters } from "../../stores/tankFilters";
-import { Flex } from "../../Flex";
+import { Flex } from "../Flex";
-import { Link } from "../../Link";
+import { Link } from "../Link";
-import { Text } from "../../Text";
+import { Text } from "../Text";
+import styles from "./index.module.css";
 
 interface NoResultsProps {
   type?: "filters" | "search";
 }
 
-export function NoResults({ type = "filters" }: NoResultsProps) {
+export function TankSearchNoResults({ type = "filters" }: NoResultsProps) {
   const { strings } = useLocale();
 
   return (
-    <Flex align="center" justify="center">
+    <Flex className={styles["no-results"]} align="center" justify="center">
       <Text lowContrast>
         {strings.website.common.tank_search.no_tanks_found.body}{" "}
         <Link
-          href="#"
           underline="always"
           color="red"
           onClick={() => {