right bar

cspell.json

@@ -1,6 +1,7 @@
 {
   "words": [
     "gltf",
-    "amogos"
+    "amogos",
+    "Tankopedia"
   ]
 }

packages/i18n/strings/en.json

@@ -198,7 +198,12 @@
   },
 
   "tanks": {
+    "characteristics": {
+      "title": "Characteristics"
+    },
+
     "loadout": {
+      "title": "Loadout",
       "modules": "Modules",
       "equipment": "Equipment",
       "alternative": "Alt"

packages/website-ue/src/components/TankopediaCollapsible/index.module.css

@@ -0,0 +1,6 @@
+.collapsible {
+  display: flex;
+  flex-direction: column;
+
+  gap: var(--space-4);
+}

packages/website-ue/src/components/TankopediaCollapsible/index.tsx

@@ -0,0 +1,17 @@
+import type { ReactNode } from "react";
+import styles from "./index.module.css";
+import { Heading } from "../Heading";
+
+interface Props {
+  title: string;
+  children: ReactNode;
+}
+
+export function TankopediaCollapsible({ children, title }: Props) {
+  return (
+    <div className={styles.collapsible}>
+      <Heading size="2">{title}</Heading>
+      {children}
+    </div>
+  );
+}

packages/website-ue/src/components/TankopediaLoadout/index.module.css

@@ -6,7 +6,7 @@
   .header {
     display: flex;
     align-items: center;
-    gap: var(--space-4);
+    gap: var(--space-3);
 
     .upgrade-buttons {
       display: flex;

packages/website-ue/src/components/TankopediaLoadout/index.tsx

@@ -37,12 +37,14 @@ import styles from "./index.module.css";
 import type { ComputedCharacteristics } from "../../tankopedia/computeCharacteristics";
 import { Tooltip } from "../Tooltip";
 import { useGameStrings } from "../../hooks/useGameStrings";
+import { TankopediaCollapsible } from "../TankopediaCollapsible";
 
 interface TankopediaLoadoutProps {
   characteristics: ComputedCharacteristics;
 }
 
 export function TankopediaLoadout({ characteristics }: TankopediaLoadoutProps) {
+  const strings = useStrings();
   const tank = useProtagonist();
 
   const showModules = tank.tank!.upgrade_lines.some(
@@ -51,9 +53,15 @@ export function TankopediaLoadout({ characteristics }: TankopediaLoadoutProps) {
 
   return (
     <>
-      {showModules && <Modules />}
-      <Equipment />
-      {/*<Consumables characteristics={characteristics} />*/}
+      <TankopediaCollapsible title={strings.tanks.loadout.title}>
+        {showModules && <Modules />}
+        <Equipment />
+        <Consumables characteristics={characteristics} />
+      </TankopediaCollapsible>
+
+      <TankopediaCollapsible title={strings.tanks.characteristics.title}>
+        lmao
+      </TankopediaCollapsible>
     </>
   );
 }

packages/website-ue/src/pages/[...locale]/tanks/[slug]/_index.module.css

@@ -1,4 +1,5 @@
 .page {
+  max-height: 100dvh;
   flex-grow: 1;
   display: flex;
 
@@ -11,7 +12,10 @@
     display: flex;
     flex-direction: column;
 
-    gap: var(--space-5);
+    gap: var(--space-6);
     padding: var(--space-5);
+
+    overflow-y: auto;
+    overflow-x: ;
   }
 }

packages/website-ue/src/pages/[...locale]/tanks/[slug]/_index.tsx

@@ -42,6 +42,7 @@ export const Page = withErrorWrapper(
         <div className={styles.sandbox}>
           <TankopediaSandbox />
         </div>
+
         <div className={styles.stats}>
           <TankopediaLoadout characteristics={characteristics} />
         </div>