Layout fixes

src/layout/card/grid/NitroCardGridView.tsx

@@ -3,7 +3,7 @@ import { NitroCardGridViewProps } from './NitroCardGridView.types';
 
 export const NitroCardGridView: FC<NitroCardGridViewProps> = props =>
 {
-    const { columns = 5, gap = 2, className = '', style = null, children = null, ...rest } = props;
+    const { columns = 0, gap = 2, className = '', style = null, children = null, ...rest } = props;
 
     const getClassName = useMemo(() =>
     {
@@ -18,7 +18,11 @@ export const NitroCardGridView: FC<NitroCardGridViewProps> = props =>
     {
         const newStyle = { ...style };
 
-        //newStyle['--bs-columns'] = columns.toString();
+        if(columns && (columns >= 1))
+        {
+            newStyle['grid-template-columns'] = 'unset';
+            newStyle['--bs-columns'] = columns.toString();
+        }
 
         return newStyle;
     }, [ style, columns ]);

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

@@ -22,7 +22,7 @@ export const AvatarEditorFigureSetView: FC<AvatarEditorFigureSetViewProps> = pro
     }, [ model, category, setMaxPaletteCount ]);
 
     return (
-        <NitroCardGridView columns={ 3 }>
+        <NitroCardGridView>
             { (category.parts.length > 0) && category.parts.map((item, index) =>
                 {
                     return <AvatarEditorFigureSetItemView key={ index } partItem={ item } onClick={ selectPart } />;

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

@@ -18,7 +18,7 @@ export const AvatarEditorPaletteSetView: FC<AvatarEditorPaletteSetViewProps> = p
     }, [ model, category, paletteSet, paletteIndex ]);
 
     return (
-        <NitroCardGridView columns={ 4 } { ...rest }>
+        <NitroCardGridView { ...rest }>
             { (paletteSet.length > 0) && paletteSet.map((item, index) =>
                 {
                     return <AvatarEditorPaletteSetItem key={ index } colorItem={ item } onClick={ event => selectColor(item) } />;

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

@@ -67,7 +67,7 @@ export const AvatarEditorWardrobeView: FC<AvatarEditorWardrobeViewProps> = props
     return (
         <div className="row h-100">
             <div className="col-12 d-flex h-100">
-                <NitroCardGridView className="wardrobe-grid" columns={ 5 }>
+                <NitroCardGridView className="wardrobe-grid">
                     { figures }
                 </NitroCardGridView>
             </div>

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

@@ -143,7 +143,7 @@ export const CatalogLayoutPetView: FC<CatalogLayoutPetViewProps> = props =>
     return (
         <div className="row h-100">
             <div className="d-flex flex-column col-7 h-100">
-                <NitroCardGridView columns={ 5 }>
+                <NitroCardGridView>
                     { !colorsShowing && (sellablePalettes.length > 0) && sellablePalettes.map((palette, index) =>
                         {
                             return (

src/views/catalog/views/page/layout/single-bundle/CatalogLayoutSingleBundleView.tsx

@@ -15,7 +15,7 @@ export const CatalogLayoutSingleBundleView: FC<CatalogLayoutSingleBundleViewProp
     return (
         <div className="row h-100">
             <div className="d-flex flex-column col-7 h-100">
-                <NitroCardGridView columns={ 5 }>
+                <NitroCardGridView>
                     { activeOffer && activeOffer.products && (activeOffer.products.length > 0) && activeOffer.products.map((product, index) =>
                         {
                             return <CatalogProductView key={ index } isActive={ false } product={ product } />

src/views/catalog/views/page/offers/CatalogPageOffersView.tsx

@@ -11,7 +11,7 @@ export const CatalogPageOffersView: FC<CatalogPageOffersViewProps> = props =>
     const { activeOffer = null } = catalogState;
 
     return (
-        <NitroCardGridView columns={ 5 } { ...rest }>
+        <NitroCardGridView { ...rest }>
             { offers && (offers.length > 0) && offers.map((offer, index) =>
                 {
                     return <CatalogPageOfferView key={ index } isActive={ (activeOffer === offer) } offer={ offer } />

src/views/catalog/views/page/search-result/offers/CatalogSearchResultOffersView.tsx

@@ -20,7 +20,7 @@ export const CatalogSearchResultOffersView: FC<CatalogSearchResultOffersViewProp
     }, [ offers ]);
 
     return (
-        <NitroCardGridView columns={ 5 } { ...rest }>
+        <NitroCardGridView { ...rest }>
             { offers && (offers.length > 0) && offers.map((offer, index) =>
                 {
                     const isActive = (activeOffer && (activeOffer.products[0].furniClassId === offer.id));

src/views/inventory/views/badge/active-results/InventoryActiveBadgeResultsView.tsx

@@ -8,7 +8,7 @@ export const InventoryActiveBadgeResultsView: FC<InventoryActiveBadgeResultsView
     const { badges = [] } = props;
     
     return (
-        <NitroCardGridView columns={ 3 }>
+        <NitroCardGridView>
             { badges && (badges.length > 0) && badges.map(code =>
                 {
                     return <InventoryBadgeItemView key={ code } badge={ code } />

src/views/inventory/views/furniture/results/InventoryFurnitureResultsView.tsx

@@ -8,7 +8,7 @@ export const InventoryFurnitureResultsView: FC<InventoryFurnitureResultsViewProp
     const { groupItems = [], columns = 5 } = props;
 
     return (
-        <NitroCardGridView columns={ columns }>
+        <NitroCardGridView>
             { groupItems && (groupItems.length > 0) && groupItems.map((item, index) =>
                 {
                     return <InventoryFurnitureItemView key={ index } groupItem={ item } />

src/views/toolbar/ToolbarView.tsx

@@ -158,7 +158,7 @@ export const ToolbarView: FC<ToolbarViewProps> = props =>
     }, []);
 
     return (
-        <div className="nitro-toolbar-container overflow-hidden">
+        <div className="nitro-toolbar-container">
             <TransitionAnimation type={ TransitionAnimationTypes.FADE_IN } inProp={ isMeExpanded } timeout={ 300 }>
                 <ToolbarMeView handleToolbarItemClick={ handleToolbarItemClick } />
             </TransitionAnimation>

src/views/user-profile/views/badges-container/BadgesContainerView.tsx

@@ -9,7 +9,7 @@ export const BadgesContainerView: FC<BadgesContainerViewProps> = props =>
 
     return (
         <div className="row">
-            <NitroCardGridView columns={ 5 }>
+            <NitroCardGridView>
                 { badges && (badges.length > 0) && badges.map((badge, index) =>
                         {
                             return (