feat: more responsive

packages/i18n/strings/en.json

@@ -1010,7 +1010,7 @@
         "characteristics": {
           "title": "Characteristics",
           "compare": {
-            "label": "Compare against",
+            "label": "Compare",
             "class": "Tier %s1 %s2",
             "tier": "All of tier %s1",
             "all": "All tanks"

packages/website/src/components/Tankopedia/CharacteristicsSection/components/Characteristics/components/CompareOptions.tsx

@@ -1,6 +1,6 @@
 import { TIER_ROMAN_NUMERALS } from '@blitzkit/core';
 import { literals } from '@blitzkit/i18n/src/literals';
-import { Flex, Heading, SegmentedControl, Text } from '@radix-ui/themes';
+import { Flex, SegmentedControl, Text, type FlexProps } from '@radix-ui/themes';
 import { useLocale } from '../../../../../../hooks/useLocale';
 import { Duel } from '../../../../../../stores/duel';
 import {
@@ -8,7 +8,7 @@ import {
   TankopediaRelativeAgainst,
 } from '../../../../../../stores/tankopediaEphemeral';
 
-export function CharacteristicsHeading() {
+export function CompareOptions(props: FlexProps) {
   const relativeAgainst = TankopediaEphemeral.use(
     (state) => state.relativeAgainst,
   );
@@ -18,19 +18,18 @@ export function CharacteristicsHeading() {
 
   return (
     <Flex
-      align={{ initial: 'stretch', md: 'start' }}
+      align="center"
       gap="2"
-      direction="column"
+      justify="center"
+      direction={{ initial: 'column', sm: 'row' }}
+      {...props}
     >
-      <Heading mb="2">
-        {strings.website.tools.tankopedia.characteristics.title}
-      </Heading>
-
       <Text color="gray">
         {strings.website.tools.tankopedia.characteristics.compare.label}
       </Text>
+
       <SegmentedControl.Root
-        size={{ initial: '1', md: '2' }}
+        size="1"
         value={`${relativeAgainst}`}
         onValueChange={(value) => {
           mutateTankopediaEphemeral((draft) => {

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

@@ -1,7 +1,6 @@
-import { Flex, Heading } from '@radix-ui/themes';
-import { useLocale } from '../../../hooks/useLocale';
+import { Flex } from '@radix-ui/themes';
 import { Characteristics } from './components/Characteristics';
-import { CharacteristicsHeading } from './components/Characteristics/components/Heading';
+import { CompareOptions } from './components/Characteristics/components/CompareOptions';
 import { Consumables } from './components/Consumables';
 import { Equipment } from './components/Equipment';
 import { Miscellaneous } from './components/Miscellaneous';
@@ -10,42 +9,42 @@ import { Provisions } from './components/Provisions';
 import { Skills } from './components/Skills';
 
 export function CharacteristicsSection() {
-  const { strings } = useLocale();
-
   return (
-    <Flex mt="4" px="4" style={{ boxSizing: 'border-box' }} gap="6">
-      <Flex
-        flexGrow="1"
-        gap="9"
-        justify="center"
-        align={{ initial: 'center', sm: 'start' }}
-        direction={{ initial: 'column', sm: 'row' }}
-      >
-        <Flex
-          direction="column"
-          gap="6"
-          maxWidth="21rem"
-          align={{ initial: 'center', sm: 'start' }}
-        >
-          <Heading>
-            {strings.website.tools.tankopedia.configuration.title}
-          </Heading>
-          <Modules />
-          <Equipment />
-          <Provisions />
-          <Consumables />
-          <Skills />
-          <Miscellaneous />
-        </Flex>
+    <Flex direction="column" gap="3">
+      <CompareOptions display={{ initial: 'none', sm: 'flex' }} />
+
+      <Flex mt="4" px="4" style={{ boxSizing: 'border-box' }} gap="6">
         <Flex
           flexGrow="1"
-          maxWidth={{ initial: '20rem', md: '40rem' }}
-          direction="column"
-          gap="6"
-          width="100%"
+          gap="9"
+          justify="center"
+          align={{ initial: 'center', sm: 'start' }}
+          direction={{ initial: 'column', sm: 'row' }}
         >
-          <CharacteristicsHeading />
-          <Characteristics />
+          <Flex
+            direction="column"
+            gap="6"
+            maxWidth="21rem"
+            align={{ initial: 'center', sm: 'start' }}
+          >
+            <Modules />
+            <Equipment />
+            <Provisions />
+            <Consumables />
+            <Skills />
+            <Miscellaneous />
+          </Flex>
+
+          <Flex
+            flexGrow="1"
+            maxWidth={{ initial: '20rem', md: '40rem' }}
+            direction="column"
+            gap="6"
+            width="100%"
+          >
+            <CompareOptions display={{ initial: 'flex', sm: 'none' }} />
+            <Characteristics />
+          </Flex>
         </Flex>
       </Flex>
     </Flex>

packages/website/src/components/Tankopedia/MetaSection/components/Listing.tsx

@@ -11,8 +11,7 @@ export function Listing({ label, ...props }: ListingProps) {
       minWidth="17rem"
       justify="between"
       gap="4"
-      px="1"
-      style={{ borderBottom: `1px solid ${Var('gray-11')}` }}
+      style={{ borderBottom: `1px solid ${Var('gray-a9')}` }}
     >
       <Text size="4">{label}</Text>
       <Text align="right" size="4" weight="medium" {...props} />

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

@@ -24,12 +24,12 @@ export function MetaSection() {
   const ClassIcon = classIcons[protagonist.class];
   const { locale, strings } = useLocale();
 
-  console.log(protagonist.nation);
-
   return (
     <Box
       style={{
         background: `url(/assets/images/national-wallpapers/${protagonist.nation}.jpg)`,
+        backgroundRepeat: 'no-repeat',
+        backgroundSize: 'cover',
         backgroundPosition:
           NATIONAL_BANNER_POSITION_OVERRIDES[protagonist.nation] ?? 'center',
       }}
@@ -39,7 +39,7 @@ export function MetaSection() {
           background: `url(${asset(`flags/scratched/${protagonist.nation}.webp`)})`,
           backgroundRepeat: 'no-repeat',
           backgroundSize: '53rem',
-          backgroundPosition: '-25% 50%',
+          backgroundPosition: '-8rem 50%',
         }}
       >
         <Flex
@@ -52,7 +52,7 @@ export function MetaSection() {
         >
           <Flex direction="column" align="center" gap="6">
             <Flex
-              gap={{ initial: '0', sm: '8' }}
+              gap={{ initial: '2', sm: '8' }}
               direction={{ initial: 'column', sm: 'row' }}
             >
               <Flex direction="column" width="100%" gap="2">

packages/website/src/components/Tankopedia/VideoSection.tsx

@@ -16,7 +16,7 @@ export function VideoSection({ skeleton }: MaybeSkeletonComponentProps) {
   const videos = reviews.reviews[tank.id]?.videos;
   const { strings } = useLocale();
 
-  if (!videos) return null;
+  if (videos === undefined || videos.length === 0) return null;
 
   return (
     <PageWrapper noFlex1 noMinHeight>