Fix tier list maker export tier widths

app/features/tier-list-maker/components/TierListGraphic.module.css

@@ -37,15 +37,21 @@
 }
 
 .tiers {
-	display: flex;
-	flex-direction: column;
+	display: grid;
+	grid-template-columns: max-content 1fr;
 	gap: var(--s-2);
 }
 
+.tiersWithoutLabels {
+	grid-template-columns: 1fr;
+}
+
+/* subgrid so every label shares the widest label's width */
 .tierRow {
-	display: flex;
+	display: grid;
+	grid-template-columns: subgrid;
+	grid-column: 1 / -1;
 	align-items: stretch;
-	gap: var(--s-2);
 	min-height: 64px;
 	padding: var(--s-1-5);
 	background-color: var(--graphic-row-bg);
@@ -55,7 +61,6 @@
 
 .tierLabel {
 	display: flex;
-	flex-shrink: 0;
 	align-items: center;
 	justify-content: center;
 	min-width: 68px;

app/features/tier-list-maker/components/TierListGraphic.tsx

@@ -1,3 +1,4 @@
+import clsx from "clsx";
 import { useTranslation } from "react-i18next";
 import { Avatar } from "~/components/Avatar";
 import { GraphicContainer } from "~/features/img-export/components/Graphic";
@@ -38,7 +39,11 @@ export function TierListGraphic({
 					<span className={styles.authorName}>{author.username}</span>
 				</div>
 			) : null}
-			<div className={styles.tiers}>
+			<div
+				className={clsx(styles.tiers, {
+					[styles.tiersWithoutLabels]: !showTierHeaders,
+				})}
+			>
 				{tiers.map((tier) => (
 					<div key={tier.id} className={styles.tierRow}>
 						{showTierHeaders ? (

changelog/2026-09-08-tier-list-export-label-width.md

@@ -0,0 +1,5 @@
+---
+navItem: tier-list-maker
+type: bug
+---
+Fixed tier names having different widths in the exported tier list image