From c08deb980ba5ba39ebeb8ee3e20bc746e713b931 Mon Sep 17 00:00:00 2001
From: jeffvli <jeffvictorli@gmail.com>
Date: Tue, 7 Oct 2025 11:37:10 -0700
Subject: [PATCH] set max genres displayed on genre column

---
 .../item-list/item-table-list/columns/genre-column.module.css | 1 +
 .../item-list/item-table-list/columns/genre-column.tsx        | 4 +++-
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/renderer/components/item-list/item-table-list/columns/genre-column.module.css b/src/renderer/components/item-list/item-table-list/columns/genre-column.module.css
index 47b14c5ed..2209c5917 100644
--- a/src/renderer/components/item-list/item-table-list/columns/genre-column.module.css
+++ b/src/renderer/components/item-list/item-table-list/columns/genre-column.module.css
@@ -1,5 +1,6 @@
 .group {
     gap: var(--theme-spacing-sm) var(--theme-spacing-xs);
+    padding: var(--theme-spacing-xs) 0;
     overflow: hidden;
 }
 
diff --git a/src/renderer/components/item-list/item-table-list/columns/genre-column.tsx b/src/renderer/components/item-list/item-table-list/columns/genre-column.tsx
index bd244d6b9..e8b7e4818 100644
--- a/src/renderer/components/item-list/item-table-list/columns/genre-column.tsx
+++ b/src/renderer/components/item-list/item-table-list/columns/genre-column.tsx
@@ -15,6 +15,8 @@ import { Skeleton } from '/@/shared/components/skeleton/skeleton';
 import { Genre } from '/@/shared/types/domain-types';
 import { stringToColor } from '/@/shared/utils/string-to-color';
 
+const MAX_GENRES = 4;
+
 const GenreColumn = (props: ItemTableListInnerColumn) => {
     const row: Genre[] | undefined = (props.data as (Genre[] | undefined)[])[props.rowIndex]?.[
         props.columns[props.columnIndex].id
@@ -33,7 +35,7 @@ const GenreColumn = (props: ItemTableListInnerColumn) => {
         return (
             <TableColumnContainer {...props}>
                 <Group className={styles.group} wrap="wrap">
-                    {genres.map((genre) => (
+                    {genres.slice(0, MAX_GENRES).map((genre) => (
                         <Badge
                             component={Link}
                             key={genre.id}