Layout changes

src/common/Flex.tsx

@@ -23,8 +23,8 @@ export const Flex: FC<FlexProps> = props =>
 
         if(column)
         {
-            if(reverse) newClassNames.push('flex-column-reverse');
+            if(reverse) newClassNames.push('flex-col-reverse');
-            else newClassNames.push('flex-column');
+            else newClassNames.push('flex-col');
         }
         else
         {

src/common/InfiniteGrid.tsx

@@ -1,83 +0,0 @@
-import { useVirtualizer } from '@tanstack/react-virtual';
-import { FC, Fragment, ReactElement, useEffect, useRef } from 'react';
-import { Flex } from './Flex';
-
-interface InfiniteGridProps<T = any>
-{
-    rows: T[];
-    columnCount: number;
-    overscan?: number;
-    estimateSize?: number;
-    itemRender?: (item: T, index?: number) => ReactElement;
-}
-
-export const InfiniteGrid: FC<InfiniteGridProps> = props =>
-{
-    const { rows = [], columnCount = 4, overscan = 5, estimateSize = 45, itemRender = null } = props;
-    const parentRef = useRef<HTMLDivElement>(null);
-
-    const virtualizer = useVirtualizer({
-        count: Math.ceil(rows.length / columnCount),
-        overscan,
-        getScrollElement: () => parentRef.current,
-        estimateSize: () => estimateSize
-    });
-
-    useEffect(() =>
-    {
-        if(!rows || !rows.length) return;
-
-        virtualizer.scrollToIndex(0);
-    }, [ rows, virtualizer ]);
-
-    const items = virtualizer.getVirtualItems();
-
-    return (
-        <div ref={ parentRef } className="size-full position-relative" style={ { overflowY: 'auto' } }>
-            <div
-                style={ {
-                    height: virtualizer.getTotalSize(),
-                    width: '100%',
-                    position: 'relative'
-                } }>
-                <Flex
-                    column
-                    gap={ 1 }
-                    style={ {
-                        position: 'absolute',
-                        top: 0,
-                        left: 0,
-                        width: '100%',
-                        transform: `translateY(${ items[0]?.start ?? 0 }px)`
-                    } }>
-                    { items.map(virtualRow => (
-                        <div
-                            key={ virtualRow.key + 'a' }
-                            ref={ virtualizer.measureElement }
-                            data-index={ virtualRow.index }
-                            style={ {
-                                display: 'grid',
-                                gap: '0.25rem',
-                                minHeight: virtualRow.index === 0 ? estimateSize : virtualRow.size,
-                                gridTemplateColumns: `repeat(${ columnCount }, 1fr)`
-                            } }>
-                            { Array.from(Array(columnCount)).map((e,i) => 
-                            {
-                                const item = rows[i + (virtualRow.index * columnCount)];
-
-                                if(!item) return <Fragment
-                                    key={ virtualRow.index + i + 'b' } />;
-
-                                return (
-                                    <Fragment key={ i }>
-                                        { itemRender(item, i) }
-                                    </Fragment>
-                                );
-                            }) }
-                        </div>
-                    )) }
-                </Flex>
-            </div>
-        </div>
-    );
-}

src/common/index.ts

@@ -1,3 +1,4 @@
+export * from '../layout/InfiniteGrid';
 export * from './AutoGrid';
 export * from './Base';
 export * from './Button';
@@ -7,7 +8,6 @@ export * from './FormGroup';
 export * from './Grid';
 export * from './GridContext';
 export * from './HorizontalRule';
-export * from './InfiniteGrid';
 export * from './InfiniteScroll';
 export * from './Text';
 export * from './card';

src/components/achievements/views/AchievementDetailsView.tsx

@@ -24,7 +24,7 @@ export const AchievementDetailsView: FC<AchievementDetailsViewProps> = props =>
                 </Text>
             </Column>
             <Column fullWidth justifyContent="center" overflow="hidden">
-                <div className="flex flex-column gap-1">
+                <div className="flex flex-col gap-1">
                     <Text truncate fontWeight="bold">
                         { LocalizeBadgeName(AchievementUtilities.getAchievementBadgeCode(achievement)) }
                     </Text>
@@ -33,7 +33,7 @@ export const AchievementDetailsView: FC<AchievementDetailsViewProps> = props =>
                     </Text>
                 </div>
                 { ((achievement.levelRewardPoints > 0) || (achievement.scoreLimit > 0)) &&
-                    <div className="flex flex-column gap-1">
+                    <div className="flex flex-col gap-1">
                         { (achievement.levelRewardPoints > 0) &&
                             <div className="flex items-center gap-1">
                                 <Text truncate className="small">

src/components/avatar-editor/AvatarEditorFigurePreviewView.tsx

@@ -27,7 +27,7 @@ export const AvatarEditorFigurePreviewView: FC<{}> = props =>
     }
 
     return (
-        <div className="flex flex-column figure-preview-container overflow-hidden position-relative">
+        <div className="flex flex-col figure-preview-container overflow-hidden position-relative">
             <LayoutAvatarImageView direction={ direction } figure={ getFigureString } scale={ 2 } />
             <AvatarEditorIcon className="avatar-spotlight" icon="spotlight" />
             <div className="avatar-shadow" />

src/components/avatar-editor/AvatarEditorModelView.tsx

@@ -47,7 +47,7 @@ export const AvatarEditorModelView: FC<{
 
     return (
         <div className="flex gap-2 overflow-hidden">
-            <div className="flex flex-column col-2">
+            <div className="flex flex-col col-2">
                 { (name === AvatarEditorFigureCategory.GENERIC) &&
                     <>
                         <div className="category-item items-center justify-center cursor-pointer flex" onClick={ event => setGender(AvatarFigurePartType.MALE) }>
@@ -66,10 +66,10 @@ export const AvatarEditorModelView: FC<{
                     );
                 }) }
             </div>
-            <div className="flex flex-column overflow-hidden col-5">
+            <div className="flex flex-col overflow-hidden col-5">
                 <AvatarEditorFigureSetView category={ activeCategory } columnCount={ 3 } />
             </div>
-            <div className="flex flex-column overflow-hidden col-5">
+            <div className="flex flex-col overflow-hidden col-5">
                 { (maxPaletteCount >= 1) &&
                     <AvatarEditorPaletteSetView category={ activeCategory } columnCount={ 3 } paletteIndex={ 0 } /> }
                 { (maxPaletteCount === 2) &&

src/components/avatar-editor/AvatarEditorView.tsx

@@ -90,15 +90,15 @@ export const AvatarEditorView: FC<{}> = props =>
             </NitroCardTabsView>
             <NitroCardContentView>
                 <div className="grid gap-2 overflow-hidden">
-                    <div className="flex flex-column col-9 overflow-hidden">
+                    <div className="flex flex-col col-9 overflow-hidden">
                         { ((activeModelKey.length > 0) && (activeModelKey !== AvatarEditorFigureCategory.WARDROBE)) &&
                             <AvatarEditorModelView categories={ avatarModels[activeModelKey] } name={ activeModelKey } /> }
                         { (activeModelKey === AvatarEditorFigureCategory.WARDROBE) &&
                             <AvatarEditorWardrobeView /> }
                     </div>
-                    <div className="flex flex-column col-3 overflow-hidden gap-1">
+                    <div className="flex flex-col col-3 overflow-hidden gap-1">
                         <AvatarEditorFigurePreviewView />
-                        <div className="flex flex-column flex-grow-1 gap-1">
+                        <div className="flex flex-col flex-grow-1 gap-1">
                             <div className="btn-group">
                                 <Button variant="secondary" onClick={ event => processAction(AvatarEditorAction.ACTION_RESET) }>
                                     <FaRedo className="fa-icon" />

src/components/camera/views/CameraWidgetCheckoutView.tsx

@@ -124,7 +124,7 @@ export const CameraWidgetCheckoutView: FC<CameraWidgetCheckoutViewProps> = props
                 </div>
                 { !publishDisabled &&
                 <div className="flex items-center justify-content-between bg-muted rounded p-2">
-                    <div className="flex flex-column gap-1">
+                    <div className="flex flex-col gap-1">
                         <Text bold>
                             { LocalizeText(wasPicturePublished ? 'camera.publish.successful' : 'camera.publish.explanation') }
                         </Text>

src/components/campaign/CalendarView.tsx

@@ -104,7 +104,7 @@ export const CalendarView: FC<CalendarViewProps> = props =>
                     <Column size={ 1 } />
                     <Column size={ 10 }>
                         <div className="flex items-center gap-1 justify-content-between">
-                            <div className="flex flex-column gap-1">
+                            <div className="flex flex-col gap-1">
                                 <Text fontSize={ 3 }>{ LocalizeText('campaign.calendar.heading.day', [ 'number' ], [ (selectedDay + 1).toString() ]) }</Text>
                                 <Text>{ dayMessage(selectedDay) }</Text>
                             </div>

src/components/catalog/views/gift/CatalogGiftView.tsx

@@ -236,7 +236,7 @@ export const CatalogGiftView: FC<{}> = props =>
                         <div className="gift-preview">
                             <LayoutFurniImageView extraData={ boxExtraData } productClassId={ colourId } productType={ ProductTypeEnum.FLOOR } />
                         </div> }
-                    <div className="flex flex-column gap-1">
+                    <div className="flex flex-col gap-1">
                         <div className="flex gap-2">
                             <div className="btn-group">
                                 <Button variant="primary" onClick={ () => handleAction('prev_box') }>
@@ -246,7 +246,7 @@ export const CatalogGiftView: FC<{}> = props =>
                                     <FaChevronRight className="fa-icon" />
                                 </Button>
                             </div>
-                            <div className="flex flex-column gap-1">
+                            <div className="flex flex-col gap-1">
                                 <Text fontWeight="bold">{ LocalizeText(boxName) }</Text>
                                 <div className="flex items-center gap-1">
                                     { LocalizeText(priceText, [ 'price' ], [ giftConfiguration.price.toString() ]) }

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

@@ -162,7 +162,7 @@ export const CatalogLayoutColorGroupingView : FC<CatalogLayoutColorGroupViewProp
                             <CatalogLimitedItemWidgetView />
                             <Text truncate className="flex-grow-1">{ currentOffer.localizationName }</Text>
                             <div className="flex justify-content-between">
-                                <div className="flex flex-column gap-1">
+                                <div className="flex flex-col gap-1">
                                     <CatalogSpinnerWidgetView />
                                 </div>
                                 <CatalogTotalPriceWidget alignItems="end" justifyContent="end" />

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

@@ -46,7 +46,7 @@ export const CatalogLayoutDefaultView: FC<CatalogLayoutProps> = props =>
                                 <CatalogLimitedItemWidgetView />
                                 <Text grow truncate>{ currentOffer.localizationName }</Text>
                                 <div className="flex justify-content-between">
-                                    <div className="flex flex-column gap-1">
+                                    <div className="flex flex-col gap-1">
                                         <CatalogSpinnerWidgetView />
                                     </div>
                                     <CatalogTotalPriceWidget alignItems="end" justifyContent="end" />

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

@@ -7,7 +7,7 @@ export const CatalogLayoutInfoLoyaltyView: FC<CatalogLayoutProps> = props =>
     
     return (
         <div className="h-100 nitro-catalog-layout-info-loyalty text-black flex flex-row">
-            <div className="overflow-auto h-100 flex flex-column info-loyalty-content">
+            <div className="overflow-auto h-100 flex flex-col info-loyalty-content">
                 <div dangerouslySetInnerHTML={ { __html: page.localization.getText(0) } } />
             </div>
         </div>

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

@@ -82,22 +82,22 @@ export const CatalogLayoutRoomAdsView: FC<CatalogLayoutProps> = props =>
                         { categories && categories.map((cat, index) => <option key={ index } value={ cat.id }>{ LocalizeText(cat.name) }</option>) }
                     </select>
                 </Column>
-                <div className="flex flex-column gap-1">
+                <div className="flex flex-col gap-1">
                     <Text bold>{ LocalizeText('roomad.catalog_name') }</Text>
                     <input className="form-control form-control-sm" maxLength={ 64 } readOnly={ extended } type="text" value={ eventName } onChange={ event => setEventName(event.target.value) } />
                 </div>
-                <div className="flex flex-column gap-1">
+                <div className="flex flex-col gap-1">
                     <Text bold>{ LocalizeText('roomad.catalog_description') }</Text>
                     <textarea className="form-control form-control-sm" maxLength={ 64 } readOnly={ extended } value={ eventDesc } onChange={ event => setEventDesc(event.target.value) } />
                 </div>
-                <div className="flex flex-column gap-1">
+                <div className="flex flex-col gap-1">
                     <Text bold>{ LocalizeText('roomad.catalog_roomname') }</Text>
                     <select className="form-select form-select-sm" disabled={ extended } value={ roomId } onChange={ event => setRoomId(parseInt(event.target.value)) }>
                         <option disabled value={ -1 }>{ LocalizeText('roomad.catalog_roomname') }</option>
                         { availableRooms && availableRooms.map((room, index) => <option key={ index } value={ room.roomId }>{ room.roomName }</option>) }
                     </select>
                 </div>
-                <div className="flex flex-column gap-1">
+                <div className="flex flex-col gap-1">
                     <Button disabled={ (!eventName || !eventDesc || roomId === -1) } variant={ (!eventName || !eventDesc || roomId === -1) ? 'danger' : 'success' } onClick={ purchaseAd }>{ extended ? LocalizeText('roomad.extend.event') : LocalizeText('buy') }</Button>
                 </div>
             </div>

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

@@ -31,7 +31,7 @@ export const CatalogLayoutRoomBundleView: FC<CatalogLayoutProps> = props =>
                         <CatalogAddOnBadgeWidgetView className="bg-muted rounded bottom-0 start-0" position="absolute" />
                         <CatalogSimplePriceWidgetView />
                     </Column>
-                    <div className="flex flex-column gap-1">
+                    <div className="flex flex-col gap-1">
                         <CatalogPurchaseWidgetView />
                     </div>
                 </Column>

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

@@ -31,7 +31,7 @@ export const CatalogLayoutSingleBundleView: FC<CatalogLayoutProps> = props =>
                         <CatalogAddOnBadgeWidgetView className="bg-muted rounded bottom-0 start-0" position="absolute" />
                         <CatalogSimplePriceWidgetView />
                     </Column>
-                    <div className="flex flex-column gap-1">
+                    <div className="flex flex-col gap-1">
                         <CatalogPurchaseWidgetView />
                     </div>
                 </Column>

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

@@ -98,7 +98,7 @@ export const CatalogLayoutSoundMachineView: FC<CatalogLayoutProps> = props =>
                                 { songId > -1 && <Button onClick={ () => previewSong(songId) }>{ LocalizeText('play_preview_button') }</Button>
                                 }
                                 <div className="flex justify-content-between">
-                                    <div className="flex flex-column gap-1">
+                                    <div className="flex flex-col gap-1">
                                         <CatalogSpinnerWidgetView />
                                     </div>
                                     <CatalogTotalPriceWidget alignItems="end" justifyContent="end" />

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

@@ -170,7 +170,7 @@ export const CatalogLayoutVipBuyView: FC<CatalogLayoutProps> = props =>
                                 <Text fontWeight="bold">{ getPurchaseHeader() }</Text>
                                 <Text>{ getPurchaseValidUntil() }</Text>
                             </Column>
-                            <div className="flex flex-column gap-1">
+                            <div className="flex flex-col gap-1">
                                 { (pendingOffer.priceCredits > 0) &&
                                     <Flex alignItems="center" gap={ 1 } justifyContent="end">
                                         <Text>{ pendingOffer.priceCredits }</Text>

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

@@ -63,7 +63,7 @@ export const CatalogLayoutMarketplaceItemView: FC<MarketplaceItemViewProps> = pr
                         <Text>{ LocalizeText('catalog.marketplace.offer_count', [ 'count' ], [ offerData.offerCount.toString() ]) }</Text>
                     </> }
             </Column>
-            <div className="flex flex-column gap-1">
+            <div className="flex flex-col gap-1">
                 { ((type === OWN_OFFER) && (offerData.status !== MarketPlaceOfferState.SOLD)) &&
                     <Button variant="secondary" onClick={ () => onClick(offerData) }>
                         { LocalizeText('catalog.marketplace.offer.pick') }

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

@@ -44,7 +44,7 @@ export const SearchFormView: FC<SearchFormViewProps> = props =>
     }, [ onSearch, searchType, sortTypes ]);
 
     return (
-        <div className="flex flex-column gap-1">
+        <div className="flex flex-col gap-1">
             <div className="flex items-center gap-1">
                 <Text className="col-3">{ LocalizeText('catalog.marketplace.sort_order') }</Text>
                 <select className="form-select form-select-sm" value={ sortType } onChange={ event => onSortTypeChange(parseInt(event.target.value)) }>

src/components/floorplan-editor/views/FloorplanOptionsView.tsx

@@ -115,7 +115,7 @@ export const FloorplanOptionsView: FC<{}> = props =>
     }
 
     return (
-        <div className="flex flex-column">
+        <div className="flex flex-col">
             <div className="flex gap-1">
                 <Column gap={ 1 } size={ 5 }>
                     <Text bold>{ LocalizeText('floor.plan.editor.draw.mode') }</Text>

src/components/friends/views/friends-list/FriendsListSearchView.tsx

@@ -42,7 +42,7 @@ export const FriendsSearchView: FC<FriendsSearchViewProps> = props =>
     return (
         <NitroCardAccordionSetView { ...rest }>
             <input className="search-input form-control form-control-sm w-100 rounded-0" maxLength={ 50 } placeholder={ LocalizeText('generic.search') } type="text" value={ searchValue } onChange={ event => setSearchValue(event.target.value) } />
-            <div className="flex flex-column">
+            <div className="flex flex-col">
                 { friendResults &&
                     <>
                         { (friendResults.length === 0) &&

src/components/friends/views/messenger/FriendsMessengerView.tsx

@@ -113,7 +113,7 @@ export const FriendsMessengerView: FC<{}> = props =>
                     <Column overflow="hidden" size={ 4 }>
                         <Text bold>{ LocalizeText('toolbar.icon.label.messenger') }</Text>
                         <Column fit overflow="auto">
-                            <div className="flex flex-column">
+                            <div className="flex flex-col">
                                 { visibleThreads && (visibleThreads.length > 0) && visibleThreads.map(thread =>
                                 {
                                     return (

src/components/groups/views/GroupInformationView.tsx

@@ -114,9 +114,9 @@ export const GroupInformationView: FC<GroupInformationViewProps> = props =>
                 </Column>
                 { getRoleIcon() }
             </Column>
-            <div className="flex flex-column justify-content-between overflow-auto col-9">
+            <div className="flex flex-col justify-content-between overflow-auto col-9">
-                <div className="flex flex-column overflow-hidden">
+                <div className="flex flex-col overflow-hidden">
-                    <div className="flex flex-column gap-1">
+                    <div className="flex flex-col gap-1">
                         <div className="items-center gap-2">
                             <Text bold>{ groupInformation.title }</Text>
                             <div className="flex gap-1">
@@ -129,8 +129,8 @@ export const GroupInformationView: FC<GroupInformationViewProps> = props =>
                     </div>
                     <Text small className="group-description" overflow="auto">{ groupInformation.description }</Text>
                 </div>
-                <div className="flex flex-column">
+                <div className="flex flex-col">
-                    <div className="flex flex-column gap-1">
+                    <div className="flex flex-col gap-1">
                         <Text pointer small underline onClick={ () => handleAction('homeroom') }>{ LocalizeText('group.linktobase') }</Text>
                         <Text pointer small underline onClick={ () => handleAction('furniture') }>{ LocalizeText('group.buyfurni') }</Text>
                         <Text pointer small underline onClick={ () => handleAction('popular_groups') }>{ LocalizeText('group.showgroups') }</Text>

src/components/groups/views/GroupMembersView.tsx

@@ -175,7 +175,7 @@ export const GroupMembersView: FC<{}> = props =>
                                     { (member.rank !== GroupRank.REQUESTED) &&
                                     <Text italics small variant="muted">{ LocalizeText('group.members.since', [ 'date' ], [ member.joinedAt ]) }</Text> }
                                 </Column>
-                                <div className="flex flex-column gap-1">
+                                <div className="flex flex-col gap-1">
                                     { (member.rank !== GroupRank.REQUESTED) &&
                                     <div className="flex items-center justify-center">
                                         <div className={ classNames(`icon icon-group-small-${ ((member.rank === GroupRank.OWNER) ? 'owner' : (member.rank === GroupRank.ADMIN) ? 'admin' : (membersData.admin && (member.rank === GroupRank.MEMBER)) ? 'not-admin' : '') }`, membersData.admin && 'cursor-pointer') } title={ LocalizeText(getRankDescription(member)) } onClick={ event => toggleAdmin(member) } />

src/components/groups/views/GroupRoomInformationView.tsx

@@ -106,7 +106,7 @@ export const GroupRoomInformationView: FC<{}> = props =>
 
     return (
         <div className="nitro-notification-bubble rounded">
-            <div className="flex flex-column">
+            <div className="flex flex-col">
                 <Flex pointer alignItems="center" justifyContent="between" onClick={ event => setIsOpen(value => !value) }>
                     <Text variant="white">{ LocalizeText('group.homeroominfo.title') }</Text>
                     { isOpen && <FaChevronUp className="fa-icon" /> }

src/components/groups/views/tabs/GroupTabCreatorConfirmationView.tsx

@@ -51,8 +51,8 @@ export const GroupTabCreatorConfirmationView: FC<GroupTabCreatorConfirmationView
                 </Column>
             </Column>
             <Column justifyContent="between" size={ 9 }>
-                <div className="flex flex-column">
+                <div className="flex flex-col">
-                    <div className="flex flex-column gap-1">
+                    <div className="flex flex-col gap-1">
                         <Text bold>{ groupData.groupName }</Text>
                         <Text>{ groupData.groupDescription }</Text>
                     </div>

src/components/groups/views/tabs/GroupTabIdentityView.tsx

@@ -81,7 +81,7 @@ export const GroupTabIdentityView: FC<GroupTabIdentityViewProps> = props =>
 
     return (
         <Column justifyContent="between" overflow="auto">
-            <div className="flex flex-column gap-1">
+            <div className="flex flex-col gap-1">
                 <div className="flex items-center gap-1">
                     <Text center className="col-3">{ LocalizeText('group.edit.name') }</Text>
                     <input className="form-control form-control-sm" maxLength={ 29 } type="text" value={ groupName } onChange={ event => setGroupName(event.target.value) } />

src/components/groups/views/tabs/GroupTabSettingsView.tsx

@@ -58,14 +58,14 @@ export const GroupTabSettingsView: FC<GroupTabSettingsViewProps> = props =>
     }, [ setCloseAction, saveSettings ]);
     
     return (
-        <div className="flex flex-column overflow-auto">
+        <div className="flex flex-col overflow-auto">
-            <div className="flex flex-column">
+            <div className="flex flex-col">
                 { STATES.map((state, index) =>
                 {
                     return (
                         <Flex key={ index } alignItems="center" gap={ 1 }>
                             <input checked={ (groupState === index) } className="form-check-input" name="groupState" type="radio" onChange={ event => setGroupState(index) } />
-                            <div className="flex flex-column gap-0">
+                            <div className="flex flex-col gap-0">
                                 <div className="flex gap-1">
                                     <i className={ `icon icon-group-type-${ index }` } />
                                     <Text bold>{ LocalizeText(`group.edit.settings.type.${ state }.label`) }</Text>
@@ -79,7 +79,7 @@ export const GroupTabSettingsView: FC<GroupTabSettingsViewProps> = props =>
             <HorizontalRule />
             <div className="flex items-center gap-1">
                 <input checked={ groupDecorate } className="form-check-input" type="checkbox" onChange={ event => setGroupDecorate(prevValue => !prevValue) } />
-                <div className="flex flex-column gap-1">
+                <div className="flex flex-col gap-1">
                     <Text bold>{ LocalizeText('group.edit.settings.rights.caption') }</Text>
                     <Text>{ LocalizeText('group.edit.settings.rights.members.help') }</Text>
                 </div>

src/components/guide-tool/views/GuideToolAcceptView.tsx

@@ -16,13 +16,13 @@ export const GuideToolAcceptView: FC<GuideToolAcceptViewProps> = props =>
     const answerRequest = (response: boolean) => SendMessageComposer(new GuideSessionGuideDecidesMessageComposer(response));
 
     return (
-        <div className="flex flex-column">
+        <div className="flex flex-col">
-            <div className="flex flex-column gap-0 bg-muted p-2 rounded">
+            <div className="flex flex-col gap-0 bg-muted p-2 rounded">
                 <Text bold>{ LocalizeText('guide.help.request.guide.accept.request.title') }</Text>
                 <Text variant="muted">{ LocalizeText('guide.help.request.type.1') }</Text>
                 <Text textBreak wrap>{ helpRequestDescription }</Text>
             </div>
-            <div className="flex flex-column gap-1">
+            <div className="flex flex-col gap-1">
                 <Button variant="success" onClick={ event => answerRequest(true) }>
                     { LocalizeText('guide.help.request.guide.accept.accept.button') }
                 </Button>

src/components/guide-tool/views/GuideToolMenuView.tsx

@@ -34,7 +34,7 @@ export const GuideToolMenuView: FC<GuideToolMenuViewProps> = props =>
     } = props;
     
     return (
-        <div className="flex flex-column">
+        <div className="flex flex-col">
             <Flex alignItems="center" className="bg-muted p-2 rounded" gap={ 2 }>
                 <div className={ 'duty-switch' + (isOnDuty ? '' : ' off') } onClick={ event => processAction('toggle_duty') } />
                 <Column gap={ 0 }>
@@ -42,7 +42,7 @@ export const GuideToolMenuView: FC<GuideToolMenuViewProps> = props =>
                     <Text>{ LocalizeText(`guide.help.guide.tool.duty.${ (isOnDuty ? 'on' : 'off') }`) }</Text>
                 </Column>
             </Flex>
-            <div className="flex flex-column gap-1">
+            <div className="flex flex-col gap-1">
                 <Text bold>{ LocalizeText('guide.help.guide.tool.tickettypeselection.caption') }</Text>
                 <div className="flex items-center gap-1">
                     <input checked={ isHandlingGuideRequests } className="form-check-input" disabled={ isOnDuty } type="checkbox" onChange={ event => setIsHandlingGuideRequests(event.target.checked) } />
@@ -60,7 +60,7 @@ export const GuideToolMenuView: FC<GuideToolMenuViewProps> = props =>
             <hr className="bg-dark m-0" />
             <div className="flex justify-content-enter items-center gap-2">
                 <div className="info-icon" />
-                <div className="flex flex-column gap-1">
+                <div className="flex flex-col gap-1">
                     <div dangerouslySetInnerHTML={ { __html: LocalizeText('guide.help.guide.tool.guidesonduty', [ 'amount' ], [ guidesOnDuty.toString() ]) } } />
                     <div dangerouslySetInnerHTML={ { __html: LocalizeText('guide.help.guide.tool.helpersonduty', [ 'amount' ], [ helpersOnDuty.toString() ]) } } />
                     <div dangerouslySetInnerHTML={ { __html: LocalizeText('guide.help.guide.tool.guardiansonduty', [ 'amount' ], [ guardiansOnDuty.toString() ]) } } />

src/components/guide-tool/views/GuideToolOngoingView.tsx

@@ -112,7 +112,7 @@ export const GuideToolOngoingView: FC<GuideToolOngoingViewProps> = props =>
                     <div ref={ scrollDiv } />
                 </Column>
             </Column>
-            <div className="flex flex-column gap-1">
+            <div className="flex flex-col gap-1">
                 <div className="flex gap-1">
                     <input className="form-control form-control-sm" placeholder={ LocalizeText('guide.help.request.guide.ongoing.input.empty', [ 'name' ], [ userName ]) } type="text" value={ messageText } onChange={ event => setMessageText(event.target.value) } onKeyDown={ onKeyDown } />
                     <Button variant="success" onClick={ sendMessage }>

src/components/guide-tool/views/GuideToolUserCreateRequestView.tsx

@@ -23,7 +23,7 @@ export const GuideToolUserCreateRequestView: FC<GuideToolUserCreateRequestViewPr
     }
 
     return (
-        <div className="flex flex-column">
+        <div className="flex flex-col">
             <Text>{ LocalizeText('guide.help.request.user.create.help') }</Text>
             <textarea className="request-message" maxLength={ 140 } placeholder={ LocalizeText('guide.help.request.user.create.input.help') } value={ userRequest } onChange={ event => setUserRequest(event.target.value) }></textarea>
             <Button fullWidth disabled={ (userRequest.length < MIN_REQUEST_LENGTH) || isPending } variant="success" onClick={ sendRequest }>{ LocalizeText('guide.help.request.user.create.input.button') }</Button>

src/components/guide-tool/views/GuideToolUserFeedbackView.tsx

@@ -15,7 +15,7 @@ export const GuideToolUserFeedbackView: FC<GuideToolUserFeedbackViewProps> = pro
     const giveFeedback = (recommend: boolean) => SendMessageComposer(new GuideSessionFeedbackMessageComposer(recommend));
 
     return (
-        <div className="flex flex-column">
+        <div className="flex flex-col">
             <Flex className="bg-muted p-2 rounded" gap={ 1 } justifyContent="between">
                 <Column gap={ 0 }>
                     <Text bold>{ userName }</Text>
@@ -23,14 +23,14 @@ export const GuideToolUserFeedbackView: FC<GuideToolUserFeedbackViewProps> = pro
                 </Column>
                 <Button disabled variant="danger">{ LocalizeText('guide.help.common.report.link') }</Button>
             </Flex>
-            <div className="flex flex-column gap-1">
+            <div className="flex flex-col gap-1">
                 <Text bold>{ LocalizeText('guide.help.request.user.feedback.closed.title') }</Text>
                 <Text>{ LocalizeText('guide.help.request.user.feedback.closed.desc') }</Text>
             </div>
             { userName && (userName.length > 0) &&
                 <>
                     <hr className="bg-dark m-0 mt-auto" />
-                    <div className="flex flex-column">
+                    <div className="flex flex-col">
                         <Text bold center>{ LocalizeText('guide.help.request.user.feedback.question') }</Text>
                         <div className="flex gap-1">
                             <Button fullWidth variant="success" onClick={ event => giveFeedback(true) }>{ LocalizeText('guide.help.request.user.feedback.positive.button') }</Button>

src/components/guide-tool/views/GuideToolUserNoHelpersView.tsx

@@ -5,7 +5,7 @@ import { Text } from '../../../common';
 export const GuideToolUserNoHelpersView: FC<{}> = props =>
 {
     return (
-        <div className="flex flex-column gap-1">
+        <div className="flex flex-col gap-1">
             <Text bold>{ LocalizeText('guide.help.request.no_tour_guides.title') }</Text>
             <Text>{ LocalizeText('guide.help.request.no_tour_guides.message') }</Text>
         </div>

src/components/guide-tool/views/GuideToolUserPendingView.tsx

@@ -16,13 +16,13 @@ export const GuideToolUserPendingView: FC<GuideToolUserPendingViewProps> = props
     const cancelRequest = () => SendMessageComposer(new GuideSessionRequesterCancelsMessageComposer());
 
     return (
-        <div className="flex flex-column">
+        <div className="flex flex-col">
             <Column className="bg-muted rounded p-2" gap={ 0 }>
                 <Text bold>{ LocalizeText('guide.help.request.guide.accept.request.title') }</Text>
                 <Text variant="muted">{ LocalizeText('guide.help.request.type.1') }</Text>
                 <Text textBreak wrap>{ helpRequestDescription }</Text>
             </Column>
-            <div className="flex flex-column gap-1">
+            <div className="flex flex-col gap-1">
                 <Text bold>{ LocalizeText('guide.help.request.user.pending.info.title') }</Text>
                 <Text>{ LocalizeText('guide.help.request.user.pending.info.message') }</Text>
                 <Text>{ LocalizeText('guide.help.request.user.pending.info.waiting', [ 'waitingtime' ], [ helpRequestAverageTime.toString() ]) }</Text>

src/components/guide-tool/views/GuideToolUserSomethingWrogView.tsx

@@ -5,7 +5,7 @@ import { Text } from '../../../common';
 export const GuideToolUserSomethingWrogView: FC<{}> = props =>
 {
     return (
-        <div className="flex flex-column gap-1">
+        <div className="flex flex-col gap-1">
             <Text>{ LocalizeText('guide.help.request.user.guide.disconnected.error.desc') }</Text>
         </div>
     );

src/components/guide-tool/views/GuideToolUserThanksView.tsx

@@ -5,7 +5,7 @@ import { Text } from '../../../common';
 export const GuideToolUserThanksView: FC<{}> = props =>
 {
     return (
-        <div className="flex flex-column gap-1">
+        <div className="flex flex-col gap-1">
             <Text bold>{ LocalizeText('guide.help.request.user.thanks.info.title') }</Text>
             <Text>{ LocalizeText('guide.help.request.user.thanks.info.desc') }</Text>
         </div>

src/components/hc-center/HcCenterView.tsx

@@ -132,7 +132,7 @@ export const HcCenterView: FC<{}> = props =>
         <NitroCardView className="nitro-hc-center" theme="primary-slim">
             <NitroCardHeaderView headerText={ LocalizeText('generic.hccenter') } onCloseClick={ () => setIsVisible(false) } />
             <Flex className="bg-muted p-2" position="relative">
-                <div className="flex flex-column gap-1">
+                <div className="flex flex-col gap-1">
                     <div className="hc-logo" />
                     <Flex>
                         <Button variant="success" onClick={ event => CreateLinkEvent('catalog/open/' + GetConfigurationValue('catalog.links')['hc.buy_hc']) }>
@@ -169,7 +169,7 @@ export const HcCenterView: FC<{}> = props =>
                             { clubStatus === ClubStatus.ACTIVE &&
                                 <div className="pe-3">
                                     <h5 className="ms-2 mb-1 bolder">{ LocalizeText('hccenter.special.amount.title') }</h5>
-                                    <div className="flex flex-column">
+                                    <div className="flex flex-col">
                                         <div className="w-100 text-center ms-4n">{ getHcPaydayAmount() }</div>
                                         <OverlayTrigger overlay={ popover } placement="left" trigger={ [ 'hover', 'focus' ] }>
                                             <div className="btn btn-link align-self-end text-primary">

src/components/help/views/DescribeReportView.tsx

@@ -30,7 +30,7 @@ export const DescribeReportView: FC<{}> = props =>
 
     return (
         <>
-            <div className="flex flex-column gap-1">
+            <div className="flex flex-col gap-1">
                 <Text fontSize={ 4 }>{ LocalizeText('help.emergency.chat_report.subtitle') }</Text>
                 <Text>{ LocalizeText('help.cfh.input.text') }</Text>
             </div>

src/components/help/views/HelpIndexView.tsx

@@ -22,11 +22,11 @@ export const HelpIndexView: FC<{}> = props =>
 
     return (
         <>
-            <div className="flex flex-column justify-center alignp-items-enter flex-grow-1 gap-1">
+            <div className="flex flex-col justify-center alignp-items-enter flex-grow-1 gap-1">
                 <Text fontSize={ 3 }>{ LocalizeText('help.main.frame.title') }</Text>
                 <Text>{ LocalizeText('help.main.self.description') }</Text>
             </div>
-            <div className="flex flex-column gap-1">
+            <div className="flex flex-col gap-1">
                 <Button onClick={ onReportClick }>{ LocalizeText('help.main.bully.subtitle') }</Button>
                 <Button disabled={ !GetConfigurationValue('guides.enabled') } onClick={ () => DispatchUiEvent(new GuideToolEvent(GuideToolEvent.CREATE_HELP_REQUEST)) }>{ LocalizeText('help.main.help.title') }</Button>
                 <Button disabled={ true }>{ LocalizeText('help.main.self.tips.title') }</Button>

src/components/help/views/ReportSummaryView.tsx

@@ -45,7 +45,7 @@ export const ReportSummaryView: FC<{}> = props =>
 
     return (
         <>
-            <div className="flex flex-column gap-1">
+            <div className="flex flex-col gap-1">
                 <Text fontSize={ 4 }>{ LocalizeText('help.cfh.button.send') }</Text>
                 <Text>{ LocalizeText('help.main.summary') }</Text>
             </div>

src/components/help/views/SelectReportedChatsView.tsx

@@ -58,7 +58,7 @@ export const SelectReportedChatsView: FC<{}> = props =>
 
     return (
         <>
-            <div className="flex flex-column gap-1">
+            <div className="flex flex-col gap-1">
                 <Text fontSize={ 4 }>{ LocalizeText('help.emergency.chat_report.subtitle') }</Text>
                 <Text>{ LocalizeText('help.emergency.chat_report.description') }</Text>
             </div>

src/components/help/views/SelectReportedUserView.tsx

@@ -52,7 +52,7 @@ export const SelectReportedUserView: FC<{}> = props =>
 
     return (
         <>
-            <div className="flex flex-column gap-1">
+            <div className="flex flex-col gap-1">
                 <Text fontSize={ 4 }>{ LocalizeText('help.emergency.main.step.two.title') }</Text>
                 { (availableUsers.length > 0) &&
                     <Text>{ LocalizeText('report.user.pick.user') }</Text> }

src/components/help/views/SelectTopicView.tsx

@@ -30,7 +30,7 @@ export const SelectTopicView: FC<{}> = props =>
 
     return (
         <>
-            <div className="flex flex-column gap-1">
+            <div className="flex flex-col gap-1">
                 <Text fontSize={ 4 }>{ LocalizeText('help.emergency.chat_report.subtitle') }</Text>
                 <Text>{ LocalizeText('help.cfh.pick.topic') }</Text>
             </div>

src/components/help/views/name-change/NameChangeConfirmationView.tsx

@@ -29,9 +29,9 @@ export const NameChangeConfirmationView:FC<NameChangeLayoutViewProps> = props =>
     });
 
     return (
-        <div className="flex flex-column gap-4 h-100">
+        <div className="flex flex-col gap-4 h-100">
             <div className="bg-muted rounded p-2 text-center">{ LocalizeText('tutorial.name_change.info.confirm') }</div>
-            <div className="flex flex-column items-center gap-1 h-100">
+            <div className="flex flex-col items-center gap-1 h-100">
                 <div>{ LocalizeText('tutorial.name_change.confirm') }</div>
                 <div className="fw-bold">{ username }</div>
             </div>

src/components/help/views/name-change/NameChangeInitView.tsx

@@ -8,7 +8,7 @@ export const NameChangeInitView:FC<NameChangeLayoutViewProps> = props =>
     const { onAction = null } = props;
 
     return (
-        <div className="flex flex-column gap-4 h-100">
+        <div className="flex flex-col gap-4 h-100">
             <div className="bg-muted rounded p-2 text-center">{ LocalizeText('tutorial.name_change.info.main') }</div>
             <div className="fw-bold flex items-center justify-center size-full">{ LocalizeText('tutorial.name_change.current', [ 'name' ], [ GetSessionDataManager().userName ]) }</div>
             <div className="flex gap-2">

src/components/help/views/name-change/NameChangeInputView.tsx

@@ -72,7 +72,7 @@ export const NameChangeInputView:FC<NameChangeLayoutViewProps> = props =>
     });
 
     return (
-        <div className="flex flex-column gap-3 h-100">
+        <div className="flex flex-col gap-3 h-100">
             <div>{ LocalizeText('tutorial.name_change.info.select') }</div>
             <div className="flex gap-2">
                 <input className="form-control form-control-sm" type="text" value={ newUsername } onChange={ event => handleUsernameChange(event.target.value) } />
@@ -85,7 +85,7 @@ export const NameChangeInputView:FC<NameChangeLayoutViewProps> = props =>
             { canProceed &&
                 <div className="bg-success rounded p-2 text-center text-white">{ LocalizeText('help.tutorial.name.available', [ 'name' ], [ newUsername ]) }</div> }
             { suggestions &&
-                <div className="flex flex-column gap-2">
+                <div className="flex flex-col gap-2">
                     { suggestions.map((suggestion, index) => <div key={ index } className="col bg-muted rounded p-1 cursor-pointer" onClick={ () => handleUsernameChange(suggestion) }>{ suggestion }</div>) }
                 </div> }
             <div className="flex gap-2">

src/components/hotel-view/HotelView.tsx

@@ -41,7 +41,7 @@ export const HotelView: FC<{}> = props =>
         <div className="nitro-hotel-view" style={ (backgroundColor && backgroundColor) ? { background: backgroundColor } : {} }>
             <div className="container h-100 py-3 overflow-hidden landing-widgets">
                 <div className="row h-100">
-                    <div className="col-9 h-100 flex flex-column">
+                    <div className="col-9 h-100 flex flex-col">
                         <WidgetSlotView
                             className="col-6"
                             widgetConf={ GetConfigurationValue('hotelview')['widgets']['slot.' + 1 + '.conf'] }

src/components/hotel-view/views/widgets/promo-article/PromoArticleWidgetView.tsx

@@ -35,7 +35,7 @@ export const PromoArticleWidgetView: FC<{}> = props =>
             { articles && articles[index] &&
                 <div className="promo-article flex flex-row row mx-0">
                     <div className="promo-article-image" style={ { backgroundImage: `url(${ articles[index].imageUrl })` } }/>
-                    <div className="col-3 flex flex-column h-100">
+                    <div className="col-3 flex flex-col h-100">
                         <h3 className="my-0">{ articles[index].title }</h3>
                         <b>{ articles[index].bodyText }</b>
                         <button className="btn btn-sm mt-auto btn-gainsboro" onClick={ event => OpenUrl(articles[index].linkContent) }>{ articles[index].buttonText }</button>

src/components/hotel-view/views/widgets/widget-container/WidgetContainerView.tsx

@@ -29,7 +29,7 @@ export const WidgetContainerView: FC<WidgetContainerViewProps> = props =>
   	return (
         <div className="widgetcontainer widget flex flex-row overflow-hidden">
             <div className="widgetcontainer-image flex-shrink-0" style={ { backgroundImage: `url(${ getOption('image') })` } } />
-            <div className="flex flex-column align-self-center">
+            <div className="flex flex-col align-self-center">
                 <h3 className="my-0">{ LocalizeText(`landing.view.${ getOption('texts') }.header`) }</h3>
                 <i>{ LocalizeText(`landing.view.${ getOption('texts') }.body`) }</i>
                 <button className="btn btn-sm btn-gainsboro align-self-start px-3 mt-auto" onClick={ event => OpenUrl(getOption('btnLink')) }>{ LocalizeText(`landing.view.${ getOption('texts') }.button`) }</button>

src/components/inventory/InventoryView.tsx

@@ -1,7 +1,7 @@
+import { NitroCard } from '@layout/NitroCard';
 import { AddLinkEventTracker, BadgePointLimitsEvent, GetLocalizationManager, GetRoomEngine, ILinkEventTracker, IRoomSession, RemoveLinkEventTracker, RoomEngineObjectEvent, RoomEngineObjectPlacedEvent, RoomPreviewer, RoomSessionEvent } from '@nitrots/nitro-renderer';
 import { FC, useEffect, useState } from 'react';
 import { LocalizeText, UnseenItemCategory, isObjectMoverRequested, setObjectMoverRequested } from '../../api';
-import { NitroCardContentView, NitroCardHeaderView, NitroCardTabsItemView, NitroCardTabsView, NitroCardView } from '../../common';
 import { useInventoryTrade, useInventoryUnseenTracker, useMessageEvent, useNitroEvent } from '../../hooks';
 import { InventoryBadgeView } from './views/badge/InventoryBadgeView';
 import { InventoryBotView } from './views/bot/InventoryBotView';
@@ -118,21 +118,29 @@ export const InventoryView: FC<{}> = props =>
     if(!isVisible) return null;
 
     return (
-        <NitroCardView className="nitro-inventory" theme={ isTrading ? 'primary-slim' : '' } uniqueKey={ 'inventory' } >
+        <NitroCard
-            <NitroCardHeaderView headerText={ LocalizeText('inventory.title') } onCloseClick={ onClose } />
+            className="w-inventory-w h-inventory-h min-w-inventory-w min-h-inventory-h"
+            uniqueKey="inventory">
+            <NitroCard.Header
+                headerText={ LocalizeText('inventory.title') }
+                onCloseClick={ onClose } />
             { !isTrading &&
                 <>
-                    <NitroCardTabsView>
+                    <NitroCard.Tabs>
                         { TABS.map((name, index) =>
                         {
                             return (
-                                <NitroCardTabsItemView key={ index } count={ getCount(UNSEEN_CATEGORIES[index]) } isActive={ (currentTab === name) } onClick={ event => setCurrentTab(name) }>
+                                <NitroCard.TabItem
+                                    key={ index }
+                                    count={ getCount(UNSEEN_CATEGORIES[index]) }
+                                    isActive={ (currentTab === name) }
+                                    onClick={ event => setCurrentTab(name) }>
                                     { LocalizeText(name) }
-                                </NitroCardTabsItemView>
+                                </NitroCard.TabItem>
                             );
                         }) }
-                    </NitroCardTabsView>
+                    </NitroCard.Tabs>
-                    <NitroCardContentView>
+                    <NitroCard.Content>
                         { (currentTab === TAB_FURNITURE ) &&
                             <InventoryFurnitureView roomPreviewer={ roomPreviewer } roomSession={ roomSession } /> }
                         { (currentTab === TAB_BOTS ) &&
@@ -141,12 +149,12 @@ export const InventoryView: FC<{}> = props =>
                             <InventoryPetView roomPreviewer={ roomPreviewer } roomSession={ roomSession } /> }
                         { (currentTab === TAB_BADGES ) && 
                             <InventoryBadgeView /> }
-                    </NitroCardContentView>
+                    </NitroCard.Content>
                 </> }
             { isTrading &&
-                <NitroCardContentView>
+                <NitroCard.Content>
                     <InventoryTradeView cancelTrade={ onClose } />
-                </NitroCardContentView> }
+                </NitroCard.Content> }
-        </NitroCardView>
+        </NitroCard>
     );
 }

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

@@ -1,7 +1,8 @@
+import { InfiniteGrid } from '@layout/InfiniteGrid';
 import { GetRoomEngine, GetSessionDataManager, IRoomSession, RoomObjectVariable, RoomPreviewer, Vector3d } from '@nitrots/nitro-renderer';
 import { FC, useEffect, useState } from 'react';
 import { DispatchUiEvent, FurniCategory, GroupItem, LocalizeText, UnseenItemCategory, attemptItemPlacement } from '../../../../api';
-import { AutoGrid, Button, Column, Grid, LayoutLimitedEditionCompactPlateView, LayoutRarityLevelView, LayoutRoomPreviewerView, Text } from '../../../../common';
+import { Button, LayoutLimitedEditionCompactPlateView, LayoutRarityLevelView, LayoutRoomPreviewerView } from '../../../../common';
 import { CatalogPostMarketplaceOfferEvent } from '../../../../events';
 import { useInventoryFurni, useInventoryUnseenTracker } from '../../../../hooks';
 import { InventoryCategoryEmptyView } from '../InventoryCategoryEmptyView';
@@ -111,25 +112,26 @@ export const InventoryFurnitureView: FC<InventoryFurnitureViewProps> = props =>
     if(!groupItems || !groupItems.length) return <InventoryCategoryEmptyView desc={ LocalizeText('inventory.empty.desc') } title={ LocalizeText('inventory.empty.title') } />;
 
     return (
-        <Grid>
+        <div className="grid grid-cols-12 gap-2">
-            <Column overflow="hidden" size={ 7 }>
+            <div className="flex flex-col col-span-7 overflow-hidden">
                 <InventoryFurnitureSearchView groupItems={ groupItems } setGroupItems={ setFilteredGroupItems } />
-                <AutoGrid columnCount={ 5 }>
+                <InfiniteGrid<GroupItem>
-                    { filteredGroupItems && (filteredGroupItems.length > 0) && filteredGroupItems.map((item, index) => <InventoryFurnitureItemView key={ index } groupItem={ item } />) }
+                    columnCount={ 5 }
-                </AutoGrid>
+                    itemRender={ item => <InventoryFurnitureItemView groupItem={ item } /> }
-            </Column>
+                    items={ filteredGroupItems } />
-            <Column overflow="auto" size={ 5 }>
+            </div>
-                <Column overflow="hidden" position="relative">
+            <div className="flex flex-col col-span-5 overflow-hidden">
+                <div className="relative flex flex-col overflow-hidden">
                     <LayoutRoomPreviewerView height={ 140 } roomPreviewer={ roomPreviewer } />
                     { selectedItem && selectedItem.stuffData.isUnique &&
                         <LayoutLimitedEditionCompactPlateView className="top-2 end-2" position="absolute" uniqueNumber={ selectedItem.stuffData.uniqueNumber } uniqueSeries={ selectedItem.stuffData.uniqueSeries } /> }
                     { (selectedItem && selectedItem.stuffData.rarityLevel > -1) &&
                         <LayoutRarityLevelView className="top-2 end-2" level={ selectedItem.stuffData.rarityLevel } position="absolute" /> }
-                </Column>
+                </div>
                 { selectedItem &&
-                    <Column grow gap={ 2 } justifyContent="between">
+                    <div className="flex flex-col justify-between gap-2 grow">
-                        <Text grow truncate>{ selectedItem.name }</Text>
+                        <span className="truncate grow">{ selectedItem.name }</span>
-                        <div className="flex flex-column gap-1">
+                        <div className="flex flex-col gap-1">
                             { !!roomSession &&
                                 <Button variant="success" onClick={ event => attemptItemPlacement(selectedItem) }>
                                     { LocalizeText('inventory.furni.placetoroom') }
@@ -139,8 +141,8 @@ export const InventoryFurnitureView: FC<InventoryFurnitureViewProps> = props =>
                                     { LocalizeText('inventory.marketplace.sell') }
                                 </Button> }
                         </div>
-                    </Column> }
+                    </div> }
-            </Column>
+            </div>
-        </Grid>
+        </div>
     );
 }

src/components/mod-tools/views/room/ModToolsRoomView.tsx

@@ -87,7 +87,7 @@ export const ModToolsRoomView: FC<ModToolsRoomViewProps> = props =>
                             <Text>{ ownerInRoom ? 'Yes' : 'No' }</Text>
                         </div>
                     </Column>
-                    <div className="flex flex-column gap-1">
+                    <div className="flex flex-col gap-1">
                         <Button onClick={ event => TryVisitRoom(roomId) }>Visit Room</Button>
                         <Button onClick={ event => CreateLinkEvent(`mod-tools/open-room-chatlog/${ roomId }`) }>Chatlog</Button>
                     </div>

src/components/mod-tools/views/user/ModToolsUserModActionView.tsx

@@ -162,7 +162,7 @@ export const ModToolsUserModActionView: FC<ModToolsUserModActionViewProps> = pro
                     <option disabled value={ -1 }>Sanction Type</option>
                     { MOD_ACTION_DEFINITIONS.map((action, index) => <option key={ index } value={ index }>{ action.name }</option>) }
                 </select>
-                <div className="flex flex-column gap-1">
+                <div className="flex flex-col gap-1">
                     <Text small>Optional message type, overrides default</Text>
                     <textarea className="form-control" value={ message } onChange={ event => setMessage(event.target.value) }/>
                 </div>

src/components/navigator/NavigatorView.tsx

@@ -1,9 +1,8 @@
-import { NitroCard, NitroCardTabs } from '@layout/NitroCard';
+import { NitroCard } from '@layout/NitroCard';
 import { AddLinkEventTracker, ConvertGlobalRoomIdMessageComposer, HabboWebTools, ILinkEventTracker, LegacyExternalInterface, NavigatorInitComposer, NavigatorSearchComposer, RemoveLinkEventTracker, RoomSessionEvent } from '@nitrots/nitro-renderer';
 import { FC, useCallback, useEffect, useRef, useState } from 'react';
 import { FaPlus } from 'react-icons/fa';
 import { LocalizeText, SendMessageComposer, TryVisitRoom } from '../../api';
-import { Column, NitroCardTabsItemView } from '../../common';
 import { useNavigator, useNitroEvent } from '../../hooks';
 import { NavigatorDoorStateView } from './views/NavigatorDoorStateView';
 import { NavigatorRoomCreatorView } from './views/NavigatorRoomCreatorView';
@@ -197,38 +196,41 @@ export const NavigatorView: FC<{}> = props =>
     return (
         <>
             { isVisible &&
-                <NitroCard.Main
+                <NitroCard
-                    className="w-navigator h-navigator"
+                    className="w-navigator-w h-navigator-h min-w-navigator-w min-h-navigator-h"
                     uniqueKey="navigator">
                     <NitroCard.Header
                         headerText={ LocalizeText(isCreatorOpen ? 'navigator.createroom.title' : 'navigator.title') }
                         onCloseClick={ event => setIsVisible(false) } />
-                    <NitroCardTabs.Main>
+                    <NitroCard.Tabs>
                         { topLevelContexts && (topLevelContexts.length > 0) && topLevelContexts.map((context, index) =>
                         {
                             return (
-                                <NitroCardTabs.Item key={ index } isActive={ ((topLevelContext === context) && !isCreatorOpen) } onClick={ event => sendSearch('', context.code) }>
+                                <NitroCard.TabItem
+                                    key={ index }
+                                    isActive={ ((topLevelContext === context) && !isCreatorOpen) }
+                                    onClick={ event => sendSearch('', context.code) }>
                                     { LocalizeText(('navigator.toplevelview.' + context.code)) }
-                                </NitroCardTabs.Item>
+                                </NitroCard.TabItem>
                             );
                         }) }
-                        <NitroCardTabsItemView isActive={ isCreatorOpen } onClick={ event => setCreatorOpen(true) }>
+                        <NitroCard.TabItem
+                            isActive={ isCreatorOpen }
+                            onClick={ event => setCreatorOpen(true) }>
                             <FaPlus className="fa-icon" />
-                        </NitroCardTabsItemView>
+                        </NitroCard.TabItem>
-                    </NitroCardTabs.Main>
+                    </NitroCard.Tabs>
-                    <NitroCard.Content>
+                    <NitroCard.Content isLoading={ isLoading }>
-                        { isLoading &&
-                            <div className="top-0 position-absolute size-full start-0 z-index-1 bg-muted opacity-0-5" /> }
                         { !isCreatorOpen &&
                             <>
                                 <NavigatorSearchView sendSearch={ sendSearch } />
-                                <Column innerRef={ elementRef } overflow="auto">
+                                <div ref={ elementRef } className="flex flex-col overflow-auto">
                                     { (searchResult && searchResult.results.map((result, index) => <NavigatorSearchResultView key={ index } searchResult={ result } />)) }
-                                </Column>
+                                </div>
                             </> }
                         { isCreatorOpen && <NavigatorRoomCreatorView /> }
                     </NitroCard.Content>
-                </NitroCard.Main> }
+                </NitroCard> }
             <NavigatorDoorStateView />
             { isRoomInfoOpen && <NavigatorRoomInfoView onCloseClick={ () => setRoomInfoOpen(false) } /> }
             { isRoomLinkOpen && <NavigatorRoomLinkView onCloseClick={ () => setRoomLinkOpen(false) } /> }

src/components/navigator/views/NavigatorDoorStateView.tsx

@@ -66,7 +66,7 @@ export const NavigatorDoorStateView: FC<{}> = props =>
         <NitroCardView className="nitro-navigator-doorbell" theme="primary-slim">
             <NitroCardHeaderView headerText={ LocalizeText(isDoorbell ? 'navigator.doorbell.title' : 'navigator.password.title') } onCloseClick={ onClose } />
             <NitroCardContentView>
-                <div className="flex flex-column gap-1">
+                <div className="flex flex-col gap-1">
                     <Text bold>{ doorData && doorData.roomInfo && doorData.roomInfo.roomName }</Text>
                     { (doorData.state === DoorStateType.START_DOORBELL) &&
                         <Text>{ LocalizeText('navigator.doorbell.info') }</Text> }
@@ -80,7 +80,7 @@ export const NavigatorDoorStateView: FC<{}> = props =>
                         <Text>{ LocalizeText('navigator.password.retryinfo') }</Text> }
                 </div>
                 { isDoorbell &&
-                    <div className="flex flex-column gap-1">
+                    <div className="flex flex-col gap-1">
                         { (doorData.state === DoorStateType.START_DOORBELL) &&
                             <Button variant="success" onClick={ ring }>
                                 { LocalizeText('navigator.doorbell.button.ring') }
@@ -91,11 +91,11 @@ export const NavigatorDoorStateView: FC<{}> = props =>
                     </div> }
                 { !isDoorbell &&
                     <>
-                        <div className="flex flex-column gap-1">
+                        <div className="flex flex-col gap-1">
                             <Text>{ LocalizeText('navigator.password.enter') }</Text>
                             <input className="form-control form-control-sm" type="password" onChange={ event => setPassword(event.target.value) } />
                         </div>
-                        <div className="flex flex-column gap-1">
+                        <div className="flex flex-col gap-1">
                             <Button variant="success" onClick={ tryEntering }>
                                 { LocalizeText('navigator.password.button.try') }
                             </Button>

src/components/navigator/views/NavigatorRoomCreatorView.tsx

@@ -63,18 +63,18 @@ export const NavigatorRoomCreatorView: FC<{}> = props =>
     }, []);
 
     return (
-        <div className="flex flex-column overflow-auto">
+        <div className="flex flex-col overflow-auto">
             <Grid overflow="hidden">
-                <div className="flex flex-column gap-1 overflow-auto col-6">
+                <div className="flex flex-col gap-1 overflow-auto col-6">
-                    <div className="flex flex-column gap-1">
+                    <div className="flex flex-col gap-1">
                         <Text>{ LocalizeText('navigator.createroom.roomnameinfo') }</Text>
                         <input className="form-control form-control-sm" maxLength={ 60 } placeholder={ LocalizeText('navigator.createroom.roomnameinfo') } type="text" onChange={ event => setName(event.target.value) } />
                     </div>
-                    <div className="flex flex-column flex-grow-1 gap-1">
+                    <div className="flex flex-col flex-grow-1 gap-1">
                         <Text>{ LocalizeText('navigator.createroom.roomdescinfo') }</Text>
                         <textarea className="flex-grow-1 form-control form-control-sm w-100" maxLength={ 255 } placeholder={ LocalizeText('navigator.createroom.roomdescinfo') } onChange={ event => setDescription(event.target.value) } />
                     </div>
-                    <div className="flex flex-column gap-1">
+                    <div className="flex flex-col gap-1">
                         <Text>{ LocalizeText('navigator.category') }</Text>
                         <select className="form-select form-select-sm" onChange={ event => setCategory(Number(event.target.value)) }>
                             { categories && (categories.length > 0) && categories.map(category =>
@@ -83,7 +83,7 @@ export const NavigatorRoomCreatorView: FC<{}> = props =>
                             }) }
                         </select>
                     </div>
-                    <div className="flex flex-column gap-1">
+                    <div className="flex flex-col gap-1">
                         <Text>{ LocalizeText('navigator.maxvisitors') }</Text>
                         <select className="form-select form-select-sm" onChange={ event => setVisitorsCount(Number(event.target.value)) }>
                             { maxVisitorsList && maxVisitorsList.map(value =>
@@ -92,7 +92,7 @@ export const NavigatorRoomCreatorView: FC<{}> = props =>
                             }) }
                         </select>
                     </div>
-                    <div className="flex flex-column gap-1">
+                    <div className="flex flex-col gap-1">
                         <Text>{ LocalizeText('navigator.tradesettings') }</Text>
                         <select className="form-select form-select-sm" onChange={ event => setTradesSetting(Number(event.target.value)) }>
                             <option value="0">{ LocalizeText('navigator.roomsettings.trade_not_allowed') }</option>
@@ -101,7 +101,7 @@ export const NavigatorRoomCreatorView: FC<{}> = props =>
                         </select>
                     </div>
                 </div>
-                <div className="flex flex-column gap-1 overflow-auto col-6">
+                <div className="flex flex-col gap-1 overflow-auto col-6">
                     {
                         roomModels.map((model, index )=>
                         {

src/components/navigator/views/NavigatorRoomInfoView.tsx

@@ -151,7 +151,7 @@ export const NavigatorRoomInfoView: FC<NavigatorRoomInfoViewProps> = props =>
                                     </Flex> }
                             </Column>
                         </Flex>
-                        <div className="flex flex-column gap-1">
+                        <div className="flex flex-col gap-1">
                             { hasPermission('staff_pick') &&
                             <Button onClick={ () => processAction('toggle_pick') }>
                                 { LocalizeText(isRoomPicked ? 'navigator.staffpicks.unpick' : 'navigator.staffpicks.pick') }

src/components/navigator/views/NavigatorRoomLinkView.tsx

@@ -21,7 +21,7 @@ export const NavigatorRoomLinkView: FC<NavigatorRoomLinkViewProps> = props =>
             <NitroCardContentView className="text-black flex items-center">
                 <div className="flex gap-2">
                     <LayoutRoomThumbnailView customUrl={ navigatorData.enteredGuestRoom.officialRoomPicRef } roomId={ navigatorData.enteredGuestRoom.roomId } />
-                    <div className="flex flex-column">
+                    <div className="flex flex-col">
                         <Text bold fontSize={ 5 }>{ LocalizeText('navigator.embed.headline') }</Text>
                         <Text>{ LocalizeText('navigator.embed.info') }</Text>
                         <input readOnly className="form-control form-control-sm" type="text" value={ LocalizeText('navigator.embed.src', [ 'roomId' ], [ navigatorData.enteredGuestRoom.roomId.toString() ]).replace('${url.prefix}', GetConfigurationValue<string>('url.prefix', '')) } />

src/components/navigator/views/room-settings/NavigatorRoomSettingsAccessTabView.tsx

@@ -32,12 +32,12 @@ export const NavigatorRoomSettingsAccessTabView: FC<NavigatorRoomSettingsTabView
 
     return (
         <>
-            <div className="flex flex-column gap-1">
+            <div className="flex flex-col gap-1">
                 <Text bold>{ LocalizeText('navigator.roomsettings.roomaccess.caption') }</Text>
                 <Text>{ LocalizeText('navigator.roomsettings.roomaccess.info') }</Text>
             </div>
             <div className="overflow-auto">
-                <div className="flex flex-column gap-1">
+                <div className="flex flex-col gap-1">
                     <Text bold>{ LocalizeText('navigator.roomsettings.doormode') }</Text>
                     <div className="flex items-center gap-1">
                         <input checked={ (roomData.lockState === RoomDataParser.OPEN_STATE) && !isTryingPassword } className="form-check-input" name="lockState" type="radio" onChange={ event => handleChange('lock_state', RoomDataParser.OPEN_STATE) } />
@@ -56,7 +56,7 @@ export const NavigatorRoomSettingsAccessTabView: FC<NavigatorRoomSettingsTabView
                         { !isTryingPassword && (roomData.lockState !== RoomDataParser.PASSWORD_STATE) &&
                             <Text>{ LocalizeText('navigator.roomsettings.doormode.password') }</Text> }
                         { (isTryingPassword || (roomData.lockState === RoomDataParser.PASSWORD_STATE)) &&
-                            <div className="flex flex-column gap-1">
+                            <div className="flex flex-col gap-1">
                                 <Text>{ LocalizeText('navigator.roomsettings.doormode.password') }</Text>
                                 <input className="form-control form-control-sm col-4" placeholder={ LocalizeText('navigator.roomsettings.password') } type="password" value={ password } onChange={ event => setPassword(event.target.value) } onFocus={ event => setIsTryingPassword(true) } />
                                 { isTryingPassword && (password.length <= 0) &&
@@ -71,7 +71,7 @@ export const NavigatorRoomSettingsAccessTabView: FC<NavigatorRoomSettingsTabView
                             </div> }
                     </div>
                 </div>
-                <div className="flex flex-column gap-1">
+                <div className="flex flex-col gap-1">
                     <Text bold>{ LocalizeText('navigator.roomsettings.pets') }</Text>
                     <div className="flex items-center gap-1">
                         <input checked={ roomData.allowPets } className="form-check-input" type="checkbox" onChange={ event => handleChange('allow_pets', event.target.checked) } />

src/components/navigator/views/room-settings/NavigatorRoomSettingsModTabView.tsx

@@ -70,7 +70,7 @@ export const NavigatorRoomSettingsModTabView: FC<NavigatorRoomSettingsTabViewPro
                 </Button>
             </Column>
             <Column size={ 6 }>
-                <div className="flex flex-column gap-1">
+                <div className="flex flex-col gap-1">
                     <Text bold>{ LocalizeText('navigator.roomsettings.moderation.mute.header') }</Text>
                     <div className="flex items-center gap-1">
                         <select className="form-select form-select-sm" value={ roomData.moderationSettings.allowMute } onChange={ event => handleChange('moderation_mute', event.target.value) }>
@@ -83,7 +83,7 @@ export const NavigatorRoomSettingsModTabView: FC<NavigatorRoomSettingsTabViewPro
                         </select>
                     </div>
                 </div>
-                <div className="flex flex-column gap-1">
+                <div className="flex flex-col gap-1">
                     <Text bold>{ LocalizeText('navigator.roomsettings.moderation.kick.header') }</Text>
                     <div className="flex items-center gap-1">
                         <select className="form-select form-select-sm" value={ roomData.moderationSettings.allowKick } onChange={ event => handleChange('moderation_kick', event.target.value) }>
@@ -99,7 +99,7 @@ export const NavigatorRoomSettingsModTabView: FC<NavigatorRoomSettingsTabViewPro
                         </select>
                     </div>
                 </div>
-                <div className="flex flex-column gap-1">
+                <div className="flex flex-col gap-1">
                     <Text bold>{ LocalizeText('navigator.roomsettings.moderation.ban.header') }</Text>
                     <div className="flex items-center gap-1">
                         <select className="form-select form-select-sm" value={ roomData.moderationSettings.allowBan } onChange={ event => handleChange('moderation_ban', event.target.value) }>

src/components/navigator/views/room-settings/NavigatorRoomSettingsVipChatTabView.tsx

@@ -21,7 +21,7 @@ export const NavigatorRoomSettingsVipChatTabView: FC<NavigatorRoomSettingsTabVie
 
     return (
         <>
-            <div className="flex flex-column gap-1">
+            <div className="flex flex-col gap-1">
                 <Text bold>{ LocalizeText('navigator.roomsettings.vip.caption') }</Text>
                 <Text>{ LocalizeText('navigator.roomsettings.vip.info') }</Text>
             </div>

src/components/navigator/views/search/NavigatorSearchResultItemInfoView.tsx

@@ -5,12 +5,9 @@ import { FaUser } from 'react-icons/fa';
 import { LocalizeText } from '../../../../api';
 import { Flex, LayoutBadgeImageView, LayoutRoomThumbnailView, NitroCardContentView, Text, UserProfileIconView } from '../../../../common';
 
-interface NavigatorSearchResultItemInfoViewProps
+export const NavigatorSearchResultItemInfoView: FC<{
-{
     roomData: RoomDataParser;
-}
+}> = props =>
-
-export const NavigatorSearchResultItemInfoView: FC<NavigatorSearchResultItemInfoViewProps> = props =>
 {
     const { roomData = null } = props;
     const [ isVisible, setIsVisible ] = useState(false);
@@ -40,18 +37,18 @@ export const NavigatorSearchResultItemInfoView: FC<NavigatorSearchResultItemInfo
 
     return (
         <>
-            <div ref={ elementRef } className="icon icon-navigator-info cursor-pointer" onMouseLeave={ event => setIsVisible(false) } onMouseOver={ event => setIsVisible(true) } />
+            <div ref={ elementRef } className="cursor-pointer icon icon-navigator-info" onMouseLeave={ event => setIsVisible(false) } onMouseOver={ event => setIsVisible(true) } />
             <Overlay placement="right" show={ isVisible } target={ elementRef.current }>
                 <Popover>
-                    <NitroCardContentView className="room-info image-rendering-pixelated bg-transparent" overflow="hidden">
+                    <NitroCardContentView className="bg-transparent room-info image-rendering-pixelated" overflow="hidden">
                         <Flex gap={ 2 } overflow="hidden">
-                            <LayoutRoomThumbnailView className="flex flex-column items-center justify-content-end mb-1" customUrl={ roomData.officialRoomPicRef } roomId={ roomData.roomId }>
+                            <LayoutRoomThumbnailView className="flex flex-col items-center mb-1 justify-content-end" customUrl={ roomData.officialRoomPicRef } roomId={ roomData.roomId }>
                                 { roomData.habboGroupId > 0 && (
                                     <LayoutBadgeImageView badgeCode={ roomData.groupBadgeCode } className={ 'position-absolute top-0 start-0 m-1 ' } isGroup={ true }/>) }
                                 { roomData.doorMode !== RoomDataParser.OPEN_STATE && (
                                     <i className={ 'position-absolute end-0 mb-1 me-1 icon icon-navigator-room-' + (roomData.doorMode === RoomDataParser.DOORBELL_STATE ? 'locked' : roomData.doorMode === RoomDataParser.PASSWORD_STATE ? 'password' : roomData.doorMode === RoomDataParser.INVISIBLE_STATE ? 'invisible' : '') }/> ) }
                             </LayoutRoomThumbnailView>
-                            <div className="flex flex-column gap-1">
+                            <div className="flex flex-col gap-1">
                                 <Text bold truncate className="flex-grow-1" style={ { maxHeight: 13 } }>
                                     { roomData.roomName }
                                 </Text>

src/components/navigator/views/search/NavigatorSearchResultItemView.tsx

@@ -81,8 +81,8 @@ export const NavigatorSearchResultItemView: FC<NavigatorSearchResultItemViewProp
     }
 
     if(thumbnail) return (
-        <Column pointer alignItems="center" className="navigator-item p-1 bg-light rounded-3 small mb-1 flex-column border border-muted" gap={ 0 } overflow="hidden" onClick={ visitRoom } { ...rest }>
+        <Column pointer alignItems="center" className="navigator-item p-1 bg-light rounded-3 small mb-1 flex-col border border-muted" gap={ 0 } overflow="hidden" onClick={ visitRoom } { ...rest }>
-            <LayoutRoomThumbnailView className="flex flex-column items-center justify-content-end mb-1" customUrl={ roomData.officialRoomPicRef } roomId={ roomData.roomId }>
+            <LayoutRoomThumbnailView className="flex flex-col items-center justify-content-end mb-1" customUrl={ roomData.officialRoomPicRef } roomId={ roomData.roomId }>
                 { roomData.habboGroupId > 0 && <LayoutBadgeImageView badgeCode={ roomData.groupBadgeCode } className={ 'position-absolute top-0 start-0 m-1' } isGroup={ true } /> }
                 <Flex center className={ 'badge p-1 position-absolute m-1 ' + getUserCounterColor() } gap={ 1 }>
                     <FaUser className="fa-icon" />

src/components/navigator/views/search/NavigatorSearchResultView.tsx

@@ -85,7 +85,7 @@ export const NavigatorSearchResultView: FC<NavigatorSearchResultViewProps> = pro
             }
         </Column>
         // <div className="nitro-navigator-search-result bg-white rounded mb-2 overflow-hidden">
-        //     <div className="flex flex-column">
+        //     <div className="flex flex-col">
         //         <div className="flex items-center px-2 py-1 text-black">
         //             <i className={ 'text-secondary fas ' + (isExtended ? 'fa-minus' : 'fa-plus') } onClick={ toggleExtended }></i>
         //             <div className="ms-2 flex-grow-1">{ LocalizeText(getResultTitle()) }</div>

src/components/navigator/views/search/NavigatorSearchView.tsx

@@ -1,15 +1,12 @@
 import { FC, KeyboardEvent, useEffect, useState } from 'react';
 import { FaSearch } from 'react-icons/fa';
 import { INavigatorSearchFilter, LocalizeText, SearchFilterOptions } from '../../../../api';
-import { Button, Flex } from '../../../../common';
+import { Button } from '../../../../common';
 import { useNavigator } from '../../../../hooks';
 
-export interface NavigatorSearchViewProps
+export const NavigatorSearchView: FC<{
-{
     sendSearch: (searchValue: string, contextCode: string) => void;
-}
+}> = props =>
-
-export const NavigatorSearchView: FC<NavigatorSearchViewProps> = props =>
 {
     const { sendSearch = null } = props;
     const [ searchFilterIndex, setSearchFilterIndex ] = useState(0);
@@ -64,17 +61,17 @@ export const NavigatorSearchView: FC<NavigatorSearchViewProps> = props =>
     }, [ searchResult ]);
 
     return (
-        <div className="flex w-100 gap-1">
+        <div className="flex w-full gap-1">
-            <Flex shrink>
+            <div className="flex shrink-0">
-                <select className="form-select form-select-sm" value={ searchFilterIndex } onChange={ event => setSearchFilterIndex(parseInt(event.target.value)) }>
+                <select className="form-select" value={ searchFilterIndex } onChange={ event => setSearchFilterIndex(parseInt(event.target.value)) }>
                     { SearchFilterOptions.map((filter, index) =>
                     {
                         return <option key={ index } value={ index }>{ LocalizeText('navigator.filter.' + filter.name) }</option>
                     }) }
                 </select>
-            </Flex>
+            </div>
-            <div className="flex w-100 gap-1">
+            <div className="flex w-full gap-1">
-                <input className="form-control form-control-sm" placeholder={ LocalizeText('navigator.filter.input.placeholder') } type="text" value={ searchValue } onChange={ event => setSearchValue(event.target.value) } onKeyDown={ event => handleKeyDown(event) } />
+                <input className="w-full form-control" placeholder={ LocalizeText('navigator.filter.input.placeholder') } type="text" value={ searchValue } onChange={ event => setSearchValue(event.target.value) } onKeyDown={ event => handleKeyDown(event) } />
                 <Button variant="primary" onClick={ processSearch }>
                     <FaSearch className="fa-icon" />
                 </Button>

src/components/notification-center/NotificationCenterView.tsx

@@ -66,7 +66,7 @@ export const NotificationCenterView: FC<{}> = props =>
 
     return (
         <>
-            <div className="flex flex-column gap-1">
+            <div className="flex flex-col gap-1">
                 { getBubbleAlerts }
             </div>
             { getConfirms }

src/components/notification-center/views/alert-layouts/NotificationDefaultAlertView.tsx

@@ -29,7 +29,7 @@ export const NotificationDefaultAlertView: FC<NotificationDefaultAlertViewProps>
                 {
                     setImageFailed(true) 
                 } } /> }
-                <div className={ [ 'notification-text overflow-y-auto flex flex-column w-100', (item.clickUrl && !hasFrank) ? 'justify-center' : '' ].join(' ') }>
+                <div className={ [ 'notification-text overflow-y-auto flex flex-col w-100', (item.clickUrl && !hasFrank) ? 'justify-center' : '' ].join(' ') }>
                     { (item.messages.length > 0) && item.messages.map((message, index) =>
                     {
                         const htmlText = message.replace(/\r\n|\r|\n/g, '<br />');

src/components/notification-center/views/bubble-layouts/NotificationClubGiftBubbleView.tsx

@@ -12,7 +12,7 @@ export const NotificationClubGiftBubbleView: FC<NotificationClubGiftBubbleViewPr
     const { item = null, onClose = null, ...rest } = props;
 
     return (
-        <LayoutNotificationBubbleView className="flex-column club-gift" fadesOut={ false } onClose={ onClose } { ...rest }>
+        <LayoutNotificationBubbleView className="flex-col club-gift" fadesOut={ false } onClose={ onClose } { ...rest }>
             <div className="flex items-center gap-2 mb-2">
                 <LayoutCurrencyIcon className="flex-shrink-0" type="hc" />
                 <span className="ms-1">{ LocalizeText('notifications.text.club_gift') }</span>

src/components/room/widgets/avatar-info/AvatarInfoRentableBotChatView.tsx

@@ -39,11 +39,11 @@ export const AvatarInfoRentableBotChatView: FC<AvatarInfoRentableBotChatViewProp
                     { LocalizeText('bot.skill.chatter.configuration.title') }
                 </ContextMenuHeaderView>
                 <Column className="p-1">
-                    <div className="flex flex-column gap-1">
+                    <div className="flex flex-col gap-1">
                         <Text variant="white">{ LocalizeText('bot.skill.chatter.configuration.chat.text') }</Text>
                         <textarea className="form-control form-control-sm" placeholder={ LocalizeText('bot.skill.chatter.configuration.text.placeholder') } rows={ 7 } value={ newText } onChange={ e => setNewText(e.target.value) } />
                     </div>
-                    <div className="flex flex-column gap-1">
+                    <div className="flex flex-col gap-1">
                         <Flex alignItems="center" gap={ 1 } justifyContent="between">
                             <Text fullWidth variant="white">{ LocalizeText('bot.skill.chatter.configuration.automatic.chat') }</Text>
                             <input checked={ automaticChat } className="form-check-input" type="checkbox" onChange={ event => setAutomaticChat(event.target.checked) } />

src/components/room/widgets/avatar-info/AvatarInfoUseProductConfirmView.tsx

@@ -226,7 +226,7 @@ export const AvatarInfoUseProductConfirmView: FC<AvatarInfoUseProductConfirmView
             <NitroCardHeaderView headerText={ LocalizeText('useproduct.widget.title', [ 'name' ], [ petData.name ]) } onCloseClick={ onClose } />
             <NitroCardContentView center>
                 <Flex gap={ 2 } overflow="hidden">
-                    <div className="flex flex-column">
+                    <div className="flex flex-col">
                         <div className="product-preview cursor-pointer" onClick={ selectRoomObject }>
                             { getPetImage }
                         </div>

src/components/room/widgets/avatar-info/infostand/InfoStandWidgetBotView.tsx

@@ -18,14 +18,14 @@ export const InfoStandWidgetBotView: FC<InfoStandWidgetBotViewProps> = props =>
     return (
         <Column className="nitro-infostand rounded">
             <Column className="container-fluid content-area" gap={ 1 } overflow="visible">
-                <div className="flex flex-column gap-1">
+                <div className="flex flex-col gap-1">
                     <Flex alignItems="center" gap={ 1 } justifyContent="between">
                         <Text small wrap variant="white">{ avatarInfo.name }</Text>
                         <FaTimes className="cursor-pointer fa-icon" onClick={ onClose } />
                     </Flex>
                     <hr className="m-0" />
                 </div>
-                <div className="flex flex-column gap-1">
+                <div className="flex flex-col gap-1">
                     <div className="flex gap-1">
                         <Column fullWidth className="body-image bot">
                             <LayoutAvatarImageView direction={ 4 } figure={ avatarInfo.figure } />
@@ -43,7 +43,7 @@ export const InfoStandWidgetBotView: FC<InfoStandWidgetBotViewProps> = props =>
                     <Text fullWidth small textBreak wrap className="motto-content" variant="white">{ avatarInfo.motto }</Text>
                 </Flex>
                 { (avatarInfo.carryItem > 0) &&
-                    <div className="flex flex-column gap-1">
+                    <div className="flex flex-col gap-1">
                         <hr className="m-0" />
                         <Text small wrap variant="white">
                             { LocalizeText('infostand.text.handitem', [ 'item' ], [ LocalizeText('handitem' + avatarInfo.carryItem) ]) }

src/components/room/widgets/avatar-info/infostand/InfoStandWidgetFurniView.tsx

@@ -330,14 +330,14 @@ export const InfoStandWidgetFurniView: FC<InfoStandWidgetFurniViewProps> = props
         <Column alignItems="end" gap={ 1 }>
             <Column className="nitro-infostand rounded">
                 <Column className="container-fluid content-area" gap={ 1 } overflow="visible">
-                    <div className="flex flex-column gap-1">
+                    <div className="flex flex-col gap-1">
                         <Flex alignItems="center" gap={ 1 } justifyContent="between">
                             <Text small wrap variant="white">{ avatarInfo.name }</Text>
                             <FaTimes className="cursor-pointer fa-icon" onClick={ onClose } />
                         </Flex>
                         <hr className="m-0" />
                     </div>
-                    <div className="flex flex-column gap-1">
+                    <div className="flex flex-col gap-1">
                         <Flex gap={ 1 } position="relative">
                             { avatarInfo.stuffData.isUnique &&
                                 <div className="position-absolute end-0">
@@ -353,11 +353,11 @@ export const InfoStandWidgetFurniView: FC<InfoStandWidgetFurniViewProps> = props
                         </Flex>
                         <hr className="m-0" />
                     </div>
-                    <div className="flex flex-column gap-1">
+                    <div className="flex flex-col gap-1">
                         <Text fullWidth small textBreak wrap variant="white">{ avatarInfo.description }</Text>
                         <hr className="m-0" />
                     </div>
-                    <div className="flex flex-column gap-1">
+                    <div className="flex flex-col gap-1">
                         <div className="flex items-center gap-1">
                             <UserProfileIconView userId={ avatarInfo.ownerId } />
                             <Text small wrap variant="white">
@@ -372,7 +372,7 @@ export const InfoStandWidgetFurniView: FC<InfoStandWidgetFurniViewProps> = props
                             </Flex> }
                     </div>
                     { (isJukeBox || isSongDisk) &&
-                        <div className="flex flex-column gap-1">
+                        <div className="flex flex-col gap-1">
                             <hr className="m-0" />
                             { (songId === -1) &&
                                 <Text small wrap variant="white">
@@ -393,7 +393,7 @@ export const InfoStandWidgetFurniView: FC<InfoStandWidgetFurniViewProps> = props
                                     </Text>
                                 </div> }
                         </div> }
-                    <div className="flex flex-column gap-1">
+                    <div className="flex flex-col gap-1">
                         { isCrackable &&
                             <>
                                 <hr className="m-0" />
@@ -414,7 +414,7 @@ export const InfoStandWidgetFurniView: FC<InfoStandWidgetFurniViewProps> = props
                                 { (furniKeys.length > 0) &&
                                     <>
                                         <hr className="m-0"/>
-                                        <div className="flex flex-column gap-1">
+                                        <div className="flex flex-col gap-1">
                                             { furniKeys.map((key, index) =>
                                             {
                                                 return (
@@ -429,7 +429,7 @@ export const InfoStandWidgetFurniView: FC<InfoStandWidgetFurniViewProps> = props
                         { (customKeys.length > 0) &&
                             <>
                                 <hr className="m-0 my-1"/>
-                                <div className="flex flex-column gap-1">
+                                <div className="flex flex-col gap-1">
                                     { customKeys.map((key, index) =>
                                     {
                                         return (

src/components/room/widgets/avatar-info/infostand/InfoStandWidgetPetView.tsx

@@ -77,7 +77,7 @@ export const InfoStandWidgetPetView: FC<InfoStandWidgetPetViewProps> = props =>
         <Column alignItems="end" gap={ 1 }>
             <Column className="nitro-infostand rounded">
                 <Column className="container-fluid content-area" gap={ 1 } overflow="visible">
-                    <div className="flex flex-column gap-1">
+                    <div className="flex flex-col gap-1">
                         <Flex alignItems="center" gap={ 1 } justifyContent="between">
                             <Text small wrap variant="white">{ avatarInfo.name }</Text>
                             <FaTimes className="cursor-pointer fa-icon" onClick={ onClose } />
@@ -91,7 +91,7 @@ export const InfoStandWidgetPetView: FC<InfoStandWidgetPetViewProps> = props =>
                                 <LayoutPetImageView direction={ 4 } figure={ avatarInfo.petFigure } posture={ avatarInfo.posture } />
                                 <hr className="m-0" />
                             </Column>
-                            <div className="flex flex-column gap-2">
+                            <div className="flex flex-col gap-2">
                                 { !avatarInfo.dead &&
                                     <Column alignItems="center" gap={ 1 }>
                                         <Text center small wrap variant="white">{ LocalizeText('pet.level', [ 'level', 'maxlevel' ], [ avatarInfo.level.toString(), avatarInfo.maximumLevel.toString() ]) }</Text>
@@ -116,14 +116,14 @@ export const InfoStandWidgetPetView: FC<InfoStandWidgetPetViewProps> = props =>
                                 </Column>
                                 <hr className="m-0" />
                             </div>
-                            <div className="flex flex-column gap-1">
+                            <div className="flex flex-col gap-1">
                                 <Text small wrap variant="white">{ LocalizeText('pet.age', [ 'age' ], [ avatarInfo.age.toString() ]) }</Text>
                                 <hr className="m-0" />
                             </div>
                         </> }
                     { (avatarInfo.petType !== PetType.MONSTERPLANT) &&
                         <>
-                            <div className="flex flex-column gap-1">
+                            <div className="flex flex-col gap-1">
                                 <div className="flex gap-1">
                                     <Column fullWidth className="body-image pet p-1" overflow="hidden">
                                         <LayoutPetImageView direction={ 4 } figure={ avatarInfo.petFigure } posture={ avatarInfo.posture } />
@@ -161,14 +161,14 @@ export const InfoStandWidgetPetView: FC<InfoStandWidgetPetViewProps> = props =>
                                 </div>
                                 <hr className="m-0" />
                             </div>
-                            <div className="flex flex-column gap-1">
+                            <div className="flex flex-col gap-1">
                                 { (avatarInfo.petType !== PetType.MONSTERPLANT) &&
                                     <Text small wrap variant="white">{ LocalizeText('infostand.text.petrespect', [ 'count' ], [ avatarInfo.respect.toString() ]) }</Text> }
                                 <Text small wrap variant="white">{ LocalizeText('pet.age', [ 'age' ], [ avatarInfo.age.toString() ]) }</Text>
                                 <hr className="m-0" />
                             </div>
                         </> }
-                    <div className="flex flex-column gap-1">
+                    <div className="flex flex-col gap-1">
                         <div className="flex items-center gap-1">
                             <UserProfileIconView userId={ avatarInfo.ownerId } />
                             <Text small wrap variant="white">

src/components/room/widgets/avatar-info/infostand/InfoStandWidgetRentableBotView.tsx

@@ -28,17 +28,17 @@ export const InfoStandWidgetRentableBotView: FC<InfoStandWidgetRentableBotViewPr
     if(!avatarInfo) return;
 
     return (
-        <div className="flex flex-column gap-1">
+        <div className="flex flex-col gap-1">
-            <div className="flex flex-column nitro-infostand rounded">
+            <div className="flex flex-col nitro-infostand rounded">
-                <div className="flex flex-column gap-1 overflow-visible container-fluid content-area">
+                <div className="flex flex-col gap-1 overflow-visible container-fluid content-area">
-                    <div className="flex flex-column gap-1">
+                    <div className="flex flex-col gap-1">
                         <Flex alignItems="center" gap={ 1 } justifyContent="between">
                             <Text small wrap variant="white">{ avatarInfo.name }</Text>
                             <FaTimes className="cursor-pointer fa-icon" onClick={ onClose } />
                         </Flex>
                         <hr className="m-0" />
                     </div>
-                    <div className="flex flex-column gap-1">
+                    <div className="flex flex-col gap-1">
                         <div className="flex gap-1">
                             <Column fullWidth className="body-image bot">
                                 <LayoutAvatarImageView direction={ 4 } figure={ avatarInfo.figure } />
@@ -52,13 +52,13 @@ export const InfoStandWidgetRentableBotView: FC<InfoStandWidgetRentableBotViewPr
                         </div>
                         <hr className="m-0" />
                     </div>
-                    <div className="flex flex-column gap-1">
+                    <div className="flex flex-col gap-1">
                         <Flex alignItems="center" className="bg-light-dark rounded py-1 px-2">
                             <Text fullWidth small textBreak wrap className="motto-content" variant="white">{ avatarInfo.motto }</Text>
                         </Flex>
                         <hr className="m-0" />
                     </div>
-                    <div className="flex flex-column gap-1">
+                    <div className="flex flex-col gap-1">
                         <div className="flex items-center gap-1">
                             <UserProfileIconView userId={ avatarInfo.ownerId } />
                             <Text small wrap variant="white">

src/components/room/widgets/avatar-info/infostand/InfoStandWidgetUserView.tsx

@@ -125,7 +125,7 @@ export const InfoStandWidgetUserView: FC<InfoStandWidgetUserViewProps> = props =
     return (
         <Column className="nitro-infostand rounded">
             <Column className="container-fluid content-area" gap={ 1 } overflow="visible">
-                <div className="flex flex-column gap-1">
+                <div className="flex flex-col gap-1">
                     <div className="flex items-center justify-content-between">
                         <div className="flex items-center gap-1">
                             <UserProfileIconView userId={ avatarInfo.webID } />
@@ -135,7 +135,7 @@ export const InfoStandWidgetUserView: FC<InfoStandWidgetUserViewProps> = props =
                     </div>
                     <hr className="m-0" />
                 </div>
-                <div className="flex flex-column gap-1">
+                <div className="flex flex-col gap-1">
                     <div className="flex gap-1">
                         <Column fullWidth className="body-image" onClick={ event => GetUserProfile(avatarInfo.webID) }>
                             <LayoutAvatarImageView direction={ 4 } figure={ avatarInfo.figure } />
@@ -170,7 +170,7 @@ export const InfoStandWidgetUserView: FC<InfoStandWidgetUserViewProps> = props =
                     </div>
                     <hr className="m-0" />
                 </div>
-                <div className="flex flex-column gap-1">
+                <div className="flex flex-col gap-1">
                     <Flex alignItems="center" className="bg-light-dark rounded py-1 px-2">
                         { (avatarInfo.type !== AvatarInfoUser.OWN_USER) &&
                             <Flex grow alignItems="center" className="motto-content">
@@ -189,7 +189,7 @@ export const InfoStandWidgetUserView: FC<InfoStandWidgetUserViewProps> = props =
                     </Flex>
                     <hr className="m-0" />
                 </div>
-                <div className="flex flex-column gap-1">
+                <div className="flex flex-col gap-1">
                     <Text small wrap variant="white">
                         { LocalizeText('infostand.text.achievement_score') + ' ' + avatarInfo.achievementScore }
                     </Text>
@@ -201,7 +201,7 @@ export const InfoStandWidgetUserView: FC<InfoStandWidgetUserViewProps> = props =
                             </Text>
                         </> }
                 </div>
-                <div className="flex flex-column gap-1">
+                <div className="flex flex-col gap-1">
                     <InfoStandWidgetUserRelationshipsView relationships={ relationships } />
                 </div>
                 { GetConfigurationValue('user.tags.enabled') &&

src/components/room/widgets/friend-request/FriendRequestDialogView.tsx

@@ -12,7 +12,7 @@ export const FriendRequestDialogView: FC<{ roomIndex: number, request: Messenger
     return (
         <ObjectLocationView category={ RoomObjectCategory.UNIT } objectId={ roomIndex }>
             <div className="nitro-friend-request-dialog nitro-context-menu p-2">
-                <div className="flex flex-column">
+                <div className="flex flex-col">
                     <div className="flex items-center gap-2 justify-content-between">
                         <Text fontSize={ 6 } variant="white">{ LocalizeText('widget.friendrequest.from', [ 'username' ], [ request.name ]) }</Text>
                         <FaTimes className="cursor-pointer fa-icon" onClick={ event => hideFriendRequest(request.requesterUserId) } />

src/components/room/widgets/furniture/FurnitureBackgroundColorView.tsx

@@ -13,10 +13,10 @@ export const FurnitureBackgroundColorView: FC<{}> = props =>
         <NitroCardView className="nitro-room-widget-toner" theme="primary-slim">
             <NitroCardHeaderView headerText={ LocalizeText('widget.backgroundcolor.title') } onCloseClick={ onClose } />
             <NitroCardContentView justifyContent="between" overflow="hidden">
-                <div className="flex flex-column gap-1 overflow-auto">
+                <div className="flex flex-col gap-1 overflow-auto">
                     <input className="form-control" type="color" value={ ColorUtils.makeColorNumberHex(color) } onChange={ event => setColor(ColorUtils.convertFromHex(event.target.value)) } />
                 </div>
-                <div className="flex flex-column gap-1">
+                <div className="flex flex-col gap-1">
                     <Button fullWidth variant="primary" onClick={ toggleToner }>
                         { LocalizeText('widget.backgroundcolor.button.on') }
                     </Button>

src/components/room/widgets/furniture/FurnitureCraftingView.tsx

@@ -56,7 +56,7 @@ export const FurnitureCraftingView: FC<{}> = props =>
             <NitroCardHeaderView headerText={ LocalizeText('crafting.title') } onCloseClick={ onClose } />
             <NitroCardContentView>
                 <div className="flex flex-grow-1 gap-2 overflow-hidden">
-                    <div className="flex flex-column w-100 gap-2">
+                    <div className="flex flex-col w-100 gap-2">
                         <Column fullHeight overflow="hidden">
                             <div className="bg-muted rounded py-1 text-center">{ LocalizeText('crafting.title.products') }</div>
                             <AutoGrid columnCount={ 5 }>
@@ -70,10 +70,10 @@ export const FurnitureCraftingView: FC<{}> = props =>
                             </AutoGrid>
                         </Column>
                     </div>
-                    <div className="flex flex-column w-100 gap-2">
+                    <div className="flex flex-col w-100 gap-2">
                         { !selectedRecipe && <Column center fullHeight className="text-black text-center">{ LocalizeText('crafting.info.start') }</Column> }
                         { selectedRecipe && <>
-                            <div className="flex flex-column h-100 overflow-hidden">
+                            <div className="flex flex-col h-100 overflow-hidden">
                                 <div className="bg-muted rounded py-1 text-center">{ LocalizeText('crafting.current_recipe') }</div>
                                 <AutoGrid columnCount={ 5 }>
                                     { !!requiredIngredients && (requiredIngredients.length > 0) && requiredIngredients.map(ingredient =>
@@ -91,11 +91,11 @@ export const FurnitureCraftingView: FC<{}> = props =>
                                     }) }
                                 </AutoGrid>
                             </div>
-                            <div className="flex flex-column h-100 gap-2">
+                            <div className="flex flex-col h-100 gap-2">
-                                <div className="flex flex-column h-100 bg-muted rounded gap-2">
+                                <div className="flex flex-col h-100 bg-muted rounded gap-2">
                                     <div className="py-1 text-center">{ LocalizeText('crafting.result') }</div>
-                                    <div className="flex items-center justify-center flex-column h-100 pb-1 gap-1">
+                                    <div className="flex items-center justify-center flex-col h-100 pb-1 gap-1">
-                                        <div className="flex flex-column h-100">
+                                        <div className="flex flex-col h-100">
                                             <img src={ selectedRecipe.iconUrl } />
                                         </div>
                                         <div className="text-black">{ selectedRecipe.localizedName }</div>

src/components/room/widgets/furniture/FurnitureDimmerView.tsx

@@ -46,7 +46,7 @@ export const FurnitureDimmerView: FC<{}> = props =>
                     </Column> }
                 { (dimmerState === 1) &&
                     <>
-                        <div className="flex flex-column gap-1">
+                        <div className="flex flex-col gap-1">
                             <Text fontWeight="bold">{ LocalizeText('widget.backgroundcolor.hue') }</Text>
                             { isFreeColorMode &&
                                 <input className="form-control" type="color" value={ ColorUtils.makeColorNumberHex(selectedColor) } onChange={ event => setSelectedColor(ColorUtils.convertFromHex(event.target.value)) } /> }
@@ -60,7 +60,7 @@ export const FurnitureDimmerView: FC<{}> = props =>
                                     }) }
                                 </Grid> }
                         </div>
-                        <div className="flex flex-column gap-1">
+                        <div className="flex flex-col gap-1">
                             <Text fontWeight="bold">{ LocalizeText('widget.backgroundcolor.lightness') }</Text>
                             <ReactSlider
                                 className="nitro-slider"

src/components/room/widgets/furniture/FurnitureExchangeCreditView.tsx

@@ -14,10 +14,10 @@ export const FurnitureExchangeCreditView: FC<{}> = props =>
             <NitroCardHeaderView headerText={ LocalizeText('catalog.redeem.dialog.title') } onCloseClick={ onClose } />
             <NitroCardContentView center>
                 <div className="flex gap-2 overflow-hidden">
-                    <div className="flex flex-column items-center justify-conent-center">
+                    <div className="flex flex-col items-center justify-conent-center">
                         <div className="exchange-image" />
                     </div>
-                    <div className="flex flex-column justify-content-between overflow-hidden flex-grow-1">
+                    <div className="flex flex-col justify-content-between overflow-hidden flex-grow-1">
                         <Column gap={ 1 } overflow="auto">
                             <Text fontWeight="bold">{ LocalizeText('creditfurni.description', [ 'credits' ], [ value.toString() ]) }</Text>
                             <Text>{ LocalizeText('creditfurni.prompt') }</Text>

src/components/room/widgets/furniture/FurnitureFriendFurniView.tsx

@@ -46,8 +46,8 @@ export const FurnitureFriendFurniView: FC<{}> = props =>
                             <LayoutAvatarImageView direction={ 4 } figure={ figures[1] } />
                         </div>
                     </div>
-                    <div className="flex flex-column mt-1 justify-content-between">
+                    <div className="flex flex-col mt-1 justify-content-between">
-                        <div className="flex flex-column items-center gap-1 justify-center">
+                        <div className="flex flex-col items-center gap-1 justify-center">
                             <div>
                                 { (type === 0) && LocalizeText('lovelock.engraving.caption') }
                                 { (type === 3) && LocalizeText('wildwest.engraving.caption') }

src/components/room/widgets/furniture/FurnitureHighScoreView.tsx

@@ -24,7 +24,7 @@ export const FurnitureHighScoreView: FC<{}> = props =>
                                 { LocalizeText('high.score.display.caption', [ 'scoretype', 'cleartype' ], [ LocalizeText(`high.score.display.scoretype.${ getScoreType(stuffData.scoreType) }`), LocalizeText(`high.score.display.cleartype.${ getClearType(stuffData.clearType) }`) ]) }
                             </ContextMenuHeaderView>
                             <ContextMenuListView className="h-100" gap={ 1 } overflow="hidden">
-                                <div className="flex flex-column gap-1">
+                                <div className="flex flex-col gap-1">
                                     <div className="flex items-center">
                                         <Text bold center className="col-8" variant="white">
                                             { LocalizeText('high.score.display.users.header') }

src/components/room/widgets/furniture/FurnitureMannequinView.tsx

@@ -85,7 +85,7 @@ export const FurnitureMannequinView: FC<{}> = props =>
             <NitroCardHeaderView headerText={ LocalizeText('mannequin.widget.title') } onCloseClick={ onClose } />
             <NitroCardContentView center>
                 <div className="flex w-100 gap-2 overflow-hidden">
-                    <div className="flex flex-column">
+                    <div className="flex flex-col">
                         <div className="position-relative mannequin-preview">
                             <LayoutAvatarImageView direction={ 2 } figure={ renderedFigure } position="absolute" />
                             { (clubLevel > 0) &&
@@ -96,7 +96,7 @@ export const FurnitureMannequinView: FC<{}> = props =>
                         { (mode === MODE_CONTROLLER) &&
                             <>
                                 <input className="form-control form-control-sm" type="text" value={ name } onBlur={ saveName } onChange={ event => setName(event.target.value) } />
-                                <div className="flex flex-column gap-1">
+                                <div className="flex flex-col gap-1">
                                     <Button variant="success" onClick={ event => setMode(MODE_UPDATE) }>
                                         { LocalizeText('mannequin.widget.style') }
                                     </Button>
@@ -107,7 +107,7 @@ export const FurnitureMannequinView: FC<{}> = props =>
                             </> }
                         { (mode === MODE_UPDATE) &&
                             <>
-                                <div className="flex flex-column gap-1">
+                                <div className="flex flex-col gap-1">
                                     <Text bold>{ name }</Text>
                                     <Text wrap>{ LocalizeText('mannequin.widget.savetext') }</Text>
                                 </div>
@@ -122,7 +122,7 @@ export const FurnitureMannequinView: FC<{}> = props =>
                             </> }
                         { (mode === MODE_PEER) &&
                             <>
-                                <div className="flex flex-column gap-1">
+                                <div className="flex flex-col gap-1">
                                     <Text bold>{ name }</Text>
                                     <Text>{ LocalizeText('mannequin.widget.weartext') }</Text>
                                 </div>

src/components/room/widgets/furniture/FurnitureMysteryTrophyOpenDialogView.tsx

@@ -33,7 +33,7 @@ export const FurnitureMysteryTrophyOpenDialogView: FC<FurnitureMysteryTrophyOpen
                     </div>
                 </div>
                 <div className="flex mysterytrophy-dialog-bottom p-2">
-                    <div className="flex flex-column gap-1">
+                    <div className="flex flex-col gap-1">
                         <div className="flex items-center bg-white rounded py-1 px-2 input-mysterytrophy-dialog">
                             <textarea className="form-control form-control-sm input-mysterytrophy" value={ description } onChange={ event => setDescription(event.target.value) } />
                             <div className="mysterytrophy-pencil-image flex-shrink-0 small fa-icon"></div>

src/components/room/widgets/furniture/FurnitureStackHeightView.tsx

@@ -44,7 +44,7 @@ export const FurnitureStackHeightView: FC<{}> = props =>
                         onChange={ event => updateHeight(event) } />
                     <input className="show-number-arrows" max={ maxHeight } min={ 0 } style={ { width: 50 } } type="number" value={ tempHeight } onChange={ event => updateTempHeight(event.target.value) } />
                 </div>
-                <div className="flex flex-column gap-1">
+                <div className="flex flex-col gap-1">
                     <Button onClick={ event => SendMessageComposer(new FurnitureStackHeightComposer(objectId, -100)) }>
                         { LocalizeText('furniture.above.stack') }
                     </Button>

src/components/room/widgets/furniture/FurnitureYoutubeDisplayView.tsx

@@ -85,7 +85,7 @@ export const FurnitureYoutubeDisplayView: FC<{}> = FurnitureYoutubeDisplayViewPr
                             <div className="empty-video size-full justify-center items-center flex">{ LocalizeText('widget.furni.video_viewer.no_videos') }</div>
                         }
                     </div>
-                    <div className="playlist-container col-3 flex flex-column">
+                    <div className="playlist-container col-3 flex flex-col">
                         <span className="playlist-controls justify-center flex">
                             <i className="icon icon-youtube-prev cursor-pointer" onClick={ previous } />
                             <i className="icon icon-youtube-next cursor-pointer" onClick={ next } />

src/components/room/widgets/furniture/context-menu/MonsterPlantSeedConfirmView.tsx

@@ -63,12 +63,12 @@ export const MonsterPlantSeedConfirmView: FC<MonsterPlantSeedConfirmViewProps> =
             <NitroCardHeaderView headerText={ LocalizeText('useproduct.widget.title.plant_seed', [ 'name' ], [ furniData.name ]) } onCloseClick={ onClose } />
             <NitroCardContentView center>
                 <div className="flex gap-2 overflow-hidden">
-                    <div className="flex flex-column">
+                    <div className="flex flex-col">
                         <div className="product-preview">
                             <div className="monsterplant-image" />
                         </div>
                     </div>
-                    <div className="flex flex-column justify-content-between overflow-auto">
+                    <div className="flex flex-col justify-content-between overflow-auto">
                         <Column gap={ 2 }>
                             <Text>{ LocalizeText('useproduct.widget.text.plant_seed', [ 'productName' ], [ furniData.name ] ) }</Text>
                             <Text>{ LocalizeText('useproduct.widget.info.plant_seed') }</Text>

src/components/room/widgets/furniture/context-menu/PurchasableClothingConfirmView.tsx

@@ -82,12 +82,12 @@ export const PurchasableClothingConfirmView: FC<PurchasableClothingConfirmViewPr
             <NitroCardHeaderView headerText={ LocalizeText('useproduct.widget.title.bind_clothing') } onCloseClick={ onClose } />
             <NitroCardContentView center>
                 <div className="flex overflow-hidden gap-2">
-                    <div className="flex flex-column">
+                    <div className="flex flex-col">
                         <div className="mannequin-preview">
                             <LayoutAvatarImageView direction={ 2 } figure={ newFigure } />
                         </div>
                     </div>
-                    <div className="flex flex-column justify-content-between overflow-auto">
+                    <div className="flex flex-col justify-content-between overflow-auto">
                         <Column gap={ 2 }>
                             <Text>{ LocalizeText('useproduct.widget.text.bind_clothing') }</Text>
                             <Text>{ LocalizeText('useproduct.widget.info.bind_clothing') }</Text>

src/components/room/widgets/furniture/playlist-editor/FurniturePlaylistEditorWidgetView.tsx

@@ -16,10 +16,10 @@ export const FurniturePlaylistEditorWidgetView: FC<{}> = props =>
             <NitroCardHeaderView headerText={ LocalizeText('playlist.editor.title') } onCloseClick={ onClose } />
             <NitroCardContentView>
                 <div className="flex flex-row gap-1 h-100">
-                    <div className="w-50 position-relative overflow-hidden h-100 rounded flex flex-column">
+                    <div className="w-50 position-relative overflow-hidden h-100 rounded flex flex-col">
                         <DiskInventoryView addToPlaylist={ addToPlaylist } diskInventory={ diskInventory } />
                     </div>
-                    <div className="w-50 position-relative overflow-hidden h-100 rounded flex flex-column">
+                    <div className="w-50 position-relative overflow-hidden h-100 rounded flex flex-col">
                         <SongPlaylistView currentPlayingIndex={ currentPlayingIndex } furniId={ objectId } playlist={ playlist } removeFromPlaylist={ removeFromPlaylist } togglePlayPause={ togglePlayPause }/>
                     </div>
                 </div>

src/components/room/widgets/furniture/playlist-editor/SongPlaylistView.tsx

@@ -33,7 +33,7 @@ export const SongPlaylistView: FC<SongPlaylistViewProps> = props =>
             <h2 className="ms-4">{ LocalizeText('playlist.editor.playlist') }</h2>
         </div>
         <div className="h-100 overflow-y-scroll py-2">
-            <div className="flex flex-column gap-2">
+            <div className="flex flex-col gap-2">
                 { playlist && playlist.map( (songInfo, index) =>
                 {
                     return <div key={ index } className={ 'flex gap-1 items-center text-black cursor-pointer ' + (selectedItem === index ? 'border border-muted border-2 rounded' : 'border-2') } onClick={ () => setSelectedItem(prev => prev === index ? -1 : index) }>
@@ -63,7 +63,7 @@ export const SongPlaylistView: FC<SongPlaylistViewProps> = props =>
                         <Button variant="danger" onClick={ () => playPause(furniId, selectedItem) }>
                             <div className="pause-song"/>
                         </Button>
-                        <div className="flex flex-column">
+                        <div className="flex flex-col">
                             <Text bold display="block">{ LocalizeText('playlist.editor.text.now.playing.in.your.room') }</Text>
                             <Text>
                                 { playlist[currentPlayingIndex]?.name + ' - ' + playlist[currentPlayingIndex]?.creator }

src/components/room/widgets/mysterybox/MysteryBoxExtensionView.tsx

@@ -39,7 +39,7 @@ export const MysteryBoxExtensionView: FC<{}> = props =>
 
     return (
         <div className="nitro-notification-bubble rounded mysterybox-extension">
-            <div className="flex flex-column">
+            <div className="flex flex-col">
                 <Flex pointer alignItems="center" justifyContent="between" onClick={ event => setIsOpen(value => !value) }>
                     <Text variant="white">{ LocalizeText('mysterybox.tracker.title') }</Text>
                     { isOpen && <FaChevronUp className="fa-icon" /> }

src/components/room/widgets/pet-package/PetPackageWidgetView.tsx

@@ -21,7 +21,7 @@ export const PetPackageWidgetView: FC<{}> = props =>
                             </div>
                         </div>
                         <div className="flex pet-package-container-bottom p-2">
-                            <div className="flex flex-column gap-1">
+                            <div className="flex flex-col gap-1">
                                 <div className="flex items-center bg-white rounded py-1 px-2 input-pet-package-container">
                                     <input className="form-control form-control-sm input-pet-package" maxLength={ GetConfigurationValue('pet.package.name.max.length') } placeholder={ objectType === 'gnome_box' ? LocalizeText('widgets.gnomepackage.name.select') : LocalizeText('widgets.petpackage.name.title') } type="text" value={ petName } onChange={ event => onChangePetName(event.target.value) } />
                                     <div className="package-pencil-image flex-shrink-0 small fa-icon"></div>

src/components/room/widgets/room-promotes/RoomPromotesWidgetView.tsx

@@ -22,7 +22,7 @@ export const RoomPromotesWidgetView: FC<{}> = props =>
         <>
             { promoteInformation.data.adId !== -1 &&
                 <div className="nitro-notification-bubble rounded">
-                    <div className="flex flex-column">
+                    <div className="flex flex-col">
                         <Flex pointer alignItems="center" justifyContent="between" onClick={ event => setIsOpen(value => !value) }>
                             <Text overflow="hidden" variant="white">{ promoteInformation.data.eventName }</Text>
                             { isOpen && <FaChevronUp className="fa-icon" /> }

src/components/room/widgets/room-promotes/views/RoomPromoteEditWidgetView.tsx

@@ -27,15 +27,15 @@ export const RoomPromoteEditWidgetView: FC<RoomPromoteEditWidgetViewProps> = pro
         <NitroCardView className="nitro-guide-tool" theme="primary-slim">
             <NitroCardHeaderView headerText={ LocalizeText('navigator.eventsettings.editcaption') } onCloseClick={ () => setIsEditingPromote(false) } />
             <NitroCardContentView className="text-black">
-                <div className="flex flex-column">
+                <div className="flex flex-col">
                     <Text bold>{ LocalizeText('navigator.eventsettings.name') }</Text>
                     <input className="form-control form-control-sm" maxLength={ 64 } placeholder={ LocalizeText('navigator.eventsettings.name') } type="text" value={ newEventName } onChange={ event => setNewEventName(event.target.value) } />
                 </div>
-                <div className="flex flex-column">
+                <div className="flex flex-col">
                     <Text bold>{ LocalizeText('navigator.eventsettings.desc') }</Text>
                     <textarea className="form-control form-control-sm" maxLength={ 64 } placeholder={ LocalizeText('navigator.eventsettings.desc') } value={ newEventDescription } onChange={ event => setNewEventDescription(event.target.value) }></textarea>
                 </div>
-                <div className="flex flex-column">
+                <div className="flex flex-col">
                     <Button fullWidth disabled={ !newEventName || !newEventDescription } variant={ (!newEventName || !newEventDescription) ? 'danger' : 'success' } onClick={ event => updatePromote() }>{ LocalizeText('navigator.eventsettings.edit') }</Button>
                 </div>
             </NitroCardContentView>

src/components/room/widgets/room-tools/RoomToolsWidgetView.tsx

@@ -72,18 +72,18 @@ export const RoomToolsWidgetView: FC<{}> = props =>
 
     return (
         <div className="flex gap-2 nitro-room-tools-container">
-            <div className="flex flex-column justify-center items-center nitro-room-tools p-2">
+            <div className="flex flex-col justify-center items-center nitro-room-tools p-2">
                 <div className="icon icon-cog cursor-pointer" title={ LocalizeText('room.settings.button.text') } onClick={ () => handleToolClick('settings') } />
                 <div className={ classNames('cursor-pointer', 'icon', (!isZoomedIn && 'icon-zoom-less'), (isZoomedIn && 'icon-zoom-more')) } title={ LocalizeText('room.zoom.button.text') } onClick={ () => handleToolClick('zoom') } />
                 <div className="icon icon-chat-history cursor-pointer" title={ LocalizeText('room.chathistory.button.text') } onClick={ () => handleToolClick('chat_history') } />
                 { navigatorData.canRate &&
                     <div className="icon icon-like-room cursor-pointer" title={ LocalizeText('room.like.button.text') } onClick={ () => handleToolClick('like_room') } /> }
             </div>
-            <div className="flex flex-column justify-center">
+            <div className="flex flex-col justify-center">
                 <TransitionAnimation inProp={ isOpen } timeout={ 300 } type={ TransitionAnimationTypes.SLIDE_LEFT }>
-                    <div className="flex flex-column justify-center items-center">
+                    <div className="flex flex-col justify-center items-center">
-                        <div className="flex flex-column nitro-room-tools-info rounded py-2 px-3">
+                        <div className="flex flex-col nitro-room-tools-info rounded py-2 px-3">
-                            <div className="flex flex-column gap-1">
+                            <div className="flex flex-col gap-1">
                                 <Text wrap fontSize={ 4 } variant="white">{ roomName }</Text>
                                 <Text fontSize={ 5 } variant="muted">{ roomOwner }</Text>
                             </div>

src/components/room/widgets/word-quiz/WordQuizQuestionView.tsx

@@ -28,7 +28,7 @@ export const WordQuizQuestionView: FC<WordQuizQuestionViewProps> = props =>
                     </div>
                 </div> }
             { canVote &&
-                <div className="flex flex-column">
+                <div className="flex flex-col">
                     <Text center textBreak variant="white">{ question }</Text>
                     <div className="flex w-100 gap-1 justify-center">
                         <Flex center pointer className="bg-danger rounded p-1" onClick={ event => vote(VALUE_KEY_DISLIKE) }>

src/components/user-profile/views/FriendsContainerView.tsx

@@ -15,12 +15,12 @@ export const FriendsContainerView: FC<FriendsContainerViewProps> = props =>
     const { relationships = null, friendsCount = null } = props;
 
     return (
-        <div className="flex flex-column gap-1">
+        <div className="flex flex-col gap-1">
             <Text small>
                 <b>{ LocalizeText('extendedprofile.friends.count') }</b> { friendsCount }
             </Text>
             <Text bold small>{ LocalizeText('extendedprofile.relstatus') }</Text>
-            <div className="flex flex-column">
+            <div className="flex flex-col">
                 <RelationshipsContainerView relationships={ relationships } />
             </div>
         </div>