Fix/manga grid infinite item width (#376)

* Calculate GridItem width once

Was unnecessarily calculated on every item render

* Update grid dimensions everytime the height or width changes

Hook only run once, which could lead to an issue where the grid item width was calculated to be infinite.
Could be that this is only an issue in dev mode due to react-strict mode.

src/components/MangaGrid.tsx

@@ -24,18 +24,21 @@ const GridContainer = React.forwardRef<HTMLDivElement, GridTypeMap['props']>(({
     </Grid>
 ));
 
-const GridItemContainerWithDimension =
-    (dimensions: number, itemWidth: number, gridLayout?: GridLayout, maxColumns: number = 12) =>
-    ({ children, ...itemProps }: GridTypeMap['props'] & Partial<GridItemProps>) => {
-        const itemsPerRow = Math.ceil(dimensions / itemWidth);
-        const columnsPerItem = gridLayout === GridLayout.List ? maxColumns : maxColumns / itemsPerRow;
+const GridItemContainerWithDimension = (
+    dimensions: number,
+    itemWidth: number,
+    gridLayout?: GridLayout,
+    maxColumns: number = 12,
+) => {
+    const itemsPerRow = Math.ceil(dimensions / itemWidth);
+    const columnsPerItem = gridLayout === GridLayout.List ? maxColumns : maxColumns / itemsPerRow;
 
-        return (
-            <Grid {...itemProps} item xs={columnsPerItem} sx={{ paddingTop: '8px', paddingLeft: '8px' }}>
-                {children}
-            </Grid>
-        );
-    };
+    return ({ children, ...itemProps }: GridTypeMap['props'] & Partial<GridItemProps>) => (
+        <Grid {...itemProps} item xs={columnsPerItem} sx={{ paddingTop: '8px', paddingLeft: '8px' }}>
+            {children}
+        </Grid>
+    );
+};
 
 const createMangaCard = (manga: IMangaCard, gridLayout?: GridLayout, inLibraryIndicator?: boolean) => (
     <MangaCard key={manga.id} manga={manga} gridLayout={gridLayout} inLibraryIndicator={inLibraryIndicator} />
@@ -188,7 +191,7 @@ const MangaGrid: React.FC<IMangaGridProps> = (props) => {
         });
     };
 
-    useLayoutEffect(updateGridWidth, []);
+    useLayoutEffect(() => updateGridWidth, [gridRef.current?.offsetWidth, gridRef.current?.offsetHeight]);
 
     useEffect(() => {
         let movementTimer: NodeJS.Timeout;