From e7708ce01b1fa6817f9d6362b59ae4524680831a Mon Sep 17 00:00:00 2001
From: tresabhi <43380238+tresabhi@users.noreply.github.com>
Date: Sun, 11 Oct 2026 01:14:08 -0500
Subject: [PATCH] indent

---
 packages/i18n/strings/en.json                 | 14 +++++-----
 .../index.module.css                          | 15 ++++++++---
 .../TankopediaCharacteristics/index.tsx       | 26 +++++++++++++++++--
 .../src/config/characteristicsGroups.ts       | 15 ++++++-----
 packages/website/src/types/characteristics.ts |  7 ++++-
 5 files changed, 59 insertions(+), 18 deletions(-)

diff --git a/packages/i18n/strings/en.json b/packages/i18n/strings/en.json
index 2962af18d..7d53b3868 100644
--- a/packages/i18n/strings/en.json
+++ b/packages/i18n/strings/en.json
@@ -70,12 +70,14 @@
         "brake_force": "Brake force",
         "weight": "Weight",
         "power_to_weight": "Power to weight",
-        "hard_terrain_coefficient": "Hard terrain coefficient",
-        "medium_terrain_coefficient": "Medium terrain coefficient",
-        "soft_terrain_coefficient": "Soft terrain coefficient",
-        "hard_terrain_coefficient_raw": "Raw hard terrain coefficient",
-        "medium_terrain_coefficient_raw": "Raw medium terrain coefficient",
-        "soft_terrain_coefficient_raw": "Raw soft terrain coefficient",
+        "terrain_coefficient": "Terrain coefficients",
+        "raw_terrain_coefficient": "Raw terrain coefficients",
+        "hard_terrain_coefficient": "Hard",
+        "medium_terrain_coefficient": "Medium",
+        "soft_terrain_coefficient": "Soft",
+        "hard_terrain_coefficient_raw": "Hard",
+        "medium_terrain_coefficient_raw": "Medium",
+        "soft_terrain_coefficient_raw": "Soft",
         "hull_traverse_speed": "Hull traverse speed",
         "turret_traverse_speed": "Turret traverse speed",
         "gun_traverse_speed": "Gun traverse speed",
diff --git a/packages/website/src/components/TankopediaCharacteristics/index.module.css b/packages/website/src/components/TankopediaCharacteristics/index.module.css
index a1b25fe43..37249ef07 100644
--- a/packages/website/src/components/TankopediaCharacteristics/index.module.css
+++ b/packages/website/src/components/TankopediaCharacteristics/index.module.css
@@ -35,7 +35,7 @@
 
         display: flex;
         align-items: center;
