[AI] Improve theme catalog responsive layout in ThemeInstaller

packages/desktop-client/src/components/settings/ThemeInstaller.tsx

@@ -28,10 +28,10 @@ import type {
   InstalledTheme,
 } from '@desktop-client/style/customThemes';
 
-// Theme item fixed dimensions
-const THEME_ITEM_HEIGHT = 140;
-const THEME_ITEM_WIDTH = 140;
+// Theme item dimensions
+const ITEMS_PER_ROW = 3;
 const THEME_ITEM_GAP = 12;
+const THEME_ITEM_PADDING = 4; // horizontal padding on each side
 const CATALOG_MAX_HEIGHT = 300;
 
 type ThemeInstallerProps = {
@@ -78,15 +78,11 @@ export function ThemeInstaller({
     }
   }, [installedTheme]);
 
-  // Calculate items per row based on container width
-  const getItemsPerRow = useCallback((containerWidth: number) => {
-    const padding = 8; // 4px on each side
-    const availableWidth = containerWidth - padding;
-    return Math.max(
-      1,
-      Math.floor(
-        (availableWidth + THEME_ITEM_GAP) / (THEME_ITEM_WIDTH + THEME_ITEM_GAP),
-      ),
+  // Calculate theme item width based on container width (always 3 per row)
+  const getItemWidth = useCallback((containerWidth: number) => {
+    const availableWidth = containerWidth - THEME_ITEM_PADDING * 2;
+    return Math.floor(
+      (availableWidth - (ITEMS_PER_ROW - 1) * THEME_ITEM_GAP) / ITEMS_PER_ROW,
     );
   }, []);
 
@@ -292,10 +288,10 @@ export function ThemeInstaller({
                 const catalogItems = [...(catalog ?? [])]
                   .filter(catalogTheme => !mode || catalogTheme.mode === mode)
                   .sort((a, b) => a.name.localeCompare(b.name));
-                const itemsPerRow = getItemsPerRow(width);
+                const itemWidth = getItemWidth(width);
                 const rows: CatalogTheme[][] = [];
-                for (let i = 0; i < catalogItems.length; i += itemsPerRow) {
-                  rows.push(catalogItems.slice(i, i + itemsPerRow));
+                for (let i = 0; i < catalogItems.length; i += ITEMS_PER_ROW) {
+                  rows.push(catalogItems.slice(i, i + ITEMS_PER_ROW));
                 }
 
                 return (
@@ -303,17 +299,18 @@ export function ThemeInstaller({
                     width={width}
                     height={height}
                     itemCount={rows.length}
-                    itemSize={THEME_ITEM_HEIGHT + THEME_ITEM_GAP}
+                    itemSize={itemWidth + THEME_ITEM_GAP}
                     itemKey={index => `row-${index}`}
-                    renderRow={({ index, style }) => {
+                    renderRow={({ index, key, style }) => {
                       const rowThemes = rows[index];
                       return (
                         <div
+                          key={key}
                           style={{
                             ...style,
                             display: 'flex',
                             gap: THEME_ITEM_GAP,
-                            padding: '0 4px',
+                            padding: `0 ${THEME_ITEM_PADDING}px`,
                           }}
                         >
                           {rowThemes.map((theme, themeIndex) => {
@@ -334,8 +331,8 @@ export function ThemeInstaller({
                                 aria-label={theme.name}
                                 onPress={() => handleCatalogThemeClick(theme)}
                                 style={{
-                                  width: THEME_ITEM_WIDTH,
-                                  height: THEME_ITEM_HEIGHT,
+                                  width: itemWidth,
+                                  height: itemWidth,
                                   padding: 8,
                                   borderRadius: 6,
                                   border: `2px solid ${

upcoming-release-notes/7253.md

@@ -0,0 +1,6 @@
+---
+category: Bugfixes
+authors: [MatissJanis]
+---
+
+Custom Reports: improving responsitivity of the theme catalog