Fix busted grids

src/assets/styles/utils.scss

@@ -86,3 +86,7 @@ ul {
 .flex-basis-fit-content {
     flex-basis: fit-content;
 }
+
+.flex-basis-max-content {
+    flex-basis: max-content;
+}

src/common/AutoGrid.tsx

@@ -9,7 +9,7 @@ export interface AutoGridProps extends GridProps
 
 export const AutoGrid: FC<AutoGridProps> = props =>
 {
-    const { columnMinWidth = 40, columnMinHeight = 40, columnCount = 0, fullHeight = false, overflow = 'auto', style = {}, ...rest } = props;
+    const { columnMinWidth = 40, columnMinHeight = 40, columnCount = 0, fullHeight = false, maxContent = true, overflow = 'auto', style = {}, ...rest } = props;
 
     const getStyle = useMemo(() =>
     {

src/common/Grid.tsx

@@ -26,10 +26,12 @@ export const Grid: FC<GridProps> = props =>
         if(gap) newClassNames.push('gap-' + gap);
         else if(gap === 0) newClassNames.push('gap-0');
 
+        if(maxContent) newClassNames.push('flex-basis-max-content');
+
         if(classNames.length) newClassNames.push(...classNames);
 
         return newClassNames;
-    }, [ inline, gap, classNames ]);
+    }, [ inline, gap, maxContent, classNames ]);
 
     const getStyle = useMemo(() =>
     {
@@ -37,12 +39,10 @@ export const Grid: FC<GridProps> = props =>
 
         if(columnCount) newStyle['--bs-columns'] = columnCount.toString();
 
-        if(maxContent) newStyle.gridTemplateRows = 'max-content';
-
         if(Object.keys(style).length) newStyle = { ...newStyle, ...style };
 
         return newStyle;
-    }, [ columnCount, maxContent, style ]);
+    }, [ columnCount, style ]);
 
     return (
         <GridContextProvider value={ { isCssGrid: true } }>

src/components/avatar-editor/views/figure-set/AvatarEditorFigureSetView.tsx

@@ -30,7 +30,7 @@ export const AvatarEditorFigureSetView: FC<AvatarEditorFigureSetViewProps> = pro
     }, [ model, category, setMaxPaletteCount ]);
 
     return (
-        <AutoGrid grow columnCount={ 3 } columnMinHeight={ 50 } overflow="auto">
+        <AutoGrid columnCount={ 3 } columnMinHeight={ 50 }>
             { (category.parts.length > 0) && category.parts.map((item, index) =>
                 <AvatarEditorFigureSetItemView key={ index } partItem={ item } onClick={ event => selectPart(item) } />) }
         </AutoGrid>

src/components/avatar-editor/views/palette-set/AvatarEditorPaletteSetView.tsx

@@ -27,7 +27,7 @@ export const AvatarEditorPaletteSetView: FC<AvatarEditorPaletteSetViewProps> = p
     }, [ model, category, paletteSet, paletteIndex ]);
 
     return (
-        <AutoGrid grow columnCount={ 4 } columnMinWidth={ 30 } overflow="auto">
+        <AutoGrid columnCount={ 4 } columnMinWidth={ 30 }>
             { (paletteSet.length > 0) && paletteSet.map((item, index) =>
                 <AvatarEditorPaletteSetItem key={ index } colorItem={ item } onClick={ event => selectColor(item) } />) }
         </AutoGrid>

src/components/catalog/views/navigation/CatalogNavigationView.tsx

@@ -1,6 +1,6 @@
 import { FC } from 'react';
+import { AutoGrid } from '../../../../common/AutoGrid';
 import { Column } from '../../../../common/Column';
-import { Grid } from '../../../../common/Grid';
 import { useCatalogContext } from '../../CatalogContext';
 import { ICatalogNode } from '../../common/ICatalogNode';
 import { CatalogSearchView } from '../page/common/CatalogSearchView';
@@ -21,14 +21,14 @@ export const CatalogNavigationView: FC<CatalogNavigationViewProps> = props =>
         <>
             <CatalogSearchView />
             <Column fullHeight className="nitro-catalog-navigation-grid-container p-1" overflow="hidden">
-                <Grid gap={ 1 } columnCount={ 1 } overflow="auto">
+                <AutoGrid gap={ 1 } columnCount={ 1 }>
                     { searchResult && (searchResult.filteredNodes.length > 0) && searchResult.filteredNodes.map((n, index) =>
                     {
                         return <CatalogNavigationItemView key={ index } node={ n } />;
                     })}
                     { !searchResult &&
                         <CatalogNavigationSetView node={ node } /> }
-                </Grid>
+                </AutoGrid>
             </Column>
         </>
     );

src/components/catalog/views/page/widgets/CatalogBadgeSelectorWidgetView.tsx

@@ -17,7 +17,7 @@ interface CatalogBadgeSelectorWidgetViewProps extends AutoGridProps
 
 export const CatalogBadgeSelectorWidgetView: FC<CatalogBadgeSelectorWidgetViewProps> = props =>
 {
-    const { grow = true, columnCount = 5, overflow = 'auto', ...rest } = props;
+    const { columnCount = 5, ...rest } = props;
     const [ badges, setBadges ] = useState<string[]>([]);
     const [ currentBadge, setCurrentBadge ] = useState<string>(null);
     const { currentOffer = null, setPurchaseOptions = null } = useCatalogContext();
@@ -59,7 +59,7 @@ export const CatalogBadgeSelectorWidgetView: FC<CatalogBadgeSelectorWidgetViewPr
     }, []);
 
     return (
-        <AutoGrid grow={ grow } columnCount={ columnCount } overflow={ overflow } { ...rest }>
+        <AutoGrid columnCount={ columnCount } { ...rest }>
             { badges && (badges.length > 0) && badges.map(code =>
                 {
                     return (

src/components/catalog/views/page/widgets/CatalogBundleGridWidgetView.tsx

@@ -10,13 +10,13 @@ interface CatalogBundleGridWidgetViewProps extends AutoGridProps
 
 export const CatalogBundleGridWidgetView: FC<CatalogBundleGridWidgetViewProps> = props =>
 {
-    const { children = null, ...rest } = props;
+    const { columnCount = 5, children = null, ...rest } = props;
     const { currentOffer = null } = useCatalogContext();
 
     if(!currentOffer) return null;
 
     return (
-        <AutoGrid grow columnCount={ 5 } overflow="auto" { ...rest }>
+        <AutoGrid columnCount={ 5 } { ...rest }>
             { currentOffer.products && (currentOffer.products.length > 0) && currentOffer.products.map((product, index) => <LayoutGridItem key={ index } itemImage={ product.getIconUrl() } itemCount={ product.productCount } />) }
             { children }
         </AutoGrid>

src/components/catalog/views/page/widgets/CatalogViewProductWidgetView.tsx

@@ -92,7 +92,7 @@ export const CatalogViewProductWidgetView: FC<{}> = props =>
     {
         return (
             <Column fit overflow="hidden" className="bg-muted p-2 rounded">
-                <AutoGrid fullWidth grow columnCount={ 4 } overflow="auto" className="nitro-catalog-layout-bundle-grid">
+                <AutoGrid fullWidth columnCount={ 4 } className="nitro-catalog-layout-bundle-grid">
                     { (currentOffer.products.length > 0) && currentOffer.products.map((product, index) =>
                     {
                         return <LayoutGridItem key={ index } itemImage={ product.getIconUrl(currentOffer) } itemCount={ product.productCount } />;