diff --git a/app/components/BuildCard.tsx b/app/components/BuildCard.tsx index 975d36509..e73559334 100644 --- a/app/components/BuildCard.tsx +++ b/app/components/BuildCard.tsx @@ -54,7 +54,7 @@ interface BuildProps { export function BuildCard({ build, owner, canEdit = false }: BuildProps) { const user = useUser(); - const { t } = useTranslation(["weapons", "builds", "common"]); + const { t } = useTranslation(["weapons", "builds", "common", "game-misc"]); const { i18n } = useTranslation(); const isMounted = useIsMounted(); @@ -75,6 +75,20 @@ export function BuildCard({ build, owner, canEdit = false }: BuildProps) {
+ {modes && modes.length > 0 && ( +
+ {modes.map((mode) => ( + {t(`game-misc:MODE_LONG_${mode}` + ))} +
+ )}

{title}

@@ -138,24 +152,11 @@ export function BuildCard({ build, owner, canEdit = false }: BuildProps) { path={navIconUrl("analyzer")} /> - {description || (modes && modes.length > 0) ? ( + {description ? ( } triggerClassName="minimal tiny build__small-text" > - {modes && modes.length > 0 && ( -
- {modes.map((mode) => ( - - ))} -
- )} {description}
) : null} diff --git a/app/styles/common.css b/app/styles/common.css index c5f6e3004..9f292b2c5 100644 --- a/app/styles/common.css +++ b/app/styles/common.css @@ -780,11 +780,13 @@ dialog::backdrop { .builds-container { display: grid; justify-content: center; - gap: var(--s-3); + column-gap: var(--s-3); grid-template-columns: repeat(auto-fit, 240px); + row-gap: var(--s-4); } .build { + position: relative; display: flex; flex-direction: column; padding: var(--s-3); @@ -813,8 +815,11 @@ dialog::backdrop { } .build__modes { + position: absolute; + right: 0; display: flex; min-width: max-content; + margin-top: -21px; gap: var(--s-1); }