From 0869ea09c817fe93d5ad984debcf9e6c951a5214 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tr=C3=A8sAbhi?= <43380238+tresabhi@users.noreply.github.com>
Date: Wed, 18 Mar 2026 18:03:47 -0500
Subject: [PATCH] fix: gap

---
 packages/website-ue/src/components/HomeTanks.astro  |  2 +-
 .../src/components/Section/index.module.css         |  1 -
 .../website-ue/src/components/Section/index.tsx     | 13 +++++++++++--
 .../website-ue/src/pages/api/avatars/[id].json.ts   |  9 +--------
 packages/website-ue/src/types/space.ts              |  1 +
 5 files changed, 14 insertions(+), 12 deletions(-)
 create mode 100644 packages/website-ue/src/types/space.ts

diff --git a/packages/website-ue/src/components/HomeTanks.astro b/packages/website-ue/src/components/HomeTanks.astro
index 39ffcaf34..dc99f7d8c 100644
--- a/packages/website-ue/src/components/HomeTanks.astro
+++ b/packages/website-ue/src/components/HomeTanks.astro
@@ -21,7 +21,7 @@ const strings = await api.strings(locale);
   }
 </style>
 
-<Section>
+<Section gap="4">
   <Heading size="2" className="title">{strings.home.tanks}</Heading>
 
   <HomeTanksPopular {locale} client:load />
diff --git a/packages/website-ue/src/components/Section/index.module.css b/packages/website-ue/src/components/Section/index.module.css
index aaaf3a50e..197ab6605 100644
--- a/packages/website-ue/src/components/Section/index.module.css
+++ b/packages/website-ue/src/components/Section/index.module.css
@@ -9,7 +9,6 @@
 
     display: flex;
     flex-direction: column;
-    gap: var(--space-5);
   }
 
   &[data-first="true"] .content {
diff --git a/packages/website-ue/src/components/Section/index.tsx b/packages/website-ue/src/components/Section/index.tsx
index 59e3d8349..6776d44e9 100644
--- a/packages/website-ue/src/components/Section/index.tsx
+++ b/packages/website-ue/src/components/Section/index.tsx
@@ -1,19 +1,28 @@
 import type { ComponentProps } from "react";
 import { classNames } from "../../core/ui/classNames";
+import type { Space } from "../../types/space";
 import styles from "./index.module.css";
 
 export interface SectionProps extends ComponentProps<"div"> {
   first?: boolean;
+  gap: Space;
 }
 
-export function Section({ className, children, ...props }: SectionProps) {
+export function Section({
+  className,
+  gap = "5",
+  children,
+  ...props
+}: SectionProps) {
   return (
     <div
       data-first={props.first}
       className={classNames(styles.section, className)}
       {...props}
     >
-      <div className={styles.content}>{children}</div>
+      <div className={styles.content} style={{ gap: `var(--space-${gap})` }}>
+        {children}
+      </div>
     </div>
   );
 }
diff --git a/packages/website-ue/src/pages/api/avatars/[id].json.ts b/packages/website-ue/src/pages/api/avatars/[id].json.ts
index 2520b8d51..aaa2de685 100644
--- a/packages/website-ue/src/pages/api/avatars/[id].json.ts
+++ b/packages/website-ue/src/pages/api/avatars/[id].json.ts
@@ -10,14 +10,7 @@ export const getStaticPaths = (async () => {
 }) satisfies GetStaticPaths;
 
 /**
- * This is a very long.
- * And boring.
- *
- * But important.
- * Developer comment.
- *
- * Meant to test.
- * The **formatting**!
+ * Returns data on an avatar based on its id. @see avatars/list.json for a list of all avatar ids.
  */
 export async function GET({ params }: APIContext<never, { id: string }>) {
   const avatar = await api.avatar(params.id);
diff --git a/packages/website-ue/src/types/space.ts b/packages/website-ue/src/types/space.ts
new file mode 100644
index 000000000..6b34b0d32
--- /dev/null
+++ b/packages/website-ue/src/types/space.ts
@@ -0,0 +1 @@
+export type Space = `${0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9}`;