Grid updates

src/common/AutoGrid.tsx

@@ -0,0 +1,28 @@
+import { CSSProperties, FC, useMemo } from 'react';
+import { Grid, GridProps } from './Grid';
+
+export interface AutoGridProps extends GridProps
+{
+    columnMinWidth?: number;
+    columnMinHeight?: number;
+}
+
+export const AutoGrid: FC<AutoGridProps> = props =>
+{
+    const { columnMinWidth = 40, columnMinHeight = 40, columnCount = 0, fullHeight = false, overflow = 'auto', style = {}, ...rest } = props;
+
+    const getStyle = useMemo(() =>
+    {
+        let newStyle: CSSProperties = {};
+
+        newStyle['--nitro-grid-column-min-height'] = (columnMinHeight + 'px');
+        
+        if(columnCount > 1) newStyle.gridTemplateColumns = `repeat(auto-fill, minmax(${ columnMinWidth }px, 1fr))`;
+
+        if(Object.keys(style).length) newStyle = { ...newStyle, ...style };
+
+        return newStyle;
+    }, [ columnMinWidth, columnMinHeight, columnCount, style ]);
+
+    return <Grid columnCount={ columnCount } fullHeight={ fullHeight } overflow={ overflow } style={ getStyle } { ...rest } />;
+}

src/common/Grid.tsx

@@ -1,22 +1,20 @@
-import { CSSProperties, FC, useMemo } from 'react';
+import { FC, useMemo } from 'react';
+import { CSSProperties } from 'styled-components';
 import { Base, BaseProps } from './Base';
 import { GridContextProvider } from './GridContext';
 import { SpacingType } from './types';
 
 export interface GridProps extends BaseProps<HTMLDivElement>
 {
-    columnCount?: number;
-    columnMinWidth?: number;
-    columnMinHeight?: number;
-    grow?: boolean;
     inline?: boolean;
     gap?: SpacingType;
     maxContent?: boolean;
+    columnCount?: number;
 }
 
 export const Grid: FC<GridProps> = props =>
 {
-    const { columnCount = 0, columnMinWidth = 40, columnMinHeight = 40, grow = false, fullHeight = undefined, inline = false, gap = 2, maxContent = false, classNames = [], style = {}, ...rest } = props;
+    const { inline = false, gap = 2, maxContent = false, columnCount = 0, fullHeight = true, classNames = [], style = {}, ...rest } = props;
 
     const getClassNames = useMemo(() =>
     {
@@ -37,28 +35,18 @@ export const Grid: FC<GridProps> = props =>
     {
         let newStyle: CSSProperties = {};
 
-        if(columnCount)
+        if(columnCount) newStyle['--bs-columns'] = columnCount.toString();
-        {
-            newStyle['--bs-columns'] = columnCount.toString();
-        }
-
-        if(grow && (!columnCount || (columnCount > 1)))
-        {
-            newStyle['--nitro-grid-column-min-width'] = (columnMinWidth + 'px');
-            newStyle['--nitro-grid-column-min-height'] = (columnMinHeight + 'px');
-            newStyle.gridTemplateColumns = 'repeat(auto-fill, minmax(var(--nitro-grid-column-min-width, 45px), 1fr)';
-        }
 
         if(maxContent) newStyle.gridTemplateRows = 'max-content';
 
         if(Object.keys(style).length) newStyle = { ...newStyle, ...style };
 
         return newStyle;
-    }, [ columnCount, columnMinWidth, columnMinHeight, grow, maxContent, style ]);
+    }, [ columnCount, maxContent, style ]);
 
     return (
         <GridContextProvider value={ { isCssGrid: true } }>
-            <Base classNames={ getClassNames } style={ getStyle } fullHeight={ ((fullHeight !== undefined) ? fullHeight : !grow) } { ...rest } />
+            <Base fullHeight={ fullHeight } classNames={ getClassNames } style={ getStyle } { ...rest } />
         </GridContextProvider>
     );
 }

src/components/achievements/AchievementsView.tsx

