fix: gap

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 />

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 {

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>
   );
 }

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);

packages/website-ue/src/types/space.ts

@@ -0,0 +1 @@
+export type Space = `${0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9}`;