adjust artist album grid span

src/renderer/features/artists/components/album-artist-detail-content.tsx

@@ -696,9 +696,22 @@ interface AlbumSectionProps {
 
 const MAX_SECTION_CARDS = 20;
 
+const getSpan = (cq: ReturnType<typeof useContainerQuery>) => {
+    if (cq.is4xl) return 6;
+    if (cq.is3xl) return 7;
+    if (cq.is2xl) return 8;
+    if (cq.isXl) return 9;
+    if (cq.isLg) return 12;
+    if (cq.isMd) return 12;
+    if (cq.isSm) return 16;
+    if (cq.isXs) return 24;
+    return 24;
+};
+
 const AlbumSection = ({ albums, controls, cq, releaseType, rows, title }: AlbumSectionProps) => {
     const { t } = useTranslation();
-    const span = cq.isXl ? 3 : cq.isLg ? 4 : cq.isMd ? 6 : cq.isSm ? 8 : cq.isXs ? 12 : 12;
+
+    const span = getSpan(cq);
     const albumCount = albums.length;
     const [showAll, setShowAll] = useState(false);
     const player = usePlayer();
@@ -796,7 +809,7 @@ const AlbumSection = ({ albums, controls, cq, releaseType, rows, title }: AlbumS
                     )}
                 </div>
             </div>
-            <Grid columns={24} gutter="md" type="container">
+            <Grid columns={48} gutter="md" type="container">
                 {displayedAlbums.map((album) => (
                     <Grid.Col key={album.id} span={span}>
                         <motion.div

src/renderer/hooks/use-container-query.ts

@@ -3,6 +3,8 @@ import { useElementSize } from '/@/shared/hooks/use-element-size';
 interface UseContainerQueryProps {
     '2xl'?: number;
     '3xl'?: number;
+    '4xl'?: number;
+    '5xl'?: number;
     lg?: number;
     md?: number;
     sm?: number;
@@ -11,18 +13,44 @@ interface UseContainerQueryProps {
 }
 
 export const useContainerQuery = (props?: UseContainerQueryProps) => {
-    const { '2xl': xxl, '3xl': xxxl, lg, md, sm, xl, xs } = props || {};
+    const {
+        '2xl': xxl,
+        '3xl': xxxl,
+        '4xl': xxxxl,
+        '5xl': xxxxxl,
+        lg,
+        md,
+        sm,
+        xl,
+        xs,
+    } = props || {};
     const { height, ref, width } = useElementSize();
 
     const isXs = width >= (xs || 360);
-    const isSm = width >= (sm || 600);
+    const isSm = width >= (sm || 480);
-    const isMd = width >= (md || 768);
+    const isMd = width >= (md || 600);
-    const isLg = width >= (lg || 960);
+    const isLg = width >= (lg || 768);
-    const isXl = width >= (xl || 1200);
+    const isXl = width >= (xl || 960);
-    const is2xl = width >= (xxl || 1440);
+    const is2xl = width >= (xxl || 1152);
-    const is3xl = width >= (xxxl || 1920);
+    const is3xl = width >= (xxxl || 1280);
+    const is4xl = width >= (xxxxl || 1440);
+    const is5xl = width >= (xxxxxl || 1600);
 
     const isCalculated = width !== 0;
 
-    return { height, is2xl, is3xl, isCalculated, isLg, isMd, isSm, isXl, isXs, ref, width };
+    return {
+        height,
+        is2xl,
+        is3xl,
+        is4xl,
+        is5xl,
+        isCalculated,
+        isLg,
+        isMd,
+        isSm,
+        isXl,
+        isXs,
+        ref,
+        width,
+    };
 };