set max genres displayed on genre column

This commit is contained in:
jeffvli
2025-10-07 11:37:10 -07:00
parent b9f600409e
commit c08deb980b
2 changed files with 4 additions and 1 deletions
@@ -1,5 +1,6 @@
.group { .group {
gap: var(--theme-spacing-sm) var(--theme-spacing-xs); gap: var(--theme-spacing-sm) var(--theme-spacing-xs);
padding: var(--theme-spacing-xs) 0;
overflow: hidden; overflow: hidden;
} }
@@ -15,6 +15,8 @@ import { Skeleton } from '/@/shared/components/skeleton/skeleton';
import { Genre } from '/@/shared/types/domain-types'; import { Genre } from '/@/shared/types/domain-types';
import { stringToColor } from '/@/shared/utils/string-to-color'; import { stringToColor } from '/@/shared/utils/string-to-color';
const MAX_GENRES = 4;
const GenreColumn = (props: ItemTableListInnerColumn) => { const GenreColumn = (props: ItemTableListInnerColumn) => {
const row: Genre[] | undefined = (props.data as (Genre[] | undefined)[])[props.rowIndex]?.[ const row: Genre[] | undefined = (props.data as (Genre[] | undefined)[])[props.rowIndex]?.[
props.columns[props.columnIndex].id props.columns[props.columnIndex].id
@@ -33,7 +35,7 @@ const GenreColumn = (props: ItemTableListInnerColumn) => {
return ( return (
<TableColumnContainer {...props}> <TableColumnContainer {...props}>
<Group className={styles.group} wrap="wrap"> <Group className={styles.group} wrap="wrap">
{genres.map((genre) => ( {genres.slice(0, MAX_GENRES).map((genre) => (
<Badge <Badge
component={Link} component={Link}
key={genre.id} key={genre.id}