diff --git a/app/features/tier-list-maker/components/TierListGraphic.module.css b/app/features/tier-list-maker/components/TierListGraphic.module.css index b71af974f..e63d4c7b8 100644 --- a/app/features/tier-list-maker/components/TierListGraphic.module.css +++ b/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; diff --git a/app/features/tier-list-maker/components/TierListGraphic.tsx b/app/features/tier-list-maker/components/TierListGraphic.tsx index 1aedfdf30..347522c27 100644 --- a/app/features/tier-list-maker/components/TierListGraphic.tsx +++ b/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({ {author.username} ) : null} -