@@ -229,7 +229,7 @@ export const AchievementsView: FC<{}> = props =>
             <NitroCardContentView>
                 { !getSelectedCategory &&
                     <>
-                        <AchievementsCategoryListView categories={ achievementCategories } selectedCategoryCode={ selectedCategoryCode } setSelectedCategoryCode={ setSelectedCategoryCode } overflow="auto"  />
+                        <AchievementsCategoryListView categories={ achievementCategories } selectedCategoryCode={ selectedCategoryCode } setSelectedCategoryCode={ setSelectedCategoryCode } />
                         <Column grow justifyContent="end">
                             <Base className="progress" position="relative">
                                 <Flex fit center position="absolute" className="text-black">{ LocalizeText('achievements.categories.totalprogress', [ 'progress', 'limit' ], [ getProgress.toString(), getMaxProgress.toString() ]) }</Flex>

src/components/achievements/views/achievement-list/AchievementListView.tsx

@@ -1,9 +1,9 @@
 import { AchievementData } from '@nitrots/nitro-renderer';
 import { Dispatch, FC, SetStateAction } from 'react';
-import { Grid, GridProps } from '../../../../common/Grid';
+import { AutoGrid } from '../../../../common/AutoGrid';
 import { AchievementListItemView } from './AchievementListItemView';
 
-export interface AchievementListViewProps extends GridProps
+export interface AchievementListViewProps
 {
     achievements: AchievementData[];
     selectedAchievementId: number;
@@ -12,15 +12,15 @@ export interface AchievementListViewProps extends GridProps
 
 export const AchievementListView: FC<AchievementListViewProps> = props =>
 {
-    const { achievements = null, selectedAchievementId = 0, setSelectedAchievementId = null, children = null, ...rest } = props;
+    const { achievements = null, selectedAchievementId = 0, setSelectedAchievementId = null, children = null } = props;
 
     return (
-        <Grid grow columnCount={ 6 } columnMinWidth={ 50 } columnMinHeight={ 50 } overflow="auto" { ...rest }>
+        <AutoGrid columnCount={ 6 } columnMinWidth={ 50 } columnMinHeight={ 50 }>
             { achievements && (achievements.length > 0) && achievements.map((achievement, index) =>
                 {
                     return <AchievementListItemView key={ index } achievement={ achievement } itemActive={ (selectedAchievementId === achievement.achievementId) } onClick={ event => setSelectedAchievementId(achievement.achievementId) } />;
                 }) }
             { children }
-        </Grid>
+        </AutoGrid>
     );
 }

src/components/achievements/views/category-list/AchievementsCategoryListView.tsx

@@ -1,9 +1,9 @@
 import { Dispatch, FC, SetStateAction } from 'react';
-import { Grid, GridProps } from '../../../../common/Grid';
+import { AutoGrid } from '../../../../common/AutoGrid';
 import { AchievementCategory } from '../../common/AchievementCategory';
 import { AchievementsCategoryListItemView } from './AchievementsCategoryListItemView';
 
-export interface AchievementsCategoryListViewProps extends GridProps
+export interface AchievementsCategoryListViewProps
 {
     categories: AchievementCategory[];
     selectedCategoryCode: string;
@@ -12,12 +12,12 @@ export interface AchievementsCategoryListViewProps extends GridProps
 
 export const AchievementsCategoryListView: FC<AchievementsCategoryListViewProps> = props =>
 {
-    const { categories = null, selectedCategoryCode = null, setSelectedCategoryCode = null, children = null, ...rest } = props;
+    const { categories = null, selectedCategoryCode = null, setSelectedCategoryCode = null, children = null } = props;
     
     return (
-        <Grid grow columnMinWidth={ 90 } columnMinHeight={ 100 } { ...rest }>
+        <AutoGrid columnMinWidth={ 90 } columnMinHeight={ 100 }>
             { categories && (categories.length > 0) && categories.map((category, index) => <AchievementsCategoryListItemView key={ index } category={ category } itemActive={ (selectedCategoryCode === category.code) } onClick={ event => setSelectedCategoryCode(category.code) } /> ) }
             { children }
-        </Grid>
+        </AutoGrid>
     );
 };

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

@@ -1,5 +1,5 @@
 import { Dispatch, FC, SetStateAction, useCallback } from 'react';
-import { Grid } from '../../../../common/Grid';
+import { AutoGrid } from '../../../../common/AutoGrid';
 import { AvatarEditorGridPartItem } from '../../common/AvatarEditorGridPartItem';
 import { CategoryData } from '../../common/CategoryData';
 import { IAvatarEditorCategoryModel } from '../../common/IAvatarEditorCategoryModel';
@@ -30,9 +30,9 @@ export const AvatarEditorFigureSetView: FC<AvatarEditorFigureSetViewProps> = pro
     }, [ model, category, setMaxPaletteCount ]);
 
     return (
-        <Grid grow columnCount={ 3 } columnMinHeight={ 50 } overflow="auto">
+        <AutoGrid grow columnCount={ 3 } columnMinHeight={ 50 } overflow="auto">
             { (category.parts.length > 0) && category.parts.map((item, index) =>
                 <AvatarEditorFigureSetItemView key={ index } partItem={ item } onClick={ event => selectPart(item) } />) }
-        </Grid>
+        </AutoGrid>
     );
 }

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

@@ -1,5 +1,5 @@
 import { FC, useCallback } from 'react';
-import { Grid } from '../../../../common/Grid';
+import { AutoGrid } from '../../../../common/AutoGrid';
 import { AvatarEditorGridColorItem } from '../../common/AvatarEditorGridColorItem';
 import { CategoryData } from '../../common/CategoryData';
 import { IAvatarEditorCategoryModel } from '../../common/IAvatarEditorCategoryModel';
@@ -27,9 +27,9 @@ export const AvatarEditorPaletteSetView: FC<AvatarEditorPaletteSetViewProps> = p
     }, [ model, category, paletteSet, paletteIndex ]);
 
     return (
-        <Grid grow columnCount={ 4 } columnMinWidth={ 30 } overflow="auto">
+        <AutoGrid grow columnCount={ 4 } columnMinWidth={ 30 } overflow="auto">
             { (paletteSet.length > 0) && paletteSet.map((item, index) =>
                 <AvatarEditorPaletteSetItem key={ index } colorItem={ item } onClick={ event => selectColor(item) } />) }
-        </Grid>
+        </AutoGrid>
     );
 }