-        margin: 0 calc(var(--space-4));
+        margin: 0 calc(var(--space-3));
 
         .center {
           flex: 1;
@@ -67,8 +67,6 @@
         grid-auto-rows: inherit;
 
         .item {
-          padding: 0 var(--space-3);
-
           grid-row: span 1;
 
           display: flex;
@@ -76,6 +74,10 @@
           justify-content: center;
           gap: var(--space-2);
 
+          &[data-indent="true"] {
+            padding-left: var(--space-5);
+          }
+
           .value {
             display: flex;
             justify-content: space-between;
@@ -107,6 +109,13 @@
           }
         }
 
+        .label {
+          grid-row: span 1;
+
+          display: flex;
+          align-items: center;
+        }
+
         .toy {
           grid-row: span var(--group-span);
           padding: var(--space-4) 0;
diff --git a/packages/website/src/components/TankopediaCharacteristics/index.tsx b/packages/website/src/components/TankopediaCharacteristics/index.tsx
index 62f5f128f..f8e4f3dc0 100644
--- a/packages/website/src/components/TankopediaCharacteristics/index.tsx
+++ b/packages/website/src/components/TankopediaCharacteristics/index.tsx
@@ -50,9 +50,14 @@ interface GroupProps {
 function Group({ group, characteristics }: GroupProps) {
   const strings = useStrings();
   const toys = group.order.filter((item) => "toy" in item).length;
-  const items = group.order.filter(
+  const characteristicsCount = group.order.filter(
     (item) => "name" in item && characteristics.has(item.name),
   ).length;
+  const labelsCount =
+    characteristicsCount > 0
+      ? group.order.filter((item) => "label" in item).length
+      : 0;
+  const items = characteristicsCount + labelsCount;
   const groupSpan = `calc(${toys} * var(--group-span) + ${items} + 2)`;
   const contentSpan = `calc(${toys} * var(--group-span) + ${items})`;
 
@@ -88,6 +93,7 @@ function Group({ group, characteristics }: GroupProps) {
         {group.order.map((item) => (
           <>
             {"toy" in item && <Toy {...item} />}
+            {"label" in item && <Label {...item} />}
             {"name" in item && characteristics.has(item.name) && (
               <Item config={item} value={characteristics.get(item.name)!} />
             )}
@@ -100,6 +106,22 @@ function Group({ group, characteristics }: GroupProps) {
   );
 }
 
+interface LabelProps {
+  label: string;
+}
+
+function Label({ label }: LabelProps) {
+  const strings = useStrings();
+
+  return (
+    <div className={styles.label}>
+      <Text lowContrast>
+        {(strings.tanks.characteristics.items as Record<string, string>)[label]}
+      </Text>
+    </div>
+  );
+}
+
 interface ItemProps {
   config: CharacteristicRenderConfig;
   value: CharacteristicReturnType;
@@ -111,7 +133,7 @@ function Item({ config, value }: ItemProps) {
   const hasUnits = config.units !== undefined;
 
   return (
-    <span className={styles.item}>
+    <span className={styles.item} data-indent={config.indent}>
       <div className={styles.value}>
         <Text lowContrast>
           {
diff --git a/packages/website/src/config/characteristicsGroups.ts b/packages/website/src/config/characteristicsGroups.ts
index 78b0967f3..7dca410f4 100644
--- a/packages/website/src/config/characteristicsGroups.ts
+++ b/packages/website/src/config/characteristicsGroups.ts
@@ -163,12 +163,15 @@ export const characteristicsGroups: CharacteristicsGroup[] = [
       { name: "power_to_weight", decimals: 1, units: "bhp_t" },
       { name: "brake_force", decimals: 1, units: "kN" },
 
-      { name: "hard_terrain_coefficient", decimals: 0 },
-      { name: "medium_terrain_coefficient", decimals: 0 },
-      { name: "soft_terrain_coefficient", decimals: 0 },
-      { name: "hard_terrain_coefficient_raw", decimals: 2 },
-      { name: "medium_terrain_coefficient_raw", decimals: 2 },
-      { name: "soft_terrain_coefficient_raw", decimals: 2 },
+      { label: "terrain_coefficient" },
+      { name: "hard_terrain_coefficient", decimals: 0, indent: true },
+      { name: "medium_terrain_coefficient", decimals: 0, indent: true },
+      { name: "soft_terrain_coefficient", decimals: 0, indent: true },
+
+      { label: "raw_terrain_coefficient" },
+      { name: "hard_terrain_coefficient_raw", decimals: 2, indent: true },
+      { name: "medium_terrain_coefficient_raw", decimals: 2, indent: true },
+      { name: "soft_terrain_coefficient_raw", decimals: 2, indent: true },
 
       { name: "hull_traverse_speed", units: "deg_s" },
       { name: "turret_traverse_speed", units: "deg_s" },
diff --git a/packages/website/src/types/characteristics.ts b/packages/website/src/types/characteristics.ts
index 6bf26c4f0..945884630 100644
--- a/packages/website/src/types/characteristics.ts
+++ b/packages/website/src/types/characteristics.ts
@@ -78,6 +78,7 @@ export interface CharacteristicRenderConfig {
   decimals?: number;
   units?: keyof Strings["units"];
   localize?: boolean;
+  indent?: boolean;
   strings?: string;
 
   render?: (data: {
@@ -90,7 +91,11 @@ export interface ToyRenderConfig {
   toy: string;
 }
 
+export interface LabelRenderConfig {
+  label: string;
+}
+
 export type CharacteristicsGroup = {
   name: string;
-  order: (CharacteristicRenderConfig | ToyRenderConfig)[];
+  order: (CharacteristicRenderConfig | LabelRenderConfig | ToyRenderConfig)[];
 };