From 2c44bd83746c7f452673c920c138480ceb5bf4ec Mon Sep 17 00:00:00 2001
From: tresabhi <43380238+tresabhi@users.noreply.github.com>
Date: Wed, 27 May 2026 08:46:13 -0500
Subject: [PATCH] right bar

---
 cspell.json                                     |  3 ++-
 packages/i18n/strings/en.json                   |  5 +++++
 .../TankopediaCollapsible/index.module.css      |  6 ++++++
 .../components/TankopediaCollapsible/index.tsx  | 17 +++++++++++++++++
 .../TankopediaLoadout/index.module.css          |  2 +-
 .../src/components/TankopediaLoadout/index.tsx  | 14 +++++++++++---
 .../[...locale]/tanks/[slug]/_index.module.css  |  6 +++++-
 .../pages/[...locale]/tanks/[slug]/_index.tsx   |  1 +
 8 files changed, 48 insertions(+), 6 deletions(-)
 create mode 100644 packages/website-ue/src/components/TankopediaCollapsible/index.module.css
 create mode 100644 packages/website-ue/src/components/TankopediaCollapsible/index.tsx

diff --git a/cspell.json b/cspell.json
index bb3bf0311..a71222e13 100644
--- a/cspell.json
+++ b/cspell.json
@@ -1,6 +1,7 @@
 {
   "words": [
     "gltf",
-    "amogos"
+    "amogos",
+    "Tankopedia"
   ]
 }
\ No newline at end of file
diff --git a/packages/i18n/strings/en.json b/packages/i18n/strings/en.json
index e9b37e735..3607af087 100644
--- a/packages/i18n/strings/en.json
+++ b/packages/i18n/strings/en.json
@@ -198,7 +198,12 @@
   },
 
   "tanks": {
+    "characteristics": {
+      "title": "Characteristics"
+    },
+
     "loadout": {
+      "title": "Loadout",
       "modules": "Modules",
       "equipment": "Equipment",
       "alternative": "Alt"
diff --git a/packages/website-ue/src/components/TankopediaCollapsible/index.module.css b/packages/website-ue/src/components/TankopediaCollapsible/index.module.css
new file mode 100644
index 000000000..967771a3e
--- /dev/null
+++ b/packages/website-ue/src/components/TankopediaCollapsible/index.module.css
@@ -0,0 +1,6 @@
+.collapsible {
+  display: flex;
+  flex-direction: column;
+
+  gap: var(--space-4);
+}
diff --git a/packages/website-ue/src/components/TankopediaCollapsible/index.tsx b/packages/website-ue/src/components/TankopediaCollapsible/index.tsx
new file mode 100644
index 000000000..7d45ffc8b
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/packages/website-ue/src/components/TankopediaLoadout/index.module.css b/packages/website-ue/src/components/TankopediaLoadout/index.module.css
index 13cb04e1f..cbcb5f749 100644
--- a/packages/website-ue/src/components/TankopediaLoadout/index.module.css
+++ b/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;
diff --git a/packages/website-ue/src/components/TankopediaLoadout/index.tsx b/packages/website-ue/src/components/TankopediaLoadout/index.tsx
index 4671369b2..c5b0384f3 100644
--- a/packages/website-ue/src/components/TankopediaLoadout/index.tsx
+++ b/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>
     </>
   );
 }
diff --git a/packages/website-ue/src/pages/[...locale]/tanks/[slug]/_index.module.css b/packages/website-ue/src/pages/[...locale]/tanks/[slug]/_index.module.css
index 5b61de927..7e8d3942b 100644
--- a/packages/website-ue/src/pages/[...locale]/tanks/[slug]/_index.module.css
+++ b/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: ;
   }
 }
diff --git a/packages/website-ue/src/pages/[...locale]/tanks/[slug]/_index.tsx b/packages/website-ue/src/pages/[...locale]/tanks/[slug]/_index.tsx
index 0279f8fd1..056344059 100644
--- a/packages/website-ue/src/pages/[...locale]/tanks/[slug]/_index.tsx
+++ b/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>