src/components/avatar-editor/views/wardrobe/AvatarEditorWardrobeView.tsx

@@ -2,7 +2,7 @@ import { IAvatarFigureContainer, SaveWardrobeOutfitMessageComposer } from '@nitr
 import { Dispatch, FC, SetStateAction, useCallback, useMemo } from 'react';
 import { Button } from 'react-bootstrap';
 import { GetAvatarRenderManager, GetSessionDataManager } from '../../../../api';
-import { Grid } from '../../../../common/Grid';
+import { AutoGrid } from '../../../../common/AutoGrid';
 import { LayoutGridItem } from '../../../../common/layout/LayoutGridItem';
 import { SendMessageHook } from '../../../../hooks';
 import { AvatarImageView } from '../../../../views/shared/avatar-image/AvatarImageView';
@@ -74,8 +74,8 @@ export const AvatarEditorWardrobeView: FC<AvatarEditorWardrobeViewProps> = props
     }, [ savedFigures, saveFigureAtWardrobeIndex, wearFigureAtIndex ]);
 
     return (
-        <Grid grow columnCount={ 5 } overflow="auto" columnMinWidth={ 80 } columnMinHeight={ 140 }>
+        <AutoGrid grow columnCount={ 5 } overflow="auto" columnMinWidth={ 80 } columnMinHeight={ 140 }>
             { figures }
-        </Grid>
+        </AutoGrid>
     );
 }

src/components/camera/views/editor/effect-list/CameraWidgetEffectListView.tsx

@@ -1,6 +1,6 @@
 import { IRoomCameraWidgetEffect, IRoomCameraWidgetSelectedEffect } from '@nitrots/nitro-renderer';
 import { FC } from 'react';
-import { Grid } from '../../../../../common/Grid';
+import { AutoGrid } from '../../../../../common/AutoGrid';
 import { CameraPictureThumbnail } from '../../../common/CameraPictureThumbnail';
 import { CameraWidgetEffectListItemView } from './CameraWidgetEffectListItemView';
 
@@ -18,7 +18,7 @@ export const CameraWidgetEffectListView: FC<CameraWidgetEffectListViewProps> = p
     const { myLevel = 0, selectedEffects = [], effects = [], thumbnails = [], processAction = null } = props;
 
     return (
-        <Grid columnCount={ 2 } overflow="auto" columnMinHeight={ 60 }>
+        <AutoGrid columnCount={ 2 } columnMinHeight={ 60 }>
             { effects && (effects.length > 0) && effects.map((effect, index) =>
                 {
                     const thumbnailUrl = (thumbnails.find(thumbnail => (thumbnail.effectName === effect.name)));
@@ -26,6 +26,6 @@ export const CameraWidgetEffectListView: FC<CameraWidgetEffectListViewProps> = p
 
                     return <CameraWidgetEffectListItemView key={ index } effect={ effect } thumbnailUrl={ ((thumbnailUrl && thumbnailUrl.thumbnailUrl) || null) } isActive={ isActive } isLocked={ (effect.minLevel > myLevel) } selectEffect={ () => processAction('select_effect', effect.name) } removeEffect={ () => processAction('remove_effect', effect.name) } />
                 }) }
-        </Grid>
+        </AutoGrid>
     );
 }

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

@@ -21,7 +21,7 @@ export const CatalogNavigationView: FC<CatalogNavigationViewProps> = props =>
         <>
             <CatalogSearchView />
             <Column fullHeight className="nitro-catalog-navigation-grid-container p-1" overflow="hidden">
-                <Grid grow columnCount={ 1 } gap={ 1 } overflow="auto">
+                <Grid gap={ 1 } columnCount={ 1 } overflow="auto">
                     { searchResult && (searchResult.filteredNodes.length > 0) && searchResult.filteredNodes.map((n, index) =>
                     {
                         return <CatalogNavigationItemView key={ index } node={ n } />;

src/components/catalog/views/page/layout/CatalogLayoutVipBuyView.tsx

@@ -1,6 +1,7 @@
 import { ClubOfferData, GetClubOffersMessageComposer, PurchaseFromCatalogComposer } from '@nitrots/nitro-renderer';
 import { FC, useCallback, useEffect, useMemo, useState } from 'react';
 import { LocalizeText } from '../../../../../api';
+import { AutoGrid } from '../../../../../common/AutoGrid';
 import { Button } from '../../../../../common/Button';
 import { Column } from '../../../../../common/Column';
 import { Flex } from '../../../../../common/Flex';
@@ -147,7 +148,7 @@ export const CatalogLayoutVipBuyView: FC<CatalogLayoutProps> = props =>
     return (
         <Grid>
             <Column fullHeight size={ 7 } overflow="hidden" justifyContent="between">
-                <Grid grow columnCount={ 1 } className="nitro-catalog-layout-vip-buy-grid" overflow="auto">
+                <AutoGrid columnCount={ 1 } className="nitro-catalog-layout-vip-buy-grid">
                     { clubOffers && (clubOffers.length > 0) && clubOffers.map((offer, index) =>
                         {
                             return (
@@ -171,7 +172,7 @@ export const CatalogLayoutVipBuyView: FC<CatalogLayoutProps> = props =>
                                 </LayoutGridItem>
                             );
                         }) }
-                </Grid>
+                </AutoGrid>
                 <Text center dangerouslySetInnerHTML={{ __html: LocalizeText('catalog.vip.buy.hccenter') }}></Text>
             </Column>
             <Column size={ 5 } overflow="hidden">

src/components/catalog/views/page/layout/marketplace/CatalogLayoutMarketplaceOwnItemsView.tsx

@@ -106,7 +106,7 @@ export const CatalogLayoutMarketplaceOwnItemsView: FC<CatalogLayoutProps> = prop
                 <Text truncate shrink fontWeight="bold">
                     { LocalizeText('catalog.marketplace.items_found', [ 'count' ], [ offers.length.toString() ]) }
                 </Text>
-                <Grid columnCount={ 1 } overflow="auto" className="nitro-catalog-layout-marketplace-grid">
+                <Grid overflow="auto" className="nitro-catalog-layout-marketplace-grid">
                 { (offers.length > 0) && offers.map(offer => <CatalogLayoutMarketplaceItemView key={ offer.offerId } offerData={ offer } type={ OWN_OFFER } onClick={ takeItemBack } />) }
             </Grid>
             </Column>

src/components/catalog/views/page/layout/marketplace/CatalogLayoutMarketplacePublicItemsView.tsx

@@ -163,7 +163,7 @@ export const CatalogLayoutMarketplacePublicItemsView: FC<CatalogLayoutMarketplac
                 <Text truncate shrink fontWeight="bold">
                     { LocalizeText('catalog.marketplace.items_found', [ 'count' ], [ offers.size.toString() ]) }
                 </Text>
-                <Grid columnCount={ 1 } className="nitro-catalog-layout-marketplace-grid" overflow="auto">
+                <Grid className="nitro-catalog-layout-marketplace-grid" overflow="auto">
                     { 
                         Array.from(offers.values()).map( (entry, index) => <CatalogLayoutMarketplaceItemView key={ index } offerData={ entry } type={ PUBLIC_OFFER } onClick={purchaseItem} />)
                     }

src/components/catalog/views/page/layout/pets/CatalogLayoutPetView.tsx

@@ -2,6 +2,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { ApproveNameMessageComposer, ColorConverter, GetSellablePetPalettesComposer, PurchaseFromCatalogComposer, SellablePetPaletteData } from '@nitrots/nitro-renderer';
 import { FC, useCallback, useEffect, useMemo, useState } from 'react';
 import { LocalizeText } from '../../../../../../api';
+import { AutoGrid } from '../../../../../../common/AutoGrid';
 import { Base } from '../../../../../../common/Base';
 import { Button } from '../../../../../../common/Button';
 import { Column } from '../../../../../../common/Column';
@@ -218,7 +219,7 @@ export const CatalogLayoutPetView: FC<CatalogLayoutProps> = props =>
     return (
         <Grid>
             <Column size={ 7 } overflow="hidden">
-                <Grid grow columnCount={ 5 } overflow="auto">
+                <AutoGrid columnCount={ 5 }>
                     { !colorsShowing && (sellablePalettes.length > 0) && sellablePalettes.map((palette, index) =>
                         {
                             return (
@@ -228,7 +229,7 @@ export const CatalogLayoutPetView: FC<CatalogLayoutProps> = props =>
                             );
                         })}
                     { colorsShowing && (sellableColors.length > 0) && sellableColors.map((colorSet, index) => <LayoutGridItem key={ index } itemActive={ (selectedColorIndex === index) } itemColor={ ColorConverter.int2rgb(colorSet[0]) } onClick={ event => setSelectedColorIndex(index) } />) }
-                </Grid>
+                </AutoGrid>
             </Column>
             <Column center={ !currentOffer } size={ 5 } overflow="hidden">
                 { !currentOffer &&

src/components/catalog/views/page/layout/vip-gifts/CatalogLayoutVipGiftsView.tsx

@@ -45,7 +45,7 @@ export const CatalogLayoutVipGiftsView: FC<CatalogLayoutProps> = props =>
     return (
         <>
             <Text truncate shrink fontWeight="bold">{ giftsAvailable() }</Text>
-            <Grid columnCount={ 1 } className="nitro-catalog-layout-vip-gifts-grid" overflow="auto">
+            <Grid className="nitro-catalog-layout-vip-gifts-grid" overflow="auto">
                 { (clubGifts.offers.length > 0) && clubGifts.offers.map(offer => <VipGiftItem key={ offer.offerId } offer={ offer } isAvailable={ (clubGifts.getOfferExtraData(offer.offerId).isSelectable && (clubGifts.giftsAvailable > 0)) } onSelect={ selectGift }/>) }
             </Grid>
         </>

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

@@ -1,6 +1,6 @@
 import { StringDataType } from '@nitrots/nitro-renderer';
 import { FC, useCallback, useEffect, useMemo, useState } from 'react';
-import { Grid, GridProps } from '../../../../../common/Grid';
+import { AutoGrid, AutoGridProps } from '../../../../../common/AutoGrid';
 import { LayoutGridItem } from '../../../../../common/layout/LayoutGridItem';
 import { InventoryBadgesUpdatedEvent } from '../../../../../events';
 import { InventoryBadgesRequestEvent } from '../../../../../events/inventory/InventoryBadgesRequestEvent';
@@ -10,7 +10,7 @@ import { useCatalogContext } from '../../../CatalogContext';
 
 const EXCLUDED_BADGE_CODES: string[] = [];
 
-interface CatalogBadgeSelectorWidgetViewProps extends GridProps
+interface CatalogBadgeSelectorWidgetViewProps extends AutoGridProps
 {
 
 }
@@ -59,7 +59,7 @@ export const CatalogBadgeSelectorWidgetView: FC<CatalogBadgeSelectorWidgetViewPr
     }, []);
 
     return (
-        <Grid grow={ grow } columnCount={ columnCount } overflow={ overflow } { ...rest }>
+        <AutoGrid grow={ grow } columnCount={ columnCount } overflow={ overflow } { ...rest }>
             { badges && (badges.length > 0) && badges.map(code =>
                 {
                     return (
@@ -68,6 +68,6 @@ export const CatalogBadgeSelectorWidgetView: FC<CatalogBadgeSelectorWidgetViewPr
                         </LayoutGridItem>
                     );
                 }) }
-        </Grid>
+        </AutoGrid>
     );
 }

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

@@ -1,9 +1,9 @@
 import { FC } from 'react';
-import { Grid, GridProps } from '../../../../../common/Grid';
+import { AutoGrid, AutoGridProps } from '../../../../../common/AutoGrid';
 import { LayoutGridItem } from '../../../../../common/layout/LayoutGridItem';
 import { useCatalogContext } from '../../../CatalogContext';
 
-interface CatalogBundleGridWidgetViewProps extends GridProps
+interface CatalogBundleGridWidgetViewProps extends AutoGridProps
 {
 
 }
@@ -16,9 +16,9 @@ export const CatalogBundleGridWidgetView: FC<CatalogBundleGridWidgetViewProps> =
     if(!currentOffer) return null;
 
     return (
-        <Grid grow columnCount={ 5 } overflow="auto" { ...rest }>
+        <AutoGrid grow columnCount={ 5 } overflow="auto" { ...rest }>
             { currentOffer.products && (currentOffer.products.length > 0) && currentOffer.products.map((product, index) => <LayoutGridItem key={ index } itemImage={ product.getIconUrl() } itemCount={ product.productCount } />) }
             { children }
-        </Grid>
+        </AutoGrid>
     );
 }

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

@@ -1,5 +1,5 @@
 import { FC } from 'react';
-import { Grid, GridProps } from '../../../../../common/Grid';
+import { AutoGrid, AutoGridProps } from '../../../../../common/AutoGrid';
 import { CatalogSetExtraPurchaseParameterEvent } from '../../../../../events';
 import { dispatchUiEvent } from '../../../../../hooks';
 import { useCatalogContext } from '../../../CatalogContext';
@@ -7,14 +7,14 @@ import { IPurchasableOffer } from '../../../common/IPurchasableOffer';
 import { ProductTypeEnum } from '../../../common/ProductTypeEnum';
 import { CatalogGridOfferView } from '../common/CatalogGridOfferView';
 
-interface CatalogItemGridWidgetViewProps extends GridProps
+interface CatalogItemGridWidgetViewProps extends AutoGridProps
 {
 
 }
 
 export const CatalogItemGridWidgetView: FC<CatalogItemGridWidgetViewProps> = props =>
 {
-    const { children = null, ...rest } = props;
+    const { columnCount = 5, children = null, ...rest } = props;
     const { currentOffer = null, setCurrentOffer = null, currentPage = null } = useCatalogContext();
 
     if(!currentPage) return null;
@@ -30,12 +30,12 @@ export const CatalogItemGridWidgetView: FC<CatalogItemGridWidgetViewProps> = pro
     }
 
     return (
-        <Grid grow columnCount={ 5 } overflow="auto" { ...rest }>
+        <AutoGrid columnCount={ columnCount } { ...rest }>
             { currentPage.offers && (currentPage.offers.length > 0) && currentPage.offers.map((offer, index) =>
             {
                 return <CatalogGridOfferView key={ index } itemActive={ (currentOffer && (currentOffer.offerId === offer.offerId)) } offer={ offer } onClick={ event => selectOffer(offer) } />;
             }) }
             { children }
-        </Grid>
+        </AutoGrid>
     );
 }

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

@@ -1,8 +1,8 @@
 import { FC, useEffect, useState } from 'react';
 import { LocalizeText } from '../../../../../api';
+import { AutoGrid, AutoGridProps } from '../../../../../common/AutoGrid';
 import { Button } from '../../../../../common/Button';
 import { ButtonGroup } from '../../../../../common/ButtonGroup';
-import { Grid, GridProps } from '../../../../../common/Grid';
 import { BatchUpdates } from '../../../../../hooks';
 import { useCatalogContext } from '../../../CatalogContext';
 import { IPurchasableOffer } from '../../../common/IPurchasableOffer';
@@ -10,7 +10,7 @@ import { Offer } from '../../../common/Offer';
 import { ProductTypeEnum } from '../../../common/ProductTypeEnum';
 import { CatalogGridOfferView } from '../common/CatalogGridOfferView';
 
-interface CatalogSpacesWidgetViewProps extends GridProps
+interface CatalogSpacesWidgetViewProps extends AutoGridProps
 {
 
 }
@@ -19,7 +19,7 @@ const SPACES_GROUP_NAMES = [ 'floors', 'walls', 'views' ];
 
 export const CatalogSpacesWidgetView: FC<CatalogSpacesWidgetViewProps> = props =>
 {
-    const { children = null, ...rest } = props;
+    const { columnCount = 5, children = null, ...rest } = props;
     const [ groupedOffers, setGroupedOffers ] = useState<IPurchasableOffer[][]>(null);
     const [ selectedGroupIndex, setSelectedGroupIndex ] = useState(-1);
     const [ selectedOfferForGroup, setSelectedOfferForGroup ] = useState<IPurchasableOffer[]>(null);
@@ -93,7 +93,7 @@ export const CatalogSpacesWidgetView: FC<CatalogSpacesWidgetViewProps> = props =
             <ButtonGroup>
                 { SPACES_GROUP_NAMES.map((name, index) => <Button key={ index } active={ (selectedGroupIndex === index) } onClick={ event => setSelectedGroupIndex(index) }>{ LocalizeText(`catalog.spaces.tab.${ name }`) }</Button>) }
             </ButtonGroup>
-            <Grid grow columnCount={ 5 } overflow="auto" { ...rest }>
+            <AutoGrid columnCount={ columnCount } { ...rest }>
                 { offers && (offers.length > 0) && offers.map((offer, index) =>
                 {
                     const setSelectedOffer = () =>
@@ -111,7 +111,7 @@ export const CatalogSpacesWidgetView: FC<CatalogSpacesWidgetViewProps> = props =
                     return <CatalogGridOfferView key={ index } itemActive={ (currentOffer && (currentOffer === offer)) } offer={ offer } onClick={ setSelectedOffer } />;
                 }) }
                 { children }
-            </Grid>
+            </AutoGrid>
         </>
     );
 }

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

@@ -1,8 +1,8 @@
 import { Vector3d } from '@nitrots/nitro-renderer';
 import { FC, useEffect } from 'react';
 import { GetAvatarRenderManager, GetSessionDataManager } from '../../../../../api';
+import { AutoGrid } from '../../../../../common/AutoGrid';
 import { Column } from '../../../../../common/Column';
-import { Grid } from '../../../../../common/Grid';
 import { LayoutGridItem } from '../../../../../common/layout/LayoutGridItem';
 import { RoomPreviewerView } from '../../../../../views/shared/room-previewer/RoomPreviewerView';
 import { useCatalogContext } from '../../../CatalogContext';
@@ -92,12 +92,12 @@ export const CatalogViewProductWidgetView: FC<{}> = props =>
     {
         return (
             <Column fit overflow="hidden" className="bg-muted p-2 rounded">
-                <Grid fullWidth grow columnCount={ 4 } overflow="auto" className="nitro-catalog-layout-bundle-grid">
+                <AutoGrid fullWidth grow columnCount={ 4 } overflow="auto" 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 } />;
                     }) }
-                </Grid>
+                </AutoGrid>
             </Column>
         );
     }

src/components/inventory/InventoryView.scss

@@ -12,5 +12,6 @@
         min-height: 0;
         font-size: 8px;
         padding: 1px 2px;
+        z-index: 5;
     }
 }

src/components/inventory/views/badge/InventoryBadgeView.tsx

@@ -1,6 +1,7 @@
 import { RequestBadgesComposer } from '@nitrots/nitro-renderer';
 import { FC, useEffect } from 'react';
 import { LocalizeBadgeName, LocalizeText } from '../../../../api';
+import { AutoGrid } from '../../../../common/AutoGrid';
 import { Button } from '../../../../common/Button';
 import { Column } from '../../../../common/Column';
 import { Flex } from '../../../../common/Flex';
@@ -77,21 +78,21 @@ export const InventoryBadgeView: FC<InventoryBadgeViewProps> = props =>
     return (
         <Grid>
             <Column size={ 7 } overflow="hidden">
-                <Grid grow columnCount={ 5 } overflow="auto">
+                <AutoGrid columnCount={ 5 }>
                     { badges && (badges.length > 0) && badges.map((code, index) =>
                         {
                             if(activeBadges.indexOf(code) >= 0) return null;
 
                             return <InventoryBadgeItemView key={ code } badgeCode={ code } />
                         }) }
-                </Grid>
+                </AutoGrid>
             </Column>
             <Column className="justify-content-between" size={ 5 } overflow="auto">
                 <Column overflow="hidden" gap={ 2 }>
                     <Text>{ LocalizeText('inventory.badges.activebadges') }</Text>
-                    <Grid grow columnCount={ 3 } overflow="auto">
+                    <AutoGrid columnCount={ 3 }>
                         { activeBadges && (activeBadges.length > 0) && activeBadges.map((code, index) => <InventoryBadgeItemView key={ code } badgeCode={ code } />) }
-                    </Grid>
+                    </AutoGrid>
                 </Column>
                 { badge && (badge.length > 0) &&
                     <Column grow justifyContent="end" gap={ 2 }>

src/components/inventory/views/bot/InventoryBotView.tsx

@@ -1,6 +1,7 @@
 import { GetBotInventoryComposer, IRoomSession, RoomObjectVariable, RoomPreviewer } from '@nitrots/nitro-renderer';
 import { FC, useEffect } from 'react';
 import { GetRoomEngine, LocalizeText } from '../../../../api';
+import { AutoGrid } from '../../../../common/AutoGrid';
 import { Button } from '../../../../common/Button';
 import { Column } from '../../../../common/Column';
 import { Grid } from '../../../../common/Grid';
@@ -77,9 +78,9 @@ export const InventoryBotView: FC<InventoryBotViewProps> = props =>
     return (
         <Grid>
             <Column size={ 7 } overflow="hidden">
-                <Grid grow columnCount={ 5 } overflow="auto">
+                <AutoGrid columnCount={ 5 }>
                     { botItems && (botItems.length > 0) && botItems.map(item => <InventoryBotItemView key={ item.id } botItem={ item } />) }
-                </Grid>
+                </AutoGrid>
             </Column>
             <Column size={ 5 } overflow="auto">
                 <Column overflow="hidden" position="relative">

src/components/inventory/views/furniture/InventoryFurnitureView.tsx

@@ -1,6 +1,7 @@
 import { FurnitureListComposer, IRoomSession, RoomObjectVariable, RoomPreviewer, Vector3d } from '@nitrots/nitro-renderer';
 import { FC, useEffect, useState } from 'react';
 import { GetRoomEngine, GetSessionDataManager, LocalizeText } from '../../../../api';
+import { AutoGrid } from '../../../../common/AutoGrid';
 import { Button } from '../../../../common/Button';
 import { Column } from '../../../../common/Column';
 import { Grid } from '../../../../common/Grid';
@@ -114,9 +115,9 @@ export const InventoryFurnitureView: FC<InventoryFurnitureViewProps> = props =>
         <Grid>
             <Column size={ 7 } overflow="hidden">
                 <InventoryFurnitureSearchView groupItems={ groupItems } setGroupItems={ setFilteredGroupItems } />
-                <Grid grow columnCount={ 5 } overflow="auto">
+                <AutoGrid columnCount={ 5 }>
                     { filteredGroupItems && (filteredGroupItems.length > 0) && filteredGroupItems.map((item, index) => <InventoryFurnitureItemView key={ index } groupItem={ item } />) }
-                </Grid>
+                </AutoGrid>
             </Column>
             <Column size={ 5 } overflow="auto">
                 <Column overflow="hidden" position="relative">

src/components/inventory/views/pet/InventoryPetView.tsx

@@ -1,6 +1,7 @@
 import { IRoomSession, RequestPetsComposer, RoomObjectVariable, RoomPreviewer } from '@nitrots/nitro-renderer';
 import { FC, useEffect } from 'react';
 import { GetRoomEngine, LocalizeText } from '../../../../api';
+import { AutoGrid } from '../../../../common/AutoGrid';
 import { Button } from '../../../../common/Button';
 import { Column } from '../../../../common/Column';
 import { Grid } from '../../../../common/Grid';
@@ -76,9 +77,9 @@ export const InventoryPetView: FC<InventoryPetViewProps> = props =>
     return (
         <Grid>
             <Column size={ 7 } overflow="hidden">
-                <Grid grow columnCount={ 5 } overflow="auto">
+                <AutoGrid columnCount={ 5 }>
                     { petItems && (petItems.length > 0) && petItems.map(item => <InventoryPetItemView key={ item.id } petItem={ item } />) }
-                </Grid>
+                </AutoGrid>
             </Column>
             <Column size={ 5 } overflow="auto">
                 <Column overflow="hidden" position="relative">

src/components/inventory/views/trade/InventoryTradeView.tsx

@@ -2,6 +2,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { FurnitureListComposer, IObjectData, TradingAcceptComposer, TradingConfirmationComposer, TradingListAddItemComposer, TradingListAddItemsComposer, TradingListItemRemoveComposer, TradingUnacceptComposer } from '@nitrots/nitro-renderer';
 import { FC, useEffect, useState } from 'react';
 import { LocalizeText } from '../../../../api';
+import { AutoGrid } from '../../../../common/AutoGrid';
 import { Base } from '../../../../common/Base';
 import { Button } from '../../../../common/Button';
 import { Column } from '../../../../common/Column';
@@ -229,7 +230,7 @@ export const InventoryTradeView: FC<InventoryTradeViewProps> = props =>
             <Column size={ 4 } overflow="hidden">
                 <InventoryFurnitureSearchView groupItems={ groupItems } setGroupItems={ setFilteredGroupItems } />
                 <Flex column fullHeight justifyContent="between" overflow="hidden" gap={ 2 }>
-                    <Grid grow columnCount={ 3 } overflow="auto">
+                    <AutoGrid columnCount={ 3 }>
                         { filteredGroupItems && (filteredGroupItems.length > 0) && filteredGroupItems.map((item, index) =>
                             {
                                 const count = item.getUnlockedCount();
@@ -243,7 +244,7 @@ export const InventoryTradeView: FC<InventoryTradeViewProps> = props =>
                                     </LayoutGridItem>
                                 );
                             }) }
-                    </Grid>
+                    </AutoGrid>
                     <Base fullWidth className="badge bg-muted">
                         { groupItem ? groupItem.name : LocalizeText('catalog_selectproduct') }
                     </Base>
@@ -256,7 +257,7 @@ export const InventoryTradeView: FC<InventoryTradeViewProps> = props =>
                             <Text>{ LocalizeText('inventory.trading.you') } { LocalizeText('inventory.trading.areoffering') }:</Text>
                             { getLockIcon(tradeData.ownUser.accepts) }
                         </Flex>
-                        <Grid grow columnCount={ 3 } overflow="auto">
+                        <AutoGrid columnCount={ 3 }>
                             { Array.from(Array(MAX_ITEMS_TO_TRADE), (e, i) =>
                                 {
                                     const item = (tradeData.ownUser.items.getWithIndex(i) || null);
@@ -272,7 +273,7 @@ export const InventoryTradeView: FC<InventoryTradeViewProps> = props =>
                                         </LayoutGridItem>
                                     );
                                 }) }
-                        </Grid>
+                        </AutoGrid>
                         <Base fullWidth className="badge bg-muted">
                             { ownGroupItem ? ownGroupItem.name : LocalizeText('catalog_selectproduct') }
                         </Base>
@@ -282,7 +283,7 @@ export const InventoryTradeView: FC<InventoryTradeViewProps> = props =>
                             <Text>{ tradeData.otherUser.userName } { LocalizeText('inventory.trading.isoffering') }:</Text>
                             { getLockIcon(tradeData.otherUser.accepts) }
                         </Flex>
-                        <Grid grow columnCount={ 3 } overflow="auto">
+                        <AutoGrid columnCount={ 3 }>
                             { Array.from(Array(MAX_ITEMS_TO_TRADE), (e, i) =>
                                 {
                                     const item = (tradeData.otherUser.items.getWithIndex(i) || null);
@@ -291,7 +292,7 @@ export const InventoryTradeView: FC<InventoryTradeViewProps> = props =>
 
                                     return <LayoutGridItem key={ i } itemActive={ (otherGroupItem === item) } itemImage={ item.iconUrl } itemCount={ item.getTotalCount() } itemUniqueNumber={ item.stuffData.uniqueNumber } onClick={ event => setOtherGroupItem(item) } />;
                                 }) }
-                        </Grid>
+                        </AutoGrid>
                         <Base fullWidth className="badge bg-muted w-100">
                             { otherGroupItem ? otherGroupItem.name : LocalizeText('catalog_selectproduct') }
                         </Base>

src/components/navigator/views/room-info/NavigatorRoomInfoView.tsx

@@ -160,13 +160,13 @@ export const NavigatorRoomInfoView: FC<NavigatorRoomInfoViewProps> = props =>
                                                     }) }
                                             </Flex> }
                                     </Column>
-                                    <Grid maxContent columnCount={ 2 } gap={ 1 }>
+                                    <Grid maxContent gap={ 1 }>
-                                        <i onClick={ () => processAction('set_home_room') } className={ 'flex-shrink-0 icon icon-house-small cursor-pointer' + classNames({ ' gray': homeRoomId !== roomInfoData.enteredGuestRoom.roomId }) } />
+                                        <i onClick={ () => processAction('set_home_room') } className={ 'g-col-6 flex-shrink-0 icon icon-house-small cursor-pointer' + classNames({ ' gray': homeRoomId !== roomInfoData.enteredGuestRoom.roomId }) } />
-                                        <FontAwesomeIcon icon="link" title={ LocalizeText('navigator.embed.caption') }  className="cursor-pointer" onClick={ event => dispatchUiEvent(new NavigatorEvent(NavigatorEvent.TOGGLE_ROOM_LINK)) } />
+                                        <FontAwesomeIcon icon="link" title={ LocalizeText('navigator.embed.caption') } className="cursor-pointer g-col-6" onClick={ event => dispatchUiEvent(new NavigatorEvent(NavigatorEvent.TOGGLE_ROOM_LINK)) } />
                                         { hasPermission('settings') &&
                                             <>
-                                                <FontAwesomeIcon icon="cogs" title={ LocalizeText('navigator.room.popup.info.room.settings') } className="cursor-pointer" onClick={ event => processAction('open_room_settings') } />
+                                                <FontAwesomeIcon icon="cogs" title={ LocalizeText('navigator.room.popup.info.room.settings') } className="g-col-6 cursor-pointer" onClick={ event => processAction('open_room_settings') } />
-                                                <FontAwesomeIcon icon="tools" title={ LocalizeText('open.floor.plan.editor') } className="cursor-pointer" onClick={ event => processAction('open_floorplan_editor') } />
+                                                <FontAwesomeIcon icon="tools" title={ LocalizeText('open.floor.plan.editor') } className="g-col-6 cursor-pointer" onClick={ event => processAction('open_floorplan_editor') } />
                                             </> } 
                                     </Grid>
                                 </Flex>