From 6010103b90be51a1d0b115ba3cdcce3aebf808b7 Mon Sep 17 00:00:00 2001
From: Bill <billsonnn@billsonnn.com>
Date: Sun, 14 Apr 2024 15:04:09 -0400
Subject: [PATCH] Layout changes

---
 src/assets/images/ui/ubuntu-close-buttons.png | Bin 0 -> 1964 bytes
 src/common/Flex.tsx                           |   4 +-
 src/common/InfiniteGrid.tsx                   |  83 ------------------
 src/common/index.ts                           |   2 +-
 .../views/AchievementDetailsView.tsx          |   4 +-
 .../AvatarEditorFigurePreviewView.tsx         |   2 +-
 .../avatar-editor/AvatarEditorModelView.tsx   |   6 +-
 .../avatar-editor/AvatarEditorView.tsx        |   6 +-
 .../camera/views/CameraWidgetCheckoutView.tsx |   2 +-
 src/components/campaign/CalendarView.tsx      |   2 +-
 .../catalog/views/gift/CatalogGiftView.tsx    |   4 +-
 .../layout/CatalogLayoutColorGroupingView.tsx |   2 +-
 .../page/layout/CatalogLayoutDefaultView.tsx  |   2 +-
 .../layout/CatalogLayoutInfoLoyaltyView.tsx   |   2 +-
 .../page/layout/CatalogLayoutRoomAdsView.tsx  |   8 +-
 .../layout/CatalogLayoutRoomBundleView.tsx    |   2 +-
 .../layout/CatalogLayoutSingleBundleView.tsx  |   2 +-
 .../layout/CatalogLayoutSoundMachineView.tsx  |   2 +-
 .../page/layout/CatalogLayoutVipBuyView.tsx   |   2 +-
 .../CatalogLayoutMarketplaceItemView.tsx      |   2 +-
 ...CatalogLayoutMarketplaceSearchFormView.tsx |   2 +-
 .../views/FloorplanOptionsView.tsx            |   2 +-
 .../friends-list/FriendsListSearchView.tsx    |   2 +-
 .../views/messenger/FriendsMessengerView.tsx  |   2 +-
 .../groups/views/GroupInformationView.tsx     |  10 +--
 .../groups/views/GroupMembersView.tsx         |   2 +-
 .../groups/views/GroupRoomInformationView.tsx |   2 +-
 .../tabs/GroupTabCreatorConfirmationView.tsx  |   4 +-
 .../views/tabs/GroupTabIdentityView.tsx       |   2 +-
 .../views/tabs/GroupTabSettingsView.tsx       |   8 +-
 .../guide-tool/views/GuideToolAcceptView.tsx  |   6 +-
 .../guide-tool/views/GuideToolMenuView.tsx    |   6 +-
 .../guide-tool/views/GuideToolOngoingView.tsx |   2 +-
 .../views/GuideToolUserCreateRequestView.tsx  |   2 +-
 .../views/GuideToolUserFeedbackView.tsx       |   6 +-
 .../views/GuideToolUserNoHelpersView.tsx      |   2 +-
 .../views/GuideToolUserPendingView.tsx        |   4 +-
 .../views/GuideToolUserSomethingWrogView.tsx  |   2 +-
 .../views/GuideToolUserThanksView.tsx         |   2 +-
 src/components/hc-center/HcCenterView.tsx     |   4 +-
 .../help/views/DescribeReportView.tsx         |   2 +-
 src/components/help/views/HelpIndexView.tsx   |   4 +-
 .../help/views/ReportSummaryView.tsx          |   2 +-
 .../help/views/SelectReportedChatsView.tsx    |   2 +-
 .../help/views/SelectReportedUserView.tsx     |   2 +-
 src/components/help/views/SelectTopicView.tsx |   2 +-
 .../NameChangeConfirmationView.tsx            |   4 +-
 .../views/name-change/NameChangeInitView.tsx  |   2 +-
 .../views/name-change/NameChangeInputView.tsx |   4 +-
 src/components/hotel-view/HotelView.tsx       |   2 +-
 .../promo-article/PromoArticleWidgetView.tsx  |   2 +-
 .../widget-container/WidgetContainerView.tsx  |   2 +-
 src/components/inventory/InventoryView.tsx    |  32 ++++---
 .../furniture/InventoryFurnitureView.tsx      |  34 +++----
 .../mod-tools/views/room/ModToolsRoomView.tsx |   2 +-
 .../views/user/ModToolsUserModActionView.tsx  |   2 +-
 src/components/navigator/NavigatorView.tsx    |  34 +++----
 .../views/NavigatorDoorStateView.tsx          |   8 +-
 .../views/NavigatorRoomCreatorView.tsx        |  16 ++--
 .../navigator/views/NavigatorRoomInfoView.tsx |   2 +-
 .../navigator/views/NavigatorRoomLinkView.tsx |   2 +-
 .../NavigatorRoomSettingsAccessTabView.tsx    |   8 +-
 .../NavigatorRoomSettingsModTabView.tsx       |   6 +-
 .../NavigatorRoomSettingsVipChatTabView.tsx   |   2 +-
 .../NavigatorSearchResultItemInfoView.tsx     |  15 ++--
 .../search/NavigatorSearchResultItemView.tsx  |   4 +-
 .../search/NavigatorSearchResultView.tsx      |   2 +-
 .../views/search/NavigatorSearchView.tsx      |  21 ++---
 .../NotificationCenterView.tsx                |   2 +-
 .../NotificationDefaultAlertView.tsx          |   2 +-
 .../NotificationClubGiftBubbleView.tsx        |   2 +-
 .../AvatarInfoRentableBotChatView.tsx         |   4 +-
 .../AvatarInfoUseProductConfirmView.tsx       |   2 +-
 .../infostand/InfoStandWidgetBotView.tsx      |   6 +-
 .../infostand/InfoStandWidgetFurniView.tsx    |  16 ++--
 .../infostand/InfoStandWidgetPetView.tsx      |  12 +--
 .../InfoStandWidgetRentableBotView.tsx        |  14 +--
 .../infostand/InfoStandWidgetUserView.tsx     |  10 +--
 .../FriendRequestDialogView.tsx               |   2 +-
 .../FurnitureBackgroundColorView.tsx          |   4 +-
 .../furniture/FurnitureCraftingView.tsx       |  14 +--
 .../widgets/furniture/FurnitureDimmerView.tsx |   4 +-
 .../furniture/FurnitureExchangeCreditView.tsx |   4 +-
 .../furniture/FurnitureFriendFurniView.tsx    |   4 +-
 .../furniture/FurnitureHighScoreView.tsx      |   2 +-
 .../furniture/FurnitureMannequinView.tsx      |   8 +-
 .../FurnitureMysteryTrophyOpenDialogView.tsx  |   2 +-
 .../furniture/FurnitureStackHeightView.tsx    |   2 +-
 .../furniture/FurnitureYoutubeDisplayView.tsx |   2 +-
 .../MonsterPlantSeedConfirmView.tsx           |   4 +-
 .../PurchasableClothingConfirmView.tsx        |   4 +-
 .../FurniturePlaylistEditorWidgetView.tsx     |   4 +-
 .../playlist-editor/SongPlaylistView.tsx      |   4 +-
 .../mysterybox/MysteryBoxExtensionView.tsx    |   2 +-
 .../pet-package/PetPackageWidgetView.tsx      |   2 +-
 .../room-promotes/RoomPromotesWidgetView.tsx  |   2 +-
 .../views/RoomPromoteEditWidgetView.tsx       |   6 +-
 .../room-tools/RoomToolsWidgetView.tsx        |  10 +--
 .../word-quiz/WordQuizQuestionView.tsx        |   2 +-
 .../views/FriendsContainerView.tsx            |   4 +-
 .../views/RelationshipsContainerView.tsx      |   2 +-
 .../user-profile/views/UserContainerView.tsx  |   8 +-
 .../user-settings/UserSettingsView.tsx        |  10 +--
 src/components/wired/views/WiredBaseView.tsx  |   2 +-
 .../wired/views/WiredFurniSelectorView.tsx    |   2 +-
 .../views/actions/WiredActionBaseView.tsx     |   2 +-
 .../WiredActionBotChangeFigureView.tsx        |   2 +-
 .../WiredActionBotFollowAvatarView.tsx        |   4 +-
 .../WiredActionBotGiveHandItemView.tsx        |   4 +-
 .../views/actions/WiredActionBotMoveView.tsx  |   2 +-
 .../WiredActionBotTalkToAvatarView.tsx        |   6 +-
 .../views/actions/WiredActionBotTalkView.tsx  |   6 +-
 .../actions/WiredActionBotTeleportView.tsx    |   2 +-
 .../views/actions/WiredActionChatView.tsx     |   2 +-
 .../actions/WiredActionGiveRewardView.tsx     |   4 +-
 ...redActionGiveScoreToPredefinedTeamView.tsx |   6 +-
 .../actions/WiredActionGiveScoreView.tsx      |   4 +-
 .../views/actions/WiredActionJoinTeamView.tsx |   2 +-
 .../actions/WiredActionKickFromRoomView.tsx   |   2 +-
 .../WiredActionMoveAndRotateFurniView.tsx     |   4 +-
 .../actions/WiredActionMoveFurniToView.tsx    |   4 +-
 .../actions/WiredActionMoveFurniView.tsx      |   4 +-
 .../views/actions/WiredActionMuteUserView.tsx |   4 +-
 .../WiredActionSetFurniStateToView.tsx        |   2 +-
 .../WiredConditionActorHasHandItem.tsx        |   2 +-
 .../WiredConditionActorIsTeamMemberView.tsx   |   2 +-
 .../WiredConditionActorIsWearingBadgeView.tsx |   2 +-
 ...WiredConditionActorIsWearingEffectView.tsx |   2 +-
 .../WiredConditionDateRangeView.tsx           |   4 +-
 .../WiredConditionFurniHasFurniOnView.tsx     |   2 +-
 .../WiredConditionFurniHasNotFurniOnView.tsx  |   2 +-
 ...WiredConditionFurniMatchesSnapshotView.tsx |   2 +-
 .../WiredConditionTimeElapsedLessView.tsx     |   2 +-
 .../WiredConditionTimeElapsedMoreView.tsx     |   2 +-
 .../WiredConditionUserCountInRoomView.tsx     |   4 +-
 .../WiredTriggerAvatarEnterRoomView.tsx       |   2 +-
 .../WiredTriggerAvatarSaysSomethingView.tsx   |   4 +-
 .../WiredTriggerBotReachedAvatarView.tsx      |   2 +-
 .../WiredTriggerBotReachedStuffView.tsx       |   2 +-
 .../triggers/WiredTriggerExecuteOnceView.tsx  |   2 +-
 ...iredTriggerExecutePeriodicallyLongView.tsx |   2 +-
 .../WiredTriggerExecutePeriodicallyView.tsx   |   2 +-
 .../WiredTriggerScoreAchievedView.tsx         |   2 +-
 src/index.css                                 |  13 +++
 src/layout/InfiniteGrid.tsx                   |  70 +++++++++++++++
 src/layout/NitroCard.tsx                      |  70 +++++++--------
 src/layout/index.ts                           |   1 +
 tailwind.config.js                            |  20 +++--
 148 files changed, 453 insertions(+), 448 deletions(-)
 create mode 100644 src/assets/images/ui/ubuntu-close-buttons.png
 delete mode 100644 src/common/InfiniteGrid.tsx
 create mode 100644 src/layout/InfiniteGrid.tsx

diff --git a/src/assets/images/ui/ubuntu-close-buttons.png b/src/assets/images/ui/ubuntu-close-buttons.png
new file mode 100644
index 0000000000000000000000000000000000000000..d6a79a6732eefeba4ef654180b0aa09758594629
GIT binary patch
literal 1964
zcmcIlZEO@p7+wr*ptMS)6090GOO3X$w;%Vhw`&h*@7mr0+tzZzRYPPtGuPX2`_bKP
z?^+Tfe*6FxTR=mQ7$hc&nEIm_0>qDCf{g;k4}?HMj3_Dnqp4966VciB?raP+{o^LP
zGduIl^FHr8@4U0Kqph{7qNakPsH#Lf)=65KywwZJ$ycg>O()GlE8gW$)S@NcJC8bW
za2Z9F-PDpPH>IvupsD)+GP|)auUiC7Q4Oo}7Jyr^OLyZQ&4@6+oce^JH56es1yx?P
zqBx_)2W`Azuq_D(w?Y{)t5?wtd4&+@*adW6&l--Bk1$ib3h8^p979h*+^rF&(KAS=
z)DAjo+L#XdLM#*lVOo-XLMXudLn~>K7i5kPbAq4c1%(eOL5VIr46$aTw9*-CDcB-^
z5hmlhmcntlT+WyC`%Jrs6J(iih@2?01i?B3h70nn;VdsQ#IOTx&2lx<pgl&=ZT7hl
zhA5qOLAOe@hEoU=2^g0L7AN?4&!r+zRcD9ldI{~g&HcnmLGNveo#cRpxlZhueKy3+
z{n&7q7mXoUT5I*$*(pyE<Zu@21m+N7LdlesF<sNin0N4_G+pw>Qld5nu4yMtGh5uK
zjv@;!60hmUQ~))@<E`^F6_(%_aB+kYc~M|_KP&P{kyk`P2?SU^pz!=OR3({!fD7gZ
zHj$Pdm<v=@m4xBAz<@Xri!el#Pty>w4G;<k{A`#H0X6^t&xU0vve+LI#qMrDM3OM2
zi>!~Cu+Iyiw|+WtkqHS$DMkuFayk$SLso=PX2SyEmHpjmHtd&zlE@<zlt7WK-PXw2
z0oj?Xo+?BbB`HMg0)Yq$kdG*Z*>I3BlEJVf$`~RTW@rSJv}x;rWQwMP9?V%r4@3W}
zCTeC)TQw1hxqs$(A{y<m&9s&!6HaGq6P;*|h6FhjVnv_eB|ecs+>L7v+2w)4QQCle
z3%#sHPvxfqpm!`H4D|8=Bc?E{-6qU)b7-12m%)T|mMocuIcD0;0UI~=kS&=*9&&e*
z?|}Z<#m_BA{#WsZ(83HbdN8T89OJpec@=4TW4QnB+0@*O>Q#i3lIV3ywV3>rsyQ|Y
zwM}YuOH0>PikjD$h&3itpPjoTjGX2x%eQPSuU)!y>FZLYyyb=c@?FP4{@T+g%5y*5
z`{1)Xx6K#cj$O}9Ug=x0a-etJudRENKpbeD7>>52p1HC8(#a*2%PyoQmi(OGJbLl3
zGY6>yyI(r-_?NwQ!>zy1*1ctHS$M9Uk+$9HIypIcYU0cnpI$Na^OX-(-YDC>>+Fs-
z<Cjxo;@ZXUeH-8T^+XVjEMI)`4C7yLVf;pYW6e<W+Lt#Tr=Qq=v9{u?1N-QzvG)_@
znXCDy*7U1~bBA-+w0Td~{@GMLzN(*egXrj^-#zf+zK2H|ADIlivAuS1&-lkRdluFl
z*>P-eQ5^`rTXy8a`mxK^>EW9A(b2K*Uv2*&5xO7g6{GQWyLTPCekjf*4>p}12JZ|V
z`VE;sElM%ZpWj>e<IswGPHi52a~~}G<Gx!rKi~Aq@AE(G`l!Jla51?w@5ZS_T2-lf
Y(qG`+qU8Bz!(OjRG`Gb@nzlUm4-~PACjbBd

literal 0
HcmV?d00001

diff --git a/src/common/Flex.tsx b/src/common/Flex.tsx
index db07d5d0..9bf8c31a 100644
--- a/src/common/Flex.tsx
+++ b/src/common/Flex.tsx
@@ -23,8 +23,8 @@ export const Flex: FC<FlexProps> = props =>
 
         if(column)
         {
-            if(reverse) newClassNames.push('flex-column-reverse');
-            else newClassNames.push('flex-column');
+            if(reverse) newClassNames.push('flex-col-reverse');
+            else newClassNames.push('flex-col');
         }
         else
         {
diff --git a/src/common/InfiniteGrid.tsx b/src/common/InfiniteGrid.tsx
deleted file mode 100644
index 7cd24771..00000000
--- a/src/common/InfiniteGrid.tsx
+++ /dev/null
@@ -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>
-    );
-}
diff --git a/src/common/index.ts b/src/common/index.ts
index 4fdb8ff8..a2c1a090 100644
--- a/src/common/index.ts
+++ b/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';
diff --git a/src/components/achievements/views/AchievementDetailsView.tsx b/src/components/achievements/views/AchievementDetailsView.tsx
index c7eb3082..3037ae84 100644
--- a/src/components/achievements/views/AchievementDetailsView.tsx
+++ b/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">
diff --git a/src/components/avatar-editor/AvatarEditorFigurePreviewView.tsx b/src/components/avatar-editor/AvatarEditorFigurePreviewView.tsx
index 0c0c0090..f856c3c1 100644
--- a/src/components/avatar-editor/AvatarEditorFigurePreviewView.tsx
+++ b/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" />
diff --git a/src/components/avatar-editor/AvatarEditorModelView.tsx b/src/components/avatar-editor/AvatarEditorModelView.tsx
index 0575d995..8315ba4e 100644
--- a/src/components/avatar-editor/AvatarEditorModelView.tsx
+++ b/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) &&
diff --git a/src/components/avatar-editor/AvatarEditorView.tsx b/src/components/avatar-editor/AvatarEditorView.tsx
index 727c0114..b2bc82c1 100644
--- a/src/components/avatar-editor/AvatarEditorView.tsx
+++ b/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" />
diff --git a/src/components/camera/views/CameraWidgetCheckoutView.tsx b/src/components/camera/views/CameraWidgetCheckoutView.tsx
index 7aceb073..7cd58ba3 100644
--- a/src/components/camera/views/CameraWidgetCheckoutView.tsx
+++ b/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>
diff --git a/src/components/campaign/CalendarView.tsx b/src/components/campaign/CalendarView.tsx
index 7aa1239f..5a649e01 100644
--- a/src/components/campaign/CalendarView.tsx
+++ b/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>
diff --git a/src/components/catalog/views/gift/CatalogGiftView.tsx b/src/components/catalog/views/gift/CatalogGiftView.tsx
index 64d30ece..283689f8 100644
--- a/src/components/catalog/views/gift/CatalogGiftView.tsx
+++ b/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() ]) }
diff --git a/src/components/catalog/views/page/layout/CatalogLayoutColorGroupingView.tsx b/src/components/catalog/views/page/layout/CatalogLayoutColorGroupingView.tsx
index 156cd994..cbb2c4f7 100644
--- a/src/components/catalog/views/page/layout/CatalogLayoutColorGroupingView.tsx
+++ b/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" />
diff --git a/src/components/catalog/views/page/layout/CatalogLayoutDefaultView.tsx b/src/components/catalog/views/page/layout/CatalogLayoutDefaultView.tsx
index 24ad7edc..3198acf6 100644
--- a/src/components/catalog/views/page/layout/CatalogLayoutDefaultView.tsx
+++ b/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" />
diff --git a/src/components/catalog/views/page/layout/CatalogLayoutInfoLoyaltyView.tsx b/src/components/catalog/views/page/layout/CatalogLayoutInfoLoyaltyView.tsx
index ff948819..82342c8c 100644
--- a/src/components/catalog/views/page/layout/CatalogLayoutInfoLoyaltyView.tsx
+++ b/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>
diff --git a/src/components/catalog/views/page/layout/CatalogLayoutRoomAdsView.tsx b/src/components/catalog/views/page/layout/CatalogLayoutRoomAdsView.tsx
index a99238aa..9e6a7141 100644
--- a/src/components/catalog/views/page/layout/CatalogLayoutRoomAdsView.tsx
+++ b/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>
diff --git a/src/components/catalog/views/page/layout/CatalogLayoutRoomBundleView.tsx b/src/components/catalog/views/page/layout/CatalogLayoutRoomBundleView.tsx
index 81de0fec..8264b15c 100644
--- a/src/components/catalog/views/page/layout/CatalogLayoutRoomBundleView.tsx
+++ b/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>
diff --git a/src/components/catalog/views/page/layout/CatalogLayoutSingleBundleView.tsx b/src/components/catalog/views/page/layout/CatalogLayoutSingleBundleView.tsx
index 44cd2efc..27ca4fe7 100644
--- a/src/components/catalog/views/page/layout/CatalogLayoutSingleBundleView.tsx
+++ b/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>
diff --git a/src/components/catalog/views/page/layout/CatalogLayoutSoundMachineView.tsx b/src/components/catalog/views/page/layout/CatalogLayoutSoundMachineView.tsx
index 31ef8aa7..35db8957 100644
--- a/src/components/catalog/views/page/layout/CatalogLayoutSoundMachineView.tsx
+++ b/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" />
diff --git a/src/components/catalog/views/page/layout/CatalogLayoutVipBuyView.tsx b/src/components/catalog/views/page/layout/CatalogLayoutVipBuyView.tsx
index 2363408e..7262343f 100644
--- a/src/components/catalog/views/page/layout/CatalogLayoutVipBuyView.tsx
+++ b/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>
diff --git a/src/components/catalog/views/page/layout/marketplace/CatalogLayoutMarketplaceItemView.tsx b/src/components/catalog/views/page/layout/marketplace/CatalogLayoutMarketplaceItemView.tsx
index 834d2052..bfbe51e1 100644
--- a/src/components/catalog/views/page/layout/marketplace/CatalogLayoutMarketplaceItemView.tsx
+++ b/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') }
diff --git a/src/components/catalog/views/page/layout/marketplace/CatalogLayoutMarketplaceSearchFormView.tsx b/src/components/catalog/views/page/layout/marketplace/CatalogLayoutMarketplaceSearchFormView.tsx
index 4eb82b3f..34bf3fb7 100644
--- a/src/components/catalog/views/page/layout/marketplace/CatalogLayoutMarketplaceSearchFormView.tsx
+++ b/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)) }>
diff --git a/src/components/floorplan-editor/views/FloorplanOptionsView.tsx b/src/components/floorplan-editor/views/FloorplanOptionsView.tsx
index 4a681ca7..9fa1f719 100644
--- a/src/components/floorplan-editor/views/FloorplanOptionsView.tsx
+++ b/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>
diff --git a/src/components/friends/views/friends-list/FriendsListSearchView.tsx b/src/components/friends/views/friends-list/FriendsListSearchView.tsx
index bcc1b217..9a102612 100644
--- a/src/components/friends/views/friends-list/FriendsListSearchView.tsx
+++ b/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) &&
diff --git a/src/components/friends/views/messenger/FriendsMessengerView.tsx b/src/components/friends/views/messenger/FriendsMessengerView.tsx
index df9de6ca..beadd214 100644
--- a/src/components/friends/views/messenger/FriendsMessengerView.tsx
+++ b/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 (
diff --git a/src/components/groups/views/GroupInformationView.tsx b/src/components/groups/views/GroupInformationView.tsx
index d873d4df..1e76d229 100644
--- a/src/components/groups/views/GroupInformationView.tsx
+++ b/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-column overflow-hidden">
-                    <div className="flex flex-column gap-1">
+            <div className="flex flex-col justify-content-between overflow-auto col-9">
+                <div className="flex flex-col overflow-hidden">
+                    <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-column gap-1">
+                <div className="flex flex-col">
+                    <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>
diff --git a/src/components/groups/views/GroupMembersView.tsx b/src/components/groups/views/GroupMembersView.tsx
index b45b20d3..46e1a531 100644
--- a/src/components/groups/views/GroupMembersView.tsx
+++ b/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) } />
diff --git a/src/components/groups/views/GroupRoomInformationView.tsx b/src/components/groups/views/GroupRoomInformationView.tsx
index 6db25130..2fb65176 100644
--- a/src/components/groups/views/GroupRoomInformationView.tsx
+++ b/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" /> }
diff --git a/src/components/groups/views/tabs/GroupTabCreatorConfirmationView.tsx b/src/components/groups/views/tabs/GroupTabCreatorConfirmationView.tsx
index 11349976..dc3c39e0 100644
--- a/src/components/groups/views/tabs/GroupTabCreatorConfirmationView.tsx
+++ b/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-column gap-1">
+                <div className="flex flex-col">
+                    <div className="flex flex-col gap-1">
                         <Text bold>{ groupData.groupName }</Text>
                         <Text>{ groupData.groupDescription }</Text>
                     </div>
diff --git a/src/components/groups/views/tabs/GroupTabIdentityView.tsx b/src/components/groups/views/tabs/GroupTabIdentityView.tsx
index 72aac18d..23b6e24f 100644
--- a/src/components/groups/views/tabs/GroupTabIdentityView.tsx
+++ b/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) } />
diff --git a/src/components/groups/views/tabs/GroupTabSettingsView.tsx b/src/components/groups/views/tabs/GroupTabSettingsView.tsx
index 1917aecc..58b36b65 100644
--- a/src/components/groups/views/tabs/GroupTabSettingsView.tsx
+++ b/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-column">
+        <div className="flex flex-col overflow-auto">
+            <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>
diff --git a/src/components/guide-tool/views/GuideToolAcceptView.tsx b/src/components/guide-tool/views/GuideToolAcceptView.tsx
index f497b771..74405760 100644
--- a/src/components/guide-tool/views/GuideToolAcceptView.tsx
+++ b/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-column gap-0 bg-muted p-2 rounded">
+        <div className="flex flex-col">
+            <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>
diff --git a/src/components/guide-tool/views/GuideToolMenuView.tsx b/src/components/guide-tool/views/GuideToolMenuView.tsx
index f0d9765d..a520503a 100644
--- a/src/components/guide-tool/views/GuideToolMenuView.tsx
+++ b/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() ]) } } />
diff --git a/src/components/guide-tool/views/GuideToolOngoingView.tsx b/src/components/guide-tool/views/GuideToolOngoingView.tsx
index 56a59644..276971aa 100644
--- a/src/components/guide-tool/views/GuideToolOngoingView.tsx
+++ b/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 }>
diff --git a/src/components/guide-tool/views/GuideToolUserCreateRequestView.tsx b/src/components/guide-tool/views/GuideToolUserCreateRequestView.tsx
index 9e1c209d..4f76317e 100644
--- a/src/components/guide-tool/views/GuideToolUserCreateRequestView.tsx
+++ b/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>
diff --git a/src/components/guide-tool/views/GuideToolUserFeedbackView.tsx b/src/components/guide-tool/views/GuideToolUserFeedbackView.tsx
index 6dc2ade1..e76b669b 100644
--- a/src/components/guide-tool/views/GuideToolUserFeedbackView.tsx
+++ b/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>
diff --git a/src/components/guide-tool/views/GuideToolUserNoHelpersView.tsx b/src/components/guide-tool/views/GuideToolUserNoHelpersView.tsx
index 032c794c..9469e783 100644
--- a/src/components/guide-tool/views/GuideToolUserNoHelpersView.tsx
+++ b/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>
diff --git a/src/components/guide-tool/views/GuideToolUserPendingView.tsx b/src/components/guide-tool/views/GuideToolUserPendingView.tsx
index a4a8fd4f..d897ced9 100644
--- a/src/components/guide-tool/views/GuideToolUserPendingView.tsx
+++ b/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>
diff --git a/src/components/guide-tool/views/GuideToolUserSomethingWrogView.tsx b/src/components/guide-tool/views/GuideToolUserSomethingWrogView.tsx
index 1c2d5c81..69433790 100644
--- a/src/components/guide-tool/views/GuideToolUserSomethingWrogView.tsx
+++ b/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>
     );
diff --git a/src/components/guide-tool/views/GuideToolUserThanksView.tsx b/src/components/guide-tool/views/GuideToolUserThanksView.tsx
index b8e398a0..cc749251 100644
--- a/src/components/guide-tool/views/GuideToolUserThanksView.tsx
+++ b/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>
diff --git a/src/components/hc-center/HcCenterView.tsx b/src/components/hc-center/HcCenterView.tsx
index 88793aed..b741f38d 100644
--- a/src/components/hc-center/HcCenterView.tsx
+++ b/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">
diff --git a/src/components/help/views/DescribeReportView.tsx b/src/components/help/views/DescribeReportView.tsx
index e517e672..2b7324db 100644
--- a/src/components/help/views/DescribeReportView.tsx
+++ b/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>
diff --git a/src/components/help/views/HelpIndexView.tsx b/src/components/help/views/HelpIndexView.tsx
index 3dd74385..4a7201a7 100644
--- a/src/components/help/views/HelpIndexView.tsx
+++ b/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>
diff --git a/src/components/help/views/ReportSummaryView.tsx b/src/components/help/views/ReportSummaryView.tsx
index 74914cc1..e93b86d0 100644
--- a/src/components/help/views/ReportSummaryView.tsx
+++ b/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>
diff --git a/src/components/help/views/SelectReportedChatsView.tsx b/src/components/help/views/SelectReportedChatsView.tsx
index 2702a8a1..03f11570 100644
--- a/src/components/help/views/SelectReportedChatsView.tsx
+++ b/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>
diff --git a/src/components/help/views/SelectReportedUserView.tsx b/src/components/help/views/SelectReportedUserView.tsx
index 258f604d..b5b0fc4d 100644
--- a/src/components/help/views/SelectReportedUserView.tsx
+++ b/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> }
diff --git a/src/components/help/views/SelectTopicView.tsx b/src/components/help/views/SelectTopicView.tsx
index 88fc54e0..a80def59 100644
--- a/src/components/help/views/SelectTopicView.tsx
+++ b/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>
diff --git a/src/components/help/views/name-change/NameChangeConfirmationView.tsx b/src/components/help/views/name-change/NameChangeConfirmationView.tsx
index ab1ada20..64d1925d 100644
--- a/src/components/help/views/name-change/NameChangeConfirmationView.tsx
+++ b/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>
diff --git a/src/components/help/views/name-change/NameChangeInitView.tsx b/src/components/help/views/name-change/NameChangeInitView.tsx
index 42666704..82f78f57 100644
--- a/src/components/help/views/name-change/NameChangeInitView.tsx
+++ b/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">
diff --git a/src/components/help/views/name-change/NameChangeInputView.tsx b/src/components/help/views/name-change/NameChangeInputView.tsx
index 51501d23..2aa342f9 100644
--- a/src/components/help/views/name-change/NameChangeInputView.tsx
+++ b/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">
diff --git a/src/components/hotel-view/HotelView.tsx b/src/components/hotel-view/HotelView.tsx
index 44f83290..2afc0c13 100644
--- a/src/components/hotel-view/HotelView.tsx
+++ b/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'] }
diff --git a/src/components/hotel-view/views/widgets/promo-article/PromoArticleWidgetView.tsx b/src/components/hotel-view/views/widgets/promo-article/PromoArticleWidgetView.tsx
index 15a38bef..0149bbfb 100644
--- a/src/components/hotel-view/views/widgets/promo-article/PromoArticleWidgetView.tsx
+++ b/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>
diff --git a/src/components/hotel-view/views/widgets/widget-container/WidgetContainerView.tsx b/src/components/hotel-view/views/widgets/widget-container/WidgetContainerView.tsx
index 199309be..24093344 100644
--- a/src/components/hotel-view/views/widgets/widget-container/WidgetContainerView.tsx
+++ b/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>
diff --git a/src/components/inventory/InventoryView.tsx b/src/components/inventory/InventoryView.tsx
index b01fa960..e11918e2 100644
--- a/src/components/inventory/InventoryView.tsx
+++ b/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' } >
-            <NitroCardHeaderView headerText={ LocalizeText('inventory.title') } onCloseClick={ onClose } />
+        <NitroCard
+            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>
-                    <NitroCardContentView>
+                    </NitroCard.Tabs>
+                    <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> }
-        </NitroCardView>
+                </NitroCard.Content> }
+        </NitroCard>
     );
 }
diff --git a/src/components/inventory/views/furniture/InventoryFurnitureView.tsx b/src/components/inventory/views/furniture/InventoryFurnitureView.tsx
index 904200ee..8b9385db 100644
--- a/src/components/inventory/views/furniture/InventoryFurnitureView.tsx
+++ b/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>
-            <Column overflow="hidden" size={ 7 }>
+        <div className="grid grid-cols-12 gap-2">
+            <div className="flex flex-col col-span-7 overflow-hidden">
                 <InventoryFurnitureSearchView groupItems={ groupItems } setGroupItems={ setFilteredGroupItems } />
-                <AutoGrid columnCount={ 5 }>
-                    { filteredGroupItems && (filteredGroupItems.length > 0) && filteredGroupItems.map((item, index) => <InventoryFurnitureItemView key={ index } groupItem={ item } />) }
-                </AutoGrid>
-            </Column>
-            <Column overflow="auto" size={ 5 }>
-                <Column overflow="hidden" position="relative">
+                <InfiniteGrid<GroupItem>
+                    columnCount={ 5 }
+                    itemRender={ item => <InventoryFurnitureItemView groupItem={ item } /> }
+                    items={ filteredGroupItems } />
+            </div>
+            <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">
-                        <Text grow truncate>{ selectedItem.name }</Text>
-                        <div className="flex flex-column gap-1">
+                    <div className="flex flex-col justify-between gap-2 grow">
+                        <span className="truncate grow">{ selectedItem.name }</span>
+                        <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> }
-            </Column>
-        </Grid>
+                    </div> }
+            </div>
+        </div>
     );
 }
diff --git a/src/components/mod-tools/views/room/ModToolsRoomView.tsx b/src/components/mod-tools/views/room/ModToolsRoomView.tsx
index 96e358cf..04092a18 100644
--- a/src/components/mod-tools/views/room/ModToolsRoomView.tsx
+++ b/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>
diff --git a/src/components/mod-tools/views/user/ModToolsUserModActionView.tsx b/src/components/mod-tools/views/user/ModToolsUserModActionView.tsx
index 4502cc2e..95073e96 100644
--- a/src/components/mod-tools/views/user/ModToolsUserModActionView.tsx
+++ b/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>
diff --git a/src/components/navigator/NavigatorView.tsx b/src/components/navigator/NavigatorView.tsx
index c21118d5..add70bc1 100644
--- a/src/components/navigator/NavigatorView.tsx
+++ b/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
-                    className="w-navigator h-navigator"
+                <NitroCard
+                    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>
-                    </NitroCardTabs.Main>
-                    <NitroCard.Content>
-                        { isLoading &&
-                            <div className="top-0 position-absolute size-full start-0 z-index-1 bg-muted opacity-0-5" /> }
+                        </NitroCard.TabItem>
+                    </NitroCard.Tabs>
+                    <NitroCard.Content isLoading={ isLoading }>
                         { !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) } /> }
diff --git a/src/components/navigator/views/NavigatorDoorStateView.tsx b/src/components/navigator/views/NavigatorDoorStateView.tsx
index 0ab9fb93..39189d35 100644
--- a/src/components/navigator/views/NavigatorDoorStateView.tsx
+++ b/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>
diff --git a/src/components/navigator/views/NavigatorRoomCreatorView.tsx b/src/components/navigator/views/NavigatorRoomCreatorView.tsx
index 6b874248..f5ac47fc 100644
--- a/src/components/navigator/views/NavigatorRoomCreatorView.tsx
+++ b/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-column gap-1">
+                <div className="flex flex-col gap-1 overflow-auto col-6">
+                    <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 )=>
                         {
diff --git a/src/components/navigator/views/NavigatorRoomInfoView.tsx b/src/components/navigator/views/NavigatorRoomInfoView.tsx
index a516b517..d9548f3b 100644
--- a/src/components/navigator/views/NavigatorRoomInfoView.tsx
+++ b/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') }
diff --git a/src/components/navigator/views/NavigatorRoomLinkView.tsx b/src/components/navigator/views/NavigatorRoomLinkView.tsx
index 761f58cb..d36ed92f 100644
--- a/src/components/navigator/views/NavigatorRoomLinkView.tsx
+++ b/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', '')) } />
diff --git a/src/components/navigator/views/room-settings/NavigatorRoomSettingsAccessTabView.tsx b/src/components/navigator/views/room-settings/NavigatorRoomSettingsAccessTabView.tsx
index 8e1e5bcc..c3ed67b2 100644
--- a/src/components/navigator/views/room-settings/NavigatorRoomSettingsAccessTabView.tsx
+++ b/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) } />
diff --git a/src/components/navigator/views/room-settings/NavigatorRoomSettingsModTabView.tsx b/src/components/navigator/views/room-settings/NavigatorRoomSettingsModTabView.tsx
index 38fdb6eb..eabd89e5 100644
--- a/src/components/navigator/views/room-settings/NavigatorRoomSettingsModTabView.tsx
+++ b/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) }>
diff --git a/src/components/navigator/views/room-settings/NavigatorRoomSettingsVipChatTabView.tsx b/src/components/navigator/views/room-settings/NavigatorRoomSettingsVipChatTabView.tsx
index a550bdb7..563cc55d 100644
--- a/src/components/navigator/views/room-settings/NavigatorRoomSettingsVipChatTabView.tsx
+++ b/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>
diff --git a/src/components/navigator/views/search/NavigatorSearchResultItemInfoView.tsx b/src/components/navigator/views/search/NavigatorSearchResultItemInfoView.tsx
index 0a4c7cc5..955e6c1b 100644
--- a/src/components/navigator/views/search/NavigatorSearchResultItemInfoView.tsx
+++ b/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;
-}
-
-export const NavigatorSearchResultItemInfoView: FC<NavigatorSearchResultItemInfoViewProps> = props =>
+}> = 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>
diff --git a/src/components/navigator/views/search/NavigatorSearchResultItemView.tsx b/src/components/navigator/views/search/NavigatorSearchResultItemView.tsx
index d23f49ce..edd786ad 100644
--- a/src/components/navigator/views/search/NavigatorSearchResultItemView.tsx
+++ b/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 }>
-            <LayoutRoomThumbnailView className="flex flex-column items-center justify-content-end mb-1" customUrl={ roomData.officialRoomPicRef } roomId={ roomData.roomId }>
+        <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-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" />
diff --git a/src/components/navigator/views/search/NavigatorSearchResultView.tsx b/src/components/navigator/views/search/NavigatorSearchResultView.tsx
index 6585292f..5da440f2 100644
--- a/src/components/navigator/views/search/NavigatorSearchResultView.tsx
+++ b/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>
diff --git a/src/components/navigator/views/search/NavigatorSearchView.tsx b/src/components/navigator/views/search/NavigatorSearchView.tsx
index e395b9c0..e26c0c25 100644
--- a/src/components/navigator/views/search/NavigatorSearchView.tsx
+++ b/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;
-}
-
-export const NavigatorSearchView: FC<NavigatorSearchViewProps> = props =>
+}> = 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">
-            <Flex shrink>
-                <select className="form-select form-select-sm" value={ searchFilterIndex } onChange={ event => setSearchFilterIndex(parseInt(event.target.value)) }>
+        <div className="flex w-full gap-1">
+            <div className="flex shrink-0">
+                <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 className="flex w-100 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) } />
+            </div>
+            <div className="flex w-full gap-1">
+                <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>
diff --git a/src/components/notification-center/NotificationCenterView.tsx b/src/components/notification-center/NotificationCenterView.tsx
index b3f07317..850e0ba7 100644
--- a/src/components/notification-center/NotificationCenterView.tsx
+++ b/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 }
diff --git a/src/components/notification-center/views/alert-layouts/NotificationDefaultAlertView.tsx b/src/components/notification-center/views/alert-layouts/NotificationDefaultAlertView.tsx
index b7d62ae0..5c04b284 100644
--- a/src/components/notification-center/views/alert-layouts/NotificationDefaultAlertView.tsx
+++ b/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 />');
diff --git a/src/components/notification-center/views/bubble-layouts/NotificationClubGiftBubbleView.tsx b/src/components/notification-center/views/bubble-layouts/NotificationClubGiftBubbleView.tsx
index ba29fa06..efce8dad 100644
--- a/src/components/notification-center/views/bubble-layouts/NotificationClubGiftBubbleView.tsx
+++ b/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>
diff --git a/src/components/room/widgets/avatar-info/AvatarInfoRentableBotChatView.tsx b/src/components/room/widgets/avatar-info/AvatarInfoRentableBotChatView.tsx
index 558ca55c..1027872d 100644
--- a/src/components/room/widgets/avatar-info/AvatarInfoRentableBotChatView.tsx
+++ b/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) } />
diff --git a/src/components/room/widgets/avatar-info/AvatarInfoUseProductConfirmView.tsx b/src/components/room/widgets/avatar-info/AvatarInfoUseProductConfirmView.tsx
index a45566a4..b3407f0b 100644
--- a/src/components/room/widgets/avatar-info/AvatarInfoUseProductConfirmView.tsx
+++ b/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>
diff --git a/src/components/room/widgets/avatar-info/infostand/InfoStandWidgetBotView.tsx b/src/components/room/widgets/avatar-info/infostand/InfoStandWidgetBotView.tsx
index 8b2435fa..8034144f 100644
--- a/src/components/room/widgets/avatar-info/infostand/InfoStandWidgetBotView.tsx
+++ b/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) ]) }
diff --git a/src/components/room/widgets/avatar-info/infostand/InfoStandWidgetFurniView.tsx b/src/components/room/widgets/avatar-info/infostand/InfoStandWidgetFurniView.tsx
index 471c478a..b4616204 100644
--- a/src/components/room/widgets/avatar-info/infostand/InfoStandWidgetFurniView.tsx
+++ b/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 (
diff --git a/src/components/room/widgets/avatar-info/infostand/InfoStandWidgetPetView.tsx b/src/components/room/widgets/avatar-info/infostand/InfoStandWidgetPetView.tsx
index 21fa5ca5..1668fdad 100644
--- a/src/components/room/widgets/avatar-info/infostand/InfoStandWidgetPetView.tsx
+++ b/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">
diff --git a/src/components/room/widgets/avatar-info/infostand/InfoStandWidgetRentableBotView.tsx b/src/components/room/widgets/avatar-info/infostand/InfoStandWidgetRentableBotView.tsx
index 3771cfec..7c32a214 100644
--- a/src/components/room/widgets/avatar-info/infostand/InfoStandWidgetRentableBotView.tsx
+++ b/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-column nitro-infostand rounded">
-                <div className="flex flex-column gap-1 overflow-visible container-fluid content-area">
-                    <div className="flex flex-column gap-1">
+        <div className="flex flex-col gap-1">
+            <div className="flex flex-col nitro-infostand rounded">
+                <div className="flex flex-col gap-1 overflow-visible container-fluid content-area">
+                    <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">
diff --git a/src/components/room/widgets/avatar-info/infostand/InfoStandWidgetUserView.tsx b/src/components/room/widgets/avatar-info/infostand/InfoStandWidgetUserView.tsx
index 75a28c19..4935b972 100644
--- a/src/components/room/widgets/avatar-info/infostand/InfoStandWidgetUserView.tsx
+++ b/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') &&
diff --git a/src/components/room/widgets/friend-request/FriendRequestDialogView.tsx b/src/components/room/widgets/friend-request/FriendRequestDialogView.tsx
index 951ae199..c6d9113b 100644
--- a/src/components/room/widgets/friend-request/FriendRequestDialogView.tsx
+++ b/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) } />
diff --git a/src/components/room/widgets/furniture/FurnitureBackgroundColorView.tsx b/src/components/room/widgets/furniture/FurnitureBackgroundColorView.tsx
index 510a428a..e8d44802 100644
--- a/src/components/room/widgets/furniture/FurnitureBackgroundColorView.tsx
+++ b/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>
diff --git a/src/components/room/widgets/furniture/FurnitureCraftingView.tsx b/src/components/room/widgets/furniture/FurnitureCraftingView.tsx
index 8b091d57..41d32f4b 100644
--- a/src/components/room/widgets/furniture/FurnitureCraftingView.tsx
+++ b/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-column h-100 bg-muted rounded gap-2">
+                            <div className="flex flex-col h-100 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 flex-column h-100">
+                                    <div className="flex items-center justify-center flex-col h-100 pb-1 gap-1">
+                                        <div className="flex flex-col h-100">
                                             <img src={ selectedRecipe.iconUrl } />
                                         </div>
                                         <div className="text-black">{ selectedRecipe.localizedName }</div>
diff --git a/src/components/room/widgets/furniture/FurnitureDimmerView.tsx b/src/components/room/widgets/furniture/FurnitureDimmerView.tsx
index f83cde15..56712f23 100644
--- a/src/components/room/widgets/furniture/FurnitureDimmerView.tsx
+++ b/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"
diff --git a/src/components/room/widgets/furniture/FurnitureExchangeCreditView.tsx b/src/components/room/widgets/furniture/FurnitureExchangeCreditView.tsx
index b9cad22b..090db3bf 100644
--- a/src/components/room/widgets/furniture/FurnitureExchangeCreditView.tsx
+++ b/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>
diff --git a/src/components/room/widgets/furniture/FurnitureFriendFurniView.tsx b/src/components/room/widgets/furniture/FurnitureFriendFurniView.tsx
index 7915d445..48cb8368 100644
--- a/src/components/room/widgets/furniture/FurnitureFriendFurniView.tsx
+++ b/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-column items-center gap-1 justify-center">
+                    <div className="flex flex-col mt-1 justify-content-between">
+                        <div className="flex flex-col items-center gap-1 justify-center">
                             <div>
                                 { (type === 0) && LocalizeText('lovelock.engraving.caption') }
                                 { (type === 3) && LocalizeText('wildwest.engraving.caption') }
diff --git a/src/components/room/widgets/furniture/FurnitureHighScoreView.tsx b/src/components/room/widgets/furniture/FurnitureHighScoreView.tsx
index 560ea83b..8d26f68f 100644
--- a/src/components/room/widgets/furniture/FurnitureHighScoreView.tsx
+++ b/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') }
diff --git a/src/components/room/widgets/furniture/FurnitureMannequinView.tsx b/src/components/room/widgets/furniture/FurnitureMannequinView.tsx
index 251e79ac..36d95865 100644
--- a/src/components/room/widgets/furniture/FurnitureMannequinView.tsx
+++ b/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>
diff --git a/src/components/room/widgets/furniture/FurnitureMysteryTrophyOpenDialogView.tsx b/src/components/room/widgets/furniture/FurnitureMysteryTrophyOpenDialogView.tsx
index 3495beec..e60bcde9 100644
--- a/src/components/room/widgets/furniture/FurnitureMysteryTrophyOpenDialogView.tsx
+++ b/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>
diff --git a/src/components/room/widgets/furniture/FurnitureStackHeightView.tsx b/src/components/room/widgets/furniture/FurnitureStackHeightView.tsx
index 336edeb1..5a315d44 100644
--- a/src/components/room/widgets/furniture/FurnitureStackHeightView.tsx
+++ b/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>
diff --git a/src/components/room/widgets/furniture/FurnitureYoutubeDisplayView.tsx b/src/components/room/widgets/furniture/FurnitureYoutubeDisplayView.tsx
index 57a22f33..b81d7c92 100644
--- a/src/components/room/widgets/furniture/FurnitureYoutubeDisplayView.tsx
+++ b/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 } />
diff --git a/src/components/room/widgets/furniture/context-menu/MonsterPlantSeedConfirmView.tsx b/src/components/room/widgets/furniture/context-menu/MonsterPlantSeedConfirmView.tsx
index cf9f9ffd..a5e28137 100644
--- a/src/components/room/widgets/furniture/context-menu/MonsterPlantSeedConfirmView.tsx
+++ b/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>
diff --git a/src/components/room/widgets/furniture/context-menu/PurchasableClothingConfirmView.tsx b/src/components/room/widgets/furniture/context-menu/PurchasableClothingConfirmView.tsx
index 7de7ec20..69900f2a 100644
--- a/src/components/room/widgets/furniture/context-menu/PurchasableClothingConfirmView.tsx
+++ b/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>
diff --git a/src/components/room/widgets/furniture/playlist-editor/FurniturePlaylistEditorWidgetView.tsx b/src/components/room/widgets/furniture/playlist-editor/FurniturePlaylistEditorWidgetView.tsx
index 97f5ea39..e33bdc4b 100644
--- a/src/components/room/widgets/furniture/playlist-editor/FurniturePlaylistEditorWidgetView.tsx
+++ b/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>
diff --git a/src/components/room/widgets/furniture/playlist-editor/SongPlaylistView.tsx b/src/components/room/widgets/furniture/playlist-editor/SongPlaylistView.tsx
index e4362488..1fe28121 100644
--- a/src/components/room/widgets/furniture/playlist-editor/SongPlaylistView.tsx
+++ b/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 }
diff --git a/src/components/room/widgets/mysterybox/MysteryBoxExtensionView.tsx b/src/components/room/widgets/mysterybox/MysteryBoxExtensionView.tsx
index b1d4ad80..9ef10053 100644
--- a/src/components/room/widgets/mysterybox/MysteryBoxExtensionView.tsx
+++ b/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" /> }
diff --git a/src/components/room/widgets/pet-package/PetPackageWidgetView.tsx b/src/components/room/widgets/pet-package/PetPackageWidgetView.tsx
index 800aec37..7b5bdba0 100644
--- a/src/components/room/widgets/pet-package/PetPackageWidgetView.tsx
+++ b/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>
diff --git a/src/components/room/widgets/room-promotes/RoomPromotesWidgetView.tsx b/src/components/room/widgets/room-promotes/RoomPromotesWidgetView.tsx
index 7c9e631d..2be27ea2 100644
--- a/src/components/room/widgets/room-promotes/RoomPromotesWidgetView.tsx
+++ b/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" /> }
diff --git a/src/components/room/widgets/room-promotes/views/RoomPromoteEditWidgetView.tsx b/src/components/room/widgets/room-promotes/views/RoomPromoteEditWidgetView.tsx
index 8698b6ec..9d41ac60 100644
--- a/src/components/room/widgets/room-promotes/views/RoomPromoteEditWidgetView.tsx
+++ b/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>
diff --git a/src/components/room/widgets/room-tools/RoomToolsWidgetView.tsx b/src/components/room/widgets/room-tools/RoomToolsWidgetView.tsx
index 5ebc803e..d245312c 100644
--- a/src/components/room/widgets/room-tools/RoomToolsWidgetView.tsx
+++ b/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-column nitro-room-tools-info rounded py-2 px-3">
-                            <div className="flex flex-column gap-1">
+                    <div className="flex flex-col justify-center items-center">
+                        <div className="flex flex-col nitro-room-tools-info rounded py-2 px-3">
+                            <div className="flex flex-col gap-1">
                                 <Text wrap fontSize={ 4 } variant="white">{ roomName }</Text>
                                 <Text fontSize={ 5 } variant="muted">{ roomOwner }</Text>
                             </div>
diff --git a/src/components/room/widgets/word-quiz/WordQuizQuestionView.tsx b/src/components/room/widgets/word-quiz/WordQuizQuestionView.tsx
index 5f54d49f..3c30b067 100644
--- a/src/components/room/widgets/word-quiz/WordQuizQuestionView.tsx
+++ b/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) }>
diff --git a/src/components/user-profile/views/FriendsContainerView.tsx b/src/components/user-profile/views/FriendsContainerView.tsx
index 315385c1..23dd7eee 100644
--- a/src/components/user-profile/views/FriendsContainerView.tsx
+++ b/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>
diff --git a/src/components/user-profile/views/RelationshipsContainerView.tsx b/src/components/user-profile/views/RelationshipsContainerView.tsx
index 12ce0acb..5eade994 100644
--- a/src/components/user-profile/views/RelationshipsContainerView.tsx
+++ b/src/components/user-profile/views/RelationshipsContainerView.tsx
@@ -27,7 +27,7 @@ export const RelationshipsContainerView: FC<RelationshipsContainerViewProps> = p
                 <Flex center className="user-relationship">
                     <i className={ `nitro-friends-spritesheet icon-${ relationshipName }` } />
                 </Flex>
-                <div className="flex flex-column flex-grow-1 gap-0">
+                <div className="flex flex-col flex-grow-1 gap-0">
                     <Flex alignItems="center" className="bg-white rounded px-2 py-1 user-relationship" justifyContent="between">
                         <Text pointer small underline onClick={ event => (relationshipInfo && (relationshipInfo.randomFriendId >= 1) && GetUserProfile(relationshipInfo.randomFriendId)) }>
                             { (!relationshipInfo || (relationshipInfo.friendCount === 0)) &&
diff --git a/src/components/user-profile/views/UserContainerView.tsx b/src/components/user-profile/views/UserContainerView.tsx
index c3c94a1d..60c964c4 100644
--- a/src/components/user-profile/views/UserContainerView.tsx
+++ b/src/components/user-profile/views/UserContainerView.tsx
@@ -29,15 +29,15 @@ export const UserContainerView: FC<UserContainerViewProps> = props =>
 
     return (
         <div className="flex gap-2">
-            <div className="flex flex-column justify-center items-center avatar-container">
+            <div className="flex flex-col justify-center items-center avatar-container">
                 <LayoutAvatarImageView direction={ 2 } figure={ userProfile.figure } />
             </div>
-            <div className="flex flex-column">
-                <div className="flex flex-column gap-0">
+            <div className="flex flex-col">
+                <div className="flex flex-col gap-0">
                     <Text bold>{ userProfile.username }</Text>
                     <Text italics small textBreak>{ userProfile.motto }&nbsp;</Text>
                 </div>
-                <div className="flex flex-column gap-1">
+                <div className="flex flex-col gap-1">
                     <Text small>
                         <b>{ LocalizeText('extendedprofile.created') }</b> { userProfile.registration }
                     </Text>
diff --git a/src/components/user-settings/UserSettingsView.tsx b/src/components/user-settings/UserSettingsView.tsx
index 38f2d32f..c3b45238 100644
--- a/src/components/user-settings/UserSettingsView.tsx
+++ b/src/components/user-settings/UserSettingsView.tsx
@@ -129,7 +129,7 @@ export const UserSettingsView: FC<{}> = props =>
         <NitroCardView className="user-settings-window" theme="primary-slim" uniqueKey="user-settings">
             <NitroCardHeaderView headerText={ LocalizeText('widget.memenu.settings.title') } onCloseClick={ event => processAction('close_view') } />
             <NitroCardContentView className="text-black">
-                <div className="flex flex-column gap-1">
+                <div className="flex flex-col gap-1">
                     <div className="flex items-center gap-1">
                         <input checked={ userSettings.oldChat } className="form-check-input" type="checkbox" onChange={ event => processAction('oldchat', event.target.checked) } />
                         <Text>{ LocalizeText('memenu.settings.chat.prefer.old.chat') }</Text>
@@ -151,9 +151,9 @@ export const UserSettingsView: FC<{}> = props =>
                         <Text>{ LocalizeText('memenu.settings.other.skip.purchase.confirmation') }</Text>
                     </div>
                 </div>
-                <div className="flex flex-column">
+                <div className="flex flex-col">
                     <Text bold>{ LocalizeText('widget.memenu.settings.volume') }</Text>
-                    <div className="flex flex-column gap-1">
+                    <div className="flex flex-col gap-1">
                         <Text>{ LocalizeText('widget.memenu.settings.volume.ui') }</Text>
                         <div className="flex items-center gap-1">
                             { (userSettings.volumeSystem === 0) && <FaVolumeMute className={ classNames((userSettings.volumeSystem >= 50) && 'text-muted', 'fa-icon') } /> }
@@ -162,7 +162,7 @@ export const UserSettingsView: FC<{}> = props =>
                             <FaVolumeUp className={ classNames((userSettings.volumeSystem < 50) && 'text-muted', 'fa-icon') } />
                         </div>
                     </div>
-                    <div className="flex flex-column gap-1">
+                    <div className="flex flex-col gap-1">
                         <Text>{ LocalizeText('widget.memenu.settings.volume.furni') }</Text>
                         <div className="flex items-center gap-1">
                             { (userSettings.volumeFurni === 0) && <FaVolumeMute className={ classNames((userSettings.volumeFurni >= 50) && 'text-muted', 'fa-icon') } /> }
@@ -171,7 +171,7 @@ export const UserSettingsView: FC<{}> = props =>
                             <FaVolumeUp className={ classNames((userSettings.volumeFurni < 50) && 'text-muted', 'fa-icon') } />
                         </div>
                     </div>
-                    <div className="flex flex-column gap-1">
+                    <div className="flex flex-col gap-1">
                         <Text>{ LocalizeText('widget.memenu.settings.volume.trax') }</Text>
                         <div className="flex items-center gap-1">
                             { (userSettings.volumeTrax === 0) && <FaVolumeMute className={ classNames((userSettings.volumeTrax >= 50) && 'text-muted', 'fa-icon') } /> }
diff --git a/src/components/wired/views/WiredBaseView.tsx b/src/components/wired/views/WiredBaseView.tsx
index 6b9d9c34..53acf49c 100644
--- a/src/components/wired/views/WiredBaseView.tsx
+++ b/src/components/wired/views/WiredBaseView.tsx
@@ -90,7 +90,7 @@ export const WiredBaseView: FC<PropsWithChildren<WiredBaseViewProps>> = props =>
         <NitroCardView className="nitro-wired" theme="primary-slim" uniqueKey="nitro-wired">
             <NitroCardHeaderView headerText={ LocalizeText('wiredfurni.title') } onCloseClick={ onClose } />
             <NitroCardContentView>
-                <div className="flex flex-column gap-1">
+                <div className="flex flex-col gap-1">
                     <div className="flex items-center gap-1">
                         <i className={ `icon icon-wired-${ wiredType }` } />
                         <Text bold>{ wiredName }</Text>
diff --git a/src/components/wired/views/WiredFurniSelectorView.tsx b/src/components/wired/views/WiredFurniSelectorView.tsx
index b6daa0f1..4f8ad37a 100644
--- a/src/components/wired/views/WiredFurniSelectorView.tsx
+++ b/src/components/wired/views/WiredFurniSelectorView.tsx
@@ -8,7 +8,7 @@ export const WiredFurniSelectorView: FC<{}> = props =>
     const { trigger = null, furniIds = [] } = useWired();
     
     return (
-        <div className="flex flex-column gap-1">
+        <div className="flex flex-col gap-1">
             <Text bold>{ LocalizeText('wiredfurni.pickfurnis.caption', [ 'count', 'limit' ], [ furniIds.length.toString(), trigger.maximumItemSelectionCount.toString() ]) }</Text>
             <Text small>{ LocalizeText('wiredfurni.pickfurnis.desc') }</Text>
         </div>
diff --git a/src/components/wired/views/actions/WiredActionBaseView.tsx b/src/components/wired/views/actions/WiredActionBaseView.tsx
index 3a25677b..eeb3ec72 100644
--- a/src/components/wired/views/actions/WiredActionBaseView.tsx
+++ b/src/components/wired/views/actions/WiredActionBaseView.tsx
@@ -27,7 +27,7 @@ export const WiredActionBaseView: FC<PropsWithChildren<WiredActionBaseViewProps>
         <WiredBaseView hasSpecialInput={ hasSpecialInput } requiresFurni={ requiresFurni } save={ save } wiredType="action">
             { children }
             { !!children && <hr className="m-0 bg-dark" /> }
-            <div className="flex flex-column">
+            <div className="flex flex-col">
                 <Text bold>{ LocalizeText('wiredfurni.params.delay', [ 'seconds' ], [ GetWiredTimeLocale(actionDelay) ]) }</Text>
                 <ReactSlider
                     className={ 'nitro-slider' }
diff --git a/src/components/wired/views/actions/WiredActionBotChangeFigureView.tsx b/src/components/wired/views/actions/WiredActionBotChangeFigureView.tsx
index f3b9f8d8..bbc596fb 100644
--- a/src/components/wired/views/actions/WiredActionBotChangeFigureView.tsx
+++ b/src/components/wired/views/actions/WiredActionBotChangeFigureView.tsx
@@ -25,7 +25,7 @@ export const WiredActionBotChangeFigureView: FC<{}> = props =>
 
     return (
         <WiredActionBaseView hasSpecialInput={ true } requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_NONE } save={ save }>
-            <div className="flex flex-column gap-1">
+            <div className="flex flex-col gap-1">
                 <Text bold>{ LocalizeText('wiredfurni.params.bot.name') }</Text>
                 <input className="form-control form-control-sm" maxLength={ 32 } type="text" value={ botName } onChange={ event => setBotName(event.target.value) } />
             </div>
diff --git a/src/components/wired/views/actions/WiredActionBotFollowAvatarView.tsx b/src/components/wired/views/actions/WiredActionBotFollowAvatarView.tsx
index 2d9589e6..596fd2dc 100644
--- a/src/components/wired/views/actions/WiredActionBotFollowAvatarView.tsx
+++ b/src/components/wired/views/actions/WiredActionBotFollowAvatarView.tsx
@@ -24,11 +24,11 @@ export const WiredActionBotFollowAvatarView: FC<{}> = props =>
 
     return (
         <WiredActionBaseView hasSpecialInput={ true } requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_NONE } save={ save }>
-            <div className="flex flex-column gap-1">
+            <div className="flex flex-col gap-1">
                 <Text bold>{ LocalizeText('wiredfurni.params.bot.name') }</Text>
                 <input className="form-control form-control-sm" maxLength={ 32 } type="text" value={ botName } onChange={ event => setBotName(event.target.value) } />
             </div>
-            <div className="flex flex-column gap-1">
+            <div className="flex flex-col gap-1">
                 <div className="flex items-center gap-1">
                     <input checked={ (followMode === 1) } className="form-check-input" id="followMode1" name="followMode" type="radio" onChange={ event => setFollowMode(1) } />
                     <Text>{ LocalizeText('wiredfurni.params.start.following') }</Text>
diff --git a/src/components/wired/views/actions/WiredActionBotGiveHandItemView.tsx b/src/components/wired/views/actions/WiredActionBotGiveHandItemView.tsx
index cd3f12e3..a9067235 100644
--- a/src/components/wired/views/actions/WiredActionBotGiveHandItemView.tsx
+++ b/src/components/wired/views/actions/WiredActionBotGiveHandItemView.tsx
@@ -26,11 +26,11 @@ export const WiredActionBotGiveHandItemView: FC<{}> = props =>
 
     return (
         <WiredActionBaseView hasSpecialInput={ true } requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_NONE } save={ save }>
-            <div className="flex flex-column gap-1">
+            <div className="flex flex-col gap-1">
                 <Text bold>{ LocalizeText('wiredfurni.params.bot.name') }</Text>
                 <input className="form-control form-control-sm" maxLength={ 32 } type="text" value={ botName } onChange={ event => setBotName(event.target.value) } />
             </div>
-            <div className="flex flex-column gap-1">
+            <div className="flex flex-col gap-1">
                 <Text bold>{ LocalizeText('wiredfurni.params.handitem') }</Text>
                 <select className="form-select form-select-sm" value={ handItemId } onChange={ event => setHandItemId(parseInt(event.target.value)) }>
                     <option value="0">------</option>
diff --git a/src/components/wired/views/actions/WiredActionBotMoveView.tsx b/src/components/wired/views/actions/WiredActionBotMoveView.tsx
index 52961c24..ec55bc1e 100644
--- a/src/components/wired/views/actions/WiredActionBotMoveView.tsx
+++ b/src/components/wired/views/actions/WiredActionBotMoveView.tsx
@@ -18,7 +18,7 @@ export const WiredActionBotMoveView: FC<{}> = props =>
 
     return (
         <WiredActionBaseView hasSpecialInput={ true } requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_BY_ID } save={ save }>
-            <div className="flex flex-column gap-1">
+            <div className="flex flex-col gap-1">
                 <Text bold>{ LocalizeText('wiredfurni.params.bot.name') }</Text>
                 <input className="form-control form-control-sm" maxLength={ 32 } type="text" value={ botName } onChange={ event => setBotName(event.target.value) } />
             </div>
diff --git a/src/components/wired/views/actions/WiredActionBotTalkToAvatarView.tsx b/src/components/wired/views/actions/WiredActionBotTalkToAvatarView.tsx
index d03616d0..d5fbd084 100644
--- a/src/components/wired/views/actions/WiredActionBotTalkToAvatarView.tsx
+++ b/src/components/wired/views/actions/WiredActionBotTalkToAvatarView.tsx
@@ -29,15 +29,15 @@ export const WiredActionBotTalkToAvatarView: FC<{}> = props =>
 
     return (
         <WiredActionBaseView hasSpecialInput={ true } requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_NONE } save={ save }>
-            <div className="flex flex-column gap-1">
+            <div className="flex flex-col gap-1">
                 <Text bold>{ LocalizeText('wiredfurni.params.bot.name') }</Text>
                 <input className="form-control form-control-sm" maxLength={ 32 } type="text" value={ botName } onChange={ event => setBotName(event.target.value) } />
             </div>
-            <div className="flex flex-column gap-1">
+            <div className="flex flex-col gap-1">
                 <Text bold>{ LocalizeText('wiredfurni.params.message') }</Text>
                 <input className="form-control form-control-sm" maxLength={ GetConfigurationValue<number>('wired.action.bot.talk.to.avatar.max.length', 64) } type="text" value={ message } onChange={ event => setMessage(event.target.value) } />
             </div>
-            <div className="flex flex-column gap-1">
+            <div className="flex flex-col gap-1">
                 <div className="flex items-center gap-1">
                     <input checked={ (talkMode === 0) } className="form-check-input" id="talkMode1" name="talkMode" type="radio" onChange={ event => setTalkMode(0) } />
                     <Text>{ LocalizeText('wiredfurni.params.talk') }</Text>
diff --git a/src/components/wired/views/actions/WiredActionBotTalkView.tsx b/src/components/wired/views/actions/WiredActionBotTalkView.tsx
index 2c55a125..cb75e1d0 100644
--- a/src/components/wired/views/actions/WiredActionBotTalkView.tsx
+++ b/src/components/wired/views/actions/WiredActionBotTalkView.tsx
@@ -29,15 +29,15 @@ export const WiredActionBotTalkView: FC<{}> = props =>
 
     return (
         <WiredActionBaseView hasSpecialInput={ true } requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_NONE } save={ save }>
-            <div className="flex flex-column gap-1">
+            <div className="flex flex-col gap-1">
                 <Text bold>{ LocalizeText('wiredfurni.params.bot.name') }</Text>
                 <input className="form-control form-control-sm" maxLength={ 32 } type="text" value={ botName } onChange={ event => setBotName(event.target.value) } />
             </div>
-            <div className="flex flex-column gap-1">
+            <div className="flex flex-col gap-1">
                 <Text bold>{ LocalizeText('wiredfurni.params.message') }</Text>
                 <input className="form-control form-control-sm" maxLength={ GetConfigurationValue<number>('wired.action.bot.talk.max.length', 64) } type="text" value={ message } onChange={ event => setMessage(event.target.value) } />
             </div>
-            <div className="flex flex-column gap-1">
+            <div className="flex flex-col gap-1">
                 <div className="flex items-center gap-1">
                     <input checked={ (talkMode === 0) } className="form-check-input" id="talkMode1" name="talkMode" type="radio" onChange={ event => setTalkMode(0) } />
                     <Text>{ LocalizeText('wiredfurni.params.talk') }</Text>
diff --git a/src/components/wired/views/actions/WiredActionBotTeleportView.tsx b/src/components/wired/views/actions/WiredActionBotTeleportView.tsx
index e0086af2..baf78eb4 100644
--- a/src/components/wired/views/actions/WiredActionBotTeleportView.tsx
+++ b/src/components/wired/views/actions/WiredActionBotTeleportView.tsx
@@ -18,7 +18,7 @@ export const WiredActionBotTeleportView: FC<{}> = props =>
 
     return (
         <WiredActionBaseView hasSpecialInput={ true } requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_BY_ID } save={ save }>
-            <div className="flex flex-column gap-1">
+            <div className="flex flex-col gap-1">
                 <Text bold>{ LocalizeText('wiredfurni.params.bot.name') }</Text>
                 <input className="form-control form-control-sm" maxLength={ 32 } type="text" value={ botName } onChange={ event => setBotName(event.target.value) } />
             </div>
diff --git a/src/components/wired/views/actions/WiredActionChatView.tsx b/src/components/wired/views/actions/WiredActionChatView.tsx
index 1f4b6364..e29e7903 100644
--- a/src/components/wired/views/actions/WiredActionChatView.tsx
+++ b/src/components/wired/views/actions/WiredActionChatView.tsx
@@ -18,7 +18,7 @@ export const WiredActionChatView: FC<{}> = props =>
 
     return (
         <WiredActionBaseView hasSpecialInput={ true } requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_NONE } save={ save }>
-            <div className="flex flex-column gap-1">
+            <div className="flex flex-col gap-1">
                 <Text bold>{ LocalizeText('wiredfurni.params.message') }</Text>
                 <input className="form-control form-control-sm" maxLength={ GetConfigurationValue<number>('wired.action.chat.max.length', 100) } type="text" value={ message } onChange={ event => setMessage(event.target.value) } />
             </div>
diff --git a/src/components/wired/views/actions/WiredActionGiveRewardView.tsx b/src/components/wired/views/actions/WiredActionGiveRewardView.tsx
index eaee66b1..3d86897d 100644
--- a/src/components/wired/views/actions/WiredActionGiveRewardView.tsx
+++ b/src/components/wired/views/actions/WiredActionGiveRewardView.tsx
@@ -109,7 +109,7 @@ export const WiredActionGiveRewardView: FC<{}> = props =>
                     value={ rewardsLimit }
                     onChange={ event => setRewardsLimit(event) } /> }
             <hr className="m-0 bg-dark" />
-            <div className="flex flex-column gap-1">
+            <div className="flex flex-col gap-1">
                 <Text bold>How often can a user be rewarded?</Text>
                 <div className="flex gap-1">
                     <select className="form-select form-select-sm w-100" value={ rewardTime } onChange={ (e) => setRewardTime(Number(e.target.value)) }>
@@ -136,7 +136,7 @@ export const WiredActionGiveRewardView: FC<{}> = props =>
                     <FaPlus className="fa-icon" />
                 </Button>
             </div>
-            <div className="flex flex-column gap-1">
+            <div className="flex flex-col gap-1">
                 { rewards && rewards.map((reward, index) =>
                 {
                     return (
diff --git a/src/components/wired/views/actions/WiredActionGiveScoreToPredefinedTeamView.tsx b/src/components/wired/views/actions/WiredActionGiveScoreToPredefinedTeamView.tsx
index 83c5c209..b3129c48 100644
--- a/src/components/wired/views/actions/WiredActionGiveScoreToPredefinedTeamView.tsx
+++ b/src/components/wired/views/actions/WiredActionGiveScoreToPredefinedTeamView.tsx
@@ -32,7 +32,7 @@ export const WiredActionGiveScoreToPredefinedTeamView: FC<{}> = props =>
 
     return (
         <WiredActionBaseView hasSpecialInput={ true } requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_NONE } save={ save }>
-            <div className="flex flex-column gap-1">
+            <div className="flex flex-col gap-1">
                 <Text bold>{ LocalizeText('wiredfurni.params.setpoints', [ 'points' ], [ points.toString() ]) }</Text>
                 <ReactSlider
                     className={ 'nitro-slider' }
@@ -41,7 +41,7 @@ export const WiredActionGiveScoreToPredefinedTeamView: FC<{}> = props =>
                     value={ points }
                     onChange={ event => setPoints(event) } />
             </div>
-            <div className="flex flex-column gap-1">
+            <div className="flex flex-col gap-1">
                 <Text bold>{ LocalizeText('wiredfurni.params.settimesingame', [ 'times' ], [ time.toString() ]) }</Text>
                 <ReactSlider
                     className={ 'nitro-slider' }
@@ -50,7 +50,7 @@ export const WiredActionGiveScoreToPredefinedTeamView: FC<{}> = props =>
                     value={ time }
                     onChange={ event => setTime(event) } />
             </div>
-            <div className="flex flex-column gap-1">
+            <div className="flex flex-col gap-1">
                 <Text bold>{ LocalizeText('wiredfurni.params.team') }</Text>
                 { [ 1, 2, 3, 4 ].map(value =>
                 {
diff --git a/src/components/wired/views/actions/WiredActionGiveScoreView.tsx b/src/components/wired/views/actions/WiredActionGiveScoreView.tsx
index 5f5358fc..0785a898 100644
--- a/src/components/wired/views/actions/WiredActionGiveScoreView.tsx
+++ b/src/components/wired/views/actions/WiredActionGiveScoreView.tsx
@@ -29,7 +29,7 @@ export const WiredActionGiveScoreView: FC<{}> = props =>
 
     return (
         <WiredActionBaseView hasSpecialInput={ true } requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_NONE } save={ save }>
-            <div className="flex flex-column gap-1">
+            <div className="flex flex-col gap-1">
                 <Text bold>{ LocalizeText('wiredfurni.params.setpoints', [ 'points' ], [ points.toString() ]) }</Text>
                 <ReactSlider
                     className={ 'nitro-slider' }
@@ -38,7 +38,7 @@ export const WiredActionGiveScoreView: FC<{}> = props =>
                     value={ points }
                     onChange={ event => setPoints(event) } />
             </div>
-            <div className="flex flex-column gap-1">
+            <div className="flex flex-col gap-1">
                 <Text bold>{ LocalizeText('wiredfurni.params.settimesingame', [ 'times' ], [ time.toString() ]) }</Text>
                 <ReactSlider
                     className={ 'nitro-slider' }
diff --git a/src/components/wired/views/actions/WiredActionJoinTeamView.tsx b/src/components/wired/views/actions/WiredActionJoinTeamView.tsx
index 4ab20adb..c084a26e 100644
--- a/src/components/wired/views/actions/WiredActionJoinTeamView.tsx
+++ b/src/components/wired/views/actions/WiredActionJoinTeamView.tsx
@@ -18,7 +18,7 @@ export const WiredActionJoinTeamView: FC<{}> = props =>
 
     return (
         <WiredActionBaseView hasSpecialInput={ true } requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_NONE } save={ save }>
-            <div className="flex flex-column gap-1">
+            <div className="flex flex-col gap-1">
                 <Text bold>{ LocalizeText('wiredfurni.params.team') }</Text>
                 { [ 1, 2, 3, 4 ].map(team =>
                 {
diff --git a/src/components/wired/views/actions/WiredActionKickFromRoomView.tsx b/src/components/wired/views/actions/WiredActionKickFromRoomView.tsx
index 609a8620..74ffbc59 100644
--- a/src/components/wired/views/actions/WiredActionKickFromRoomView.tsx
+++ b/src/components/wired/views/actions/WiredActionKickFromRoomView.tsx
@@ -18,7 +18,7 @@ export const WiredActionKickFromRoomView: FC<{}> = props =>
 
     return (
         <WiredActionBaseView hasSpecialInput={ true } requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_NONE } save={ save }>
-            <div className="flex flex-column gap-1">
+            <div className="flex flex-col gap-1">
                 <Text bold>{ LocalizeText('wiredfurni.params.message') }</Text>
                 <input className="form-control form-control-sm" maxLength={ GetConfigurationValue<number>('wired.action.kick.from.room.max.length', 100) } type="text" value={ message } onChange={ event => setMessage(event.target.value) } />
             </div>
diff --git a/src/components/wired/views/actions/WiredActionMoveAndRotateFurniView.tsx b/src/components/wired/views/actions/WiredActionMoveAndRotateFurniView.tsx
index 5bea5631..761fe0aa 100644
--- a/src/components/wired/views/actions/WiredActionMoveAndRotateFurniView.tsx
+++ b/src/components/wired/views/actions/WiredActionMoveAndRotateFurniView.tsx
@@ -49,7 +49,7 @@ export const WiredActionMoveAndRotateFurniView: FC<{}> = props =>
 
     return (
         <WiredActionBaseView hasSpecialInput={ true } requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_BY_ID_BY_TYPE_OR_FROM_CONTEXT } save={ save }>
-            <div className="flex flex-column gap-1">
+            <div className="flex flex-col gap-1">
                 <Text bold>{ LocalizeText('wiredfurni.params.startdir') }</Text>
                 <div className="flex gap-1">
                     { directionOptions.map(option =>
@@ -65,7 +65,7 @@ export const WiredActionMoveAndRotateFurniView: FC<{}> = props =>
                     }) }
                 </div>
             </div>
-            <div className="flex flex-column gap-1">
+            <div className="flex flex-col gap-1">
                 <Text bold>{ LocalizeText('wiredfurni.params.turn') }</Text>
                 { rotationOptions.map(option =>
                 {
diff --git a/src/components/wired/views/actions/WiredActionMoveFurniToView.tsx b/src/components/wired/views/actions/WiredActionMoveFurniToView.tsx
index 71961250..53f468fa 100644
--- a/src/components/wired/views/actions/WiredActionMoveFurniToView.tsx
+++ b/src/components/wired/views/actions/WiredActionMoveFurniToView.tsx
@@ -48,7 +48,7 @@ export const WiredActionMoveFurniToView: FC<{}> = props =>
 
     return (
         <WiredActionBaseView hasSpecialInput={ true } requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_BY_ID_OR_BY_TYPE } save={ save }>
-            <div className="flex flex-column gap-1">
+            <div className="flex flex-col gap-1">
                 <Text bold>{ LocalizeText('wiredfurni.params.emptytiles', [ 'tiles' ], [ spacing.toString() ]) }</Text>
                 <ReactSlider
                     className={ 'nitro-slider' }
@@ -57,7 +57,7 @@ export const WiredActionMoveFurniToView: FC<{}> = props =>
                     value={ spacing }
                     onChange={ event => setSpacing(event) } />
             </div>
-            <div className="flex flex-column gap-1">
+            <div className="flex flex-col gap-1">
                 <Text bold>{ LocalizeText('wiredfurni.params.startdir') }</Text>
                 <div className="flex gap-1">
                     { directionOptions.map(value =>
diff --git a/src/components/wired/views/actions/WiredActionMoveFurniView.tsx b/src/components/wired/views/actions/WiredActionMoveFurniView.tsx
index 0785253c..6092ae64 100644
--- a/src/components/wired/views/actions/WiredActionMoveFurniView.tsx
+++ b/src/components/wired/views/actions/WiredActionMoveFurniView.tsx
@@ -61,7 +61,7 @@ export const WiredActionMoveFurniView: FC<{}> = props =>
 
     return (
         <WiredActionBaseView hasSpecialInput={ true } requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_BY_ID_BY_TYPE_OR_FROM_CONTEXT } save={ save }>
-            <div className="flex flex-column gap-1">
+            <div className="flex flex-col gap-1">
                 <Text bold>{ LocalizeText('wiredfurni.params.movefurni') }</Text>
                 <div className="flex items-center gap-1">
                     <input checked={ (movement === 0) } className="form-check-input" id="movement0" name="selectedTeam" type="radio" onChange={ event => setMovement(0) } />
@@ -80,7 +80,7 @@ export const WiredActionMoveFurniView: FC<{}> = props =>
                     <div className="col" />
                 </div>
             </div>
-            <div className="flex flex-column gap-1">
+            <div className="flex flex-col gap-1">
                 <Text bold>{ LocalizeText('wiredfurni.params.rotatefurni') }</Text>
                 { rotationOptions.map(option =>
                 {
diff --git a/src/components/wired/views/actions/WiredActionMuteUserView.tsx b/src/components/wired/views/actions/WiredActionMuteUserView.tsx
index 3f9e91e2..f42aa966 100644
--- a/src/components/wired/views/actions/WiredActionMuteUserView.tsx
+++ b/src/components/wired/views/actions/WiredActionMuteUserView.tsx
@@ -25,7 +25,7 @@ export const WiredActionMuteUserView: FC<{}> = props =>
 
     return (
         <WiredActionBaseView hasSpecialInput={ true } requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_NONE } save={ save }>
-            <div className="flex flex-column gap-1">
+            <div className="flex flex-col gap-1">
                 <Text bold>{ LocalizeText('wiredfurni.params.length.minutes', [ 'minutes' ], [ time.toString() ]) }</Text>
                 <ReactSlider
                     className={ 'nitro-slider' }
@@ -34,7 +34,7 @@ export const WiredActionMuteUserView: FC<{}> = props =>
                     value={ time }
                     onChange={ event => setTime(event) } />
             </div>
-            <div className="flex flex-column gap-1">
+            <div className="flex flex-col gap-1">
                 <Text bold>{ LocalizeText('wiredfurni.params.message') }</Text>
                 <input className="form-control form-control-sm" maxLength={ GetConfigurationValue<number>('wired.action.mute.user.max.length', 100) } type="text" value={ message } onChange={ event => setMessage(event.target.value) } />
             </div>
diff --git a/src/components/wired/views/actions/WiredActionSetFurniStateToView.tsx b/src/components/wired/views/actions/WiredActionSetFurniStateToView.tsx
index 7de91f0a..e807578f 100644
--- a/src/components/wired/views/actions/WiredActionSetFurniStateToView.tsx
+++ b/src/components/wired/views/actions/WiredActionSetFurniStateToView.tsx
@@ -22,7 +22,7 @@ export const WiredActionSetFurniStateToView: FC<{}> = props =>
 
     return (
         <WiredActionBaseView hasSpecialInput={ true } requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_BY_ID } save={ save }>
-            <div className="flex flex-column gap-1">
+            <div className="flex flex-col gap-1">
                 <Text bold>{ LocalizeText('wiredfurni.params.conditions') }</Text>
                 <div className="flex items-center gap-1">
                     <input checked={ !!stateFlag } className="form-check-input" id="stateFlag" type="checkbox" onChange={ event => setStateFlag(event.target.checked ? 1 : 0) } />
diff --git a/src/components/wired/views/conditions/WiredConditionActorHasHandItem.tsx b/src/components/wired/views/conditions/WiredConditionActorHasHandItem.tsx
index 401452c8..a51834f9 100644
--- a/src/components/wired/views/conditions/WiredConditionActorHasHandItem.tsx
+++ b/src/components/wired/views/conditions/WiredConditionActorHasHandItem.tsx
@@ -20,7 +20,7 @@ export const WiredConditionActorHasHandItemView: FC<{}> = props =>
 
     return (
         <WiredConditionBaseView hasSpecialInput={ true } requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_NONE } save={ save }>
-            <div className="flex flex-column gap-1">
+            <div className="flex flex-col gap-1">
                 <Text bold>{ LocalizeText('wiredfurni.params.handitem') }</Text>
                 <select className="form-select form-select-sm" value={ handItemId } onChange={ event => setHandItemId(parseInt(event.target.value)) }>
                     { ALLOWED_HAND_ITEM_IDS.map(value =>
diff --git a/src/components/wired/views/conditions/WiredConditionActorIsTeamMemberView.tsx b/src/components/wired/views/conditions/WiredConditionActorIsTeamMemberView.tsx
index 04cc8d3a..7121d11a 100644
--- a/src/components/wired/views/conditions/WiredConditionActorIsTeamMemberView.tsx
+++ b/src/components/wired/views/conditions/WiredConditionActorIsTeamMemberView.tsx
@@ -20,7 +20,7 @@ export const WiredConditionActorIsTeamMemberView: FC<{}> = props =>
     
     return (
         <WiredConditionBaseView hasSpecialInput={ true } requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_NONE } save={ save }>
-            <div className="flex flex-column gap-1">
+            <div className="flex flex-col gap-1">
                 <Text bold>{ LocalizeText('wiredfurni.params.team') }</Text>
                 { teamIds.map(value =>
                 {
diff --git a/src/components/wired/views/conditions/WiredConditionActorIsWearingBadgeView.tsx b/src/components/wired/views/conditions/WiredConditionActorIsWearingBadgeView.tsx
index 4d690e54..e46836aa 100644
--- a/src/components/wired/views/conditions/WiredConditionActorIsWearingBadgeView.tsx
+++ b/src/components/wired/views/conditions/WiredConditionActorIsWearingBadgeView.tsx
@@ -18,7 +18,7 @@ export const WiredConditionActorIsWearingBadgeView: FC<{}> = props =>
     
     return (
         <WiredConditionBaseView hasSpecialInput={ true } requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_NONE } save={ save }>
-            <div className="flex flex-column gap-1">
+            <div className="flex flex-col gap-1">
                 <Text bold>{ LocalizeText('wiredfurni.params.badgecode') }</Text>
                 <input className="form-control form-control-sm" type="text" value={ badge } onChange={ event => setBadge(event.target.value) } />
             </div>
diff --git a/src/components/wired/views/conditions/WiredConditionActorIsWearingEffectView.tsx b/src/components/wired/views/conditions/WiredConditionActorIsWearingEffectView.tsx
index 7c36fccd..d4c6d439 100644
--- a/src/components/wired/views/conditions/WiredConditionActorIsWearingEffectView.tsx
+++ b/src/components/wired/views/conditions/WiredConditionActorIsWearingEffectView.tsx
@@ -18,7 +18,7 @@ export const WiredConditionActorIsWearingEffectView: FC<{}> = props =>
     
     return (
         <WiredConditionBaseView hasSpecialInput={ true } requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_NONE } save={ save }>
-            <div className="flex flex-column gap-1">
+            <div className="flex flex-col gap-1">
                 <Text bold>{ LocalizeText('wiredfurni.tooltip.effectid') }</Text>
                 <input className="form-control form-control-sm" type="number" value={ effect } onChange={ event => setEffect(parseInt(event.target.value)) } />
             </div>
diff --git a/src/components/wired/views/conditions/WiredConditionDateRangeView.tsx b/src/components/wired/views/conditions/WiredConditionDateRangeView.tsx
index 61c3ce0d..bc19ecac 100644
--- a/src/components/wired/views/conditions/WiredConditionDateRangeView.tsx
+++ b/src/components/wired/views/conditions/WiredConditionDateRangeView.tsx
@@ -45,11 +45,11 @@ export const WiredConditionDateRangeView: FC<{}> = props =>
     
     return (
         <WiredConditionBaseView hasSpecialInput={ true } requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_NONE } save={ save }>
-            <div className="flex flex-column gap-1">
+            <div className="flex flex-col gap-1">
                 <Text bold>{ LocalizeText('wiredfurni.params.startdate') }</Text>
                 <input className="form-control form-control-sm" type="text" value={ startDate } onChange={ (e) => setStartDate(e.target.value) } />
             </div>
-            <div className="flex flex-column gap-1">
+            <div className="flex flex-col gap-1">
                 <Text bold>{ LocalizeText('wiredfurni.params.enddate') }</Text>
                 <input className="form-control form-control-sm" type="text" value={ endDate } onChange={ (e) => setEndDate(e.target.value) } />
             </div>
diff --git a/src/components/wired/views/conditions/WiredConditionFurniHasFurniOnView.tsx b/src/components/wired/views/conditions/WiredConditionFurniHasFurniOnView.tsx
index 989b777f..ce4272df 100644
--- a/src/components/wired/views/conditions/WiredConditionFurniHasFurniOnView.tsx
+++ b/src/components/wired/views/conditions/WiredConditionFurniHasFurniOnView.tsx
@@ -18,7 +18,7 @@ export const WiredConditionFurniHasFurniOnView: FC<{}> = props =>
     
     return (
         <WiredConditionBaseView hasSpecialInput={ true } requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_BY_ID } save={ save }>
-            <div className="flex flex-column gap-1">
+            <div className="flex flex-col gap-1">
                 <Text bold>{ LocalizeText('wiredfurni.params.requireall') }</Text>
                 { [ 0, 1 ].map(value =>
                 {
diff --git a/src/components/wired/views/conditions/WiredConditionFurniHasNotFurniOnView.tsx b/src/components/wired/views/conditions/WiredConditionFurniHasNotFurniOnView.tsx
index a7c37216..ab15bf67 100644
--- a/src/components/wired/views/conditions/WiredConditionFurniHasNotFurniOnView.tsx
+++ b/src/components/wired/views/conditions/WiredConditionFurniHasNotFurniOnView.tsx
@@ -18,7 +18,7 @@ export const WiredConditionFurniHasNotFurniOnView: FC<{}> = props =>
     
     return (
         <WiredConditionBaseView hasSpecialInput={ true } requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_BY_ID } save={ save }>
-            <div className="flex flex-column gap-1">
+            <div className="flex flex-col gap-1">
                 <Text bold>{ LocalizeText('wiredfurni.params.not_requireall') }</Text>
                 { [ 0, 1 ].map(value =>
                 {
diff --git a/src/components/wired/views/conditions/WiredConditionFurniMatchesSnapshotView.tsx b/src/components/wired/views/conditions/WiredConditionFurniMatchesSnapshotView.tsx
index 2f50c44a..154d3d37 100644
--- a/src/components/wired/views/conditions/WiredConditionFurniMatchesSnapshotView.tsx
+++ b/src/components/wired/views/conditions/WiredConditionFurniMatchesSnapshotView.tsx
@@ -22,7 +22,7 @@ export const WiredConditionFurniMatchesSnapshotView: FC<{}> = props =>
     
     return (
         <WiredConditionBaseView hasSpecialInput={ true } requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_BY_ID } save={ save }>
-            <div className="flex flex-column gap-1">
+            <div className="flex flex-col gap-1">
                 <Text bold>{ LocalizeText('wiredfurni.params.conditions') }</Text>
                 <div className="flex items-center gap-1">
                     <input checked={ !!stateFlag } className="form-check-input" id="stateFlag" type="checkbox" onChange={ event => setStateFlag(event.target.checked ? 1 : 0) } />
diff --git a/src/components/wired/views/conditions/WiredConditionTimeElapsedLessView.tsx b/src/components/wired/views/conditions/WiredConditionTimeElapsedLessView.tsx
index 9aa1019f..df31b424 100644
--- a/src/components/wired/views/conditions/WiredConditionTimeElapsedLessView.tsx
+++ b/src/components/wired/views/conditions/WiredConditionTimeElapsedLessView.tsx
@@ -19,7 +19,7 @@ export const WiredConditionTimeElapsedLessView: FC<{}> = props =>
     
     return (
         <WiredConditionBaseView hasSpecialInput={ true } requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_NONE } save={ save }>
-            <div className="flex flex-column gap-1">
+            <div className="flex flex-col gap-1">
                 <Text bold>{ LocalizeText('wiredfurni.params.allowbefore', [ 'seconds' ], [ GetWiredTimeLocale(time) ]) }</Text>
                 <ReactSlider
                     className={ 'nitro-slider' }
diff --git a/src/components/wired/views/conditions/WiredConditionTimeElapsedMoreView.tsx b/src/components/wired/views/conditions/WiredConditionTimeElapsedMoreView.tsx
index 13108e5e..1b510824 100644
--- a/src/components/wired/views/conditions/WiredConditionTimeElapsedMoreView.tsx
+++ b/src/components/wired/views/conditions/WiredConditionTimeElapsedMoreView.tsx
@@ -19,7 +19,7 @@ export const WiredConditionTimeElapsedMoreView: FC<{}> = props =>
     
     return (
         <WiredConditionBaseView hasSpecialInput={ true } requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_NONE } save={ save }>
-            <div className="flex flex-column gap-1">
+            <div className="flex flex-col gap-1">
                 <Text bold>{ LocalizeText('wiredfurni.params.allowafter', [ 'seconds' ], [ GetWiredTimeLocale(time) ]) }</Text>
                 <ReactSlider
                     className={ 'nitro-slider' }
diff --git a/src/components/wired/views/conditions/WiredConditionUserCountInRoomView.tsx b/src/components/wired/views/conditions/WiredConditionUserCountInRoomView.tsx
index 15afe61a..4eda3c63 100644
--- a/src/components/wired/views/conditions/WiredConditionUserCountInRoomView.tsx
+++ b/src/components/wired/views/conditions/WiredConditionUserCountInRoomView.tsx
@@ -29,7 +29,7 @@ export const WiredConditionUserCountInRoomView: FC<{}> = props =>
     
     return (
         <WiredConditionBaseView hasSpecialInput={ true } requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_NONE } save={ save }>
-            <div className="flex flex-column gap-1">
+            <div className="flex flex-col gap-1">
                 <Text bold>{ LocalizeText('wiredfurni.params.usercountmin', [ 'value' ], [ min.toString() ]) }</Text>
                 <ReactSlider
                     className={ 'nitro-slider' }
@@ -38,7 +38,7 @@ export const WiredConditionUserCountInRoomView: FC<{}> = props =>
                     value={ min }
                     onChange={ event => setMin(event) } />
             </div>
-            <div className="flex flex-column gap-1">
+            <div className="flex flex-col gap-1">
                 <Text bold>{ LocalizeText('wiredfurni.params.usercountmax', [ 'value' ], [ max.toString() ]) }</Text>
                 <ReactSlider
                     className={ 'nitro-slider' }
diff --git a/src/components/wired/views/triggers/WiredTriggerAvatarEnterRoomView.tsx b/src/components/wired/views/triggers/WiredTriggerAvatarEnterRoomView.tsx
index 50aa6c73..7fdd1a06 100644
--- a/src/components/wired/views/triggers/WiredTriggerAvatarEnterRoomView.tsx
+++ b/src/components/wired/views/triggers/WiredTriggerAvatarEnterRoomView.tsx
@@ -20,7 +20,7 @@ export const WiredTriggerAvatarEnterRoomView: FC<{}> = props =>
 
     return (
         <WiredTriggerBaseView hasSpecialInput={ true } requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_NONE } save={ save }>
-            <div className="flex flex-column gap-1">
+            <div className="flex flex-col gap-1">
                 <Text bold>{ LocalizeText('wiredfurni.params.picktriggerer') }</Text>
                 <div className="flex items-center gap-1">
                     <input checked={ (avatarMode === 0) } className="form-check-input" id="avatarMode0" name="avatarMode" type="radio" onChange={ event => setAvatarMode(0) } />
diff --git a/src/components/wired/views/triggers/WiredTriggerAvatarSaysSomethingView.tsx b/src/components/wired/views/triggers/WiredTriggerAvatarSaysSomethingView.tsx
index f74da788..3e632d71 100644
--- a/src/components/wired/views/triggers/WiredTriggerAvatarSaysSomethingView.tsx
+++ b/src/components/wired/views/triggers/WiredTriggerAvatarSaysSomethingView.tsx
@@ -25,11 +25,11 @@ export const WiredTriggerAvatarSaysSomethingView: FC<{}> = props =>
     
     return (
         <WiredTriggerBaseView hasSpecialInput={ true } requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_NONE } save={ save }>
-            <div className="flex flex-column gap-1">
+            <div className="flex flex-col gap-1">
                 <Text bold>{ LocalizeText('wiredfurni.params.whatissaid') }</Text>
                 <input className="form-control form-control-sm" type="text" value={ message } onChange={ event => setMessage(event.target.value) } />
             </div>
-            <div className="flex flex-column gap-1">
+            <div className="flex flex-col gap-1">
                 <Text bold>{ LocalizeText('wiredfurni.params.picktriggerer') }</Text>
                 <div className="flex items-center gap-1">
                     <input checked={ (triggererAvatar === 0) } className="form-check-input" id="triggererAvatar0" name="triggererAvatar" type="radio" onChange={ event => setTriggererAvatar(0) } />
diff --git a/src/components/wired/views/triggers/WiredTriggerBotReachedAvatarView.tsx b/src/components/wired/views/triggers/WiredTriggerBotReachedAvatarView.tsx
index 13a3dbd2..e1a66486 100644
--- a/src/components/wired/views/triggers/WiredTriggerBotReachedAvatarView.tsx
+++ b/src/components/wired/views/triggers/WiredTriggerBotReachedAvatarView.tsx
@@ -18,7 +18,7 @@ export const WiredTriggerBotReachedAvatarView: FC<{}> = props =>
     
     return (
         <WiredTriggerBaseView hasSpecialInput={ true } requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_NONE } save={ save }>
-            <div className="flex flex-column gap-1">
+            <div className="flex flex-col gap-1">
                 <Text bold>{ LocalizeText('wiredfurni.params.bot.name') }</Text>
                 <input className="form-control form-control-sm" maxLength={ 32 } type="text" value={ botName } onChange={ event => setBotName(event.target.value) } />
             </div>
diff --git a/src/components/wired/views/triggers/WiredTriggerBotReachedStuffView.tsx b/src/components/wired/views/triggers/WiredTriggerBotReachedStuffView.tsx
index d4a76597..200310d2 100644
--- a/src/components/wired/views/triggers/WiredTriggerBotReachedStuffView.tsx
+++ b/src/components/wired/views/triggers/WiredTriggerBotReachedStuffView.tsx
@@ -18,7 +18,7 @@ export const WiredTriggerBotReachedStuffView: FC<{}> = props =>
     
     return (
         <WiredTriggerBaseView hasSpecialInput={ true } requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_BY_ID_OR_BY_TYPE } save={ save }>
-            <div className="flex flex-column gap-1">
+            <div className="flex flex-col gap-1">
                 <Text bold>{ LocalizeText('wiredfurni.params.bot.name') }</Text>
                 <input className="form-control form-control-sm" maxLength={ 32 } type="text" value={ botName } onChange={ event => setBotName(event.target.value) } />
             </div>
diff --git a/src/components/wired/views/triggers/WiredTriggerExecuteOnceView.tsx b/src/components/wired/views/triggers/WiredTriggerExecuteOnceView.tsx
index 00511c01..b9f69fde 100644
--- a/src/components/wired/views/triggers/WiredTriggerExecuteOnceView.tsx
+++ b/src/components/wired/views/triggers/WiredTriggerExecuteOnceView.tsx
@@ -19,7 +19,7 @@ export const WiredTriggeExecuteOnceView: FC<{}> = props =>
 
     return (
         <WiredTriggerBaseView hasSpecialInput={ true } requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_NONE } save={ save }>
-            <div className="flex flex-column gap-1">
+            <div className="flex flex-col gap-1">
                 <Text bold>{ LocalizeText('wiredfurni.params.settime', [ 'seconds' ], [ GetWiredTimeLocale(time) ]) }</Text>
                 <ReactSlider
                     className={ 'nitro-slider' }
diff --git a/src/components/wired/views/triggers/WiredTriggerExecutePeriodicallyLongView.tsx b/src/components/wired/views/triggers/WiredTriggerExecutePeriodicallyLongView.tsx
index d101324a..6eca54c5 100644
--- a/src/components/wired/views/triggers/WiredTriggerExecutePeriodicallyLongView.tsx
+++ b/src/components/wired/views/triggers/WiredTriggerExecutePeriodicallyLongView.tsx
@@ -19,7 +19,7 @@ export const WiredTriggeExecutePeriodicallyLongView: FC<{}> = props =>
 
     return (
         <WiredTriggerBaseView hasSpecialInput={ true } requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_NONE } save={ save }>
-            <div className="flex flex-column gap-1">
+            <div className="flex flex-col gap-1">
                 <Text bold>{ LocalizeText('wiredfurni.params.setlongtime', [ 'time' ], [ FriendlyTime.format(time * 5).toString() ]) }</Text>
                 <ReactSlider
                     className={ 'nitro-slider' }
diff --git a/src/components/wired/views/triggers/WiredTriggerExecutePeriodicallyView.tsx b/src/components/wired/views/triggers/WiredTriggerExecutePeriodicallyView.tsx
index 44e5d6be..19e5a851 100644
--- a/src/components/wired/views/triggers/WiredTriggerExecutePeriodicallyView.tsx
+++ b/src/components/wired/views/triggers/WiredTriggerExecutePeriodicallyView.tsx
@@ -19,7 +19,7 @@ export const WiredTriggeExecutePeriodicallyView: FC<{}> = props =>
 
     return (
         <WiredTriggerBaseView hasSpecialInput={ true } requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_NONE } save={ save }>
-            <div className="flex flex-column gap-1">
+            <div className="flex flex-col gap-1">
                 <Text bold>{ LocalizeText('wiredfurni.params.settime', [ 'seconds' ], [ GetWiredTimeLocale(time) ]) }</Text>
                 <ReactSlider
                     className={ 'nitro-slider' }
diff --git a/src/components/wired/views/triggers/WiredTriggerScoreAchievedView.tsx b/src/components/wired/views/triggers/WiredTriggerScoreAchievedView.tsx
index e03fac3d..cb40eab0 100644
--- a/src/components/wired/views/triggers/WiredTriggerScoreAchievedView.tsx
+++ b/src/components/wired/views/triggers/WiredTriggerScoreAchievedView.tsx
@@ -19,7 +19,7 @@ export const WiredTriggeScoreAchievedView: FC<{}> = props =>
 
     return (
         <WiredTriggerBaseView hasSpecialInput={ true } requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_NONE } save={ save }>
-            <div className="flex flex-column gap-1">
+            <div className="flex flex-col gap-1">
                 <Text bold>{ LocalizeText('wiredfurni.params.setscore', [ 'points' ], [ points.toString() ]) }</Text>
                 <ReactSlider
                     className={ 'nitro-slider' }
diff --git a/src/index.css b/src/index.css
index 28d0d3eb..81dbd923 100644
--- a/src/index.css
+++ b/src/index.css
@@ -71,6 +71,19 @@ body {
         @apply pointer-events-none relative h-[130px] w-[90px] bg-[center_-8px] bg-no-repeat;
     }
 
+    .ubuntu-close-button {
+        @apply inline-block h-[20px] w-[19px] bg-transparent bg-[0px_0px] bg-no-repeat outline-0;
+        background-image: url("@/assets/images/ui/ubuntu-close-buttons.png");
+
+        &:hover {
+            @apply bg-[-38px];
+        }
+
+        &:active {
+            @apply bg-[-19px];
+        }
+    }
+
     .nitro-icon {
         @apply inline-block bg-transparent bg-center bg-no-repeat outline-0;
 
diff --git a/src/layout/InfiniteGrid.tsx b/src/layout/InfiniteGrid.tsx
new file mode 100644
index 00000000..206a9e07
--- /dev/null
+++ b/src/layout/InfiniteGrid.tsx
@@ -0,0 +1,70 @@
+import { useVirtualizer } from '@tanstack/react-virtual';
+import { Fragment, ReactElement, useEffect, useRef } from 'react';
+
+type Props<T> = {
+    items: T[];
+    columnCount: number;
+    overscan?: number;
+    estimateSize?: number;
+    itemRender?: (item: T, index?: number) => ReactElement;
+}
+
+export const InfiniteGrid = <T,>(props: Props<T>) =>
+{
+    const { items = [], columnCount = 4, overscan = 5, estimateSize = 45, itemRender = null } = props;
+    const parentRef = useRef<HTMLDivElement>(null);
+
+    const virtualizer = useVirtualizer({
+        count: Math.ceil(items.length / columnCount),
+        overscan,
+        getScrollElement: () => parentRef.current,
+        estimateSize: () => estimateSize
+    });
+
+    useEffect(() =>
+    {
+        if(!items || !items.length) return;
+
+        virtualizer.scrollToIndex(0);
+    }, [ items, virtualizer ]);
+
+    const virtualItems = virtualizer.getVirtualItems();
+
+    return (
+        <div ref={ parentRef } className="size-full position-relative" style={ { overflowY: 'auto', height: virtualizer.getTotalSize() } }>
+            <div
+                className="flex flex-col w-full gap-1"
+                style={ {
+                    transform: `translateY(${ virtualItems[0]?.start ?? 0 }px)`
+                } }>
+                { virtualItems.map(virtualRow => (
+                    <div
+                        key={ virtualRow.key + 'a' }
+                        ref={ virtualizer.measureElement }
+                        className="grid grid-cols-12 gap-2 "
+                        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 = items[i + (virtualRow.index * columnCount)];
+
+                            if(!item) return <Fragment
+                                key={ virtualRow.index + i + 'b' } />;
+
+                            return (
+                                <Fragment key={ i }>
+                                    { itemRender(item, i) }
+                                </Fragment>
+                            );
+                        }) }
+                    </div>
+                )) }
+            </div>
+        </div>
+    );
+}
diff --git a/src/layout/NitroCard.tsx b/src/layout/NitroCard.tsx
index 48be3bb8..2cf7746f 100644
--- a/src/layout/NitroCard.tsx
+++ b/src/layout/NitroCard.tsx
@@ -1,28 +1,18 @@
 import { DetailedHTMLProps, forwardRef, HTMLAttributes, MouseEvent, PropsWithChildren } from 'react';
-import { FaTimes } from 'react-icons/fa';
 import { classNames, DraggableWindow, DraggableWindowPosition, DraggableWindowProps } from '../common';
 import { NitroItemCountBadge } from './NitroItemCountBadge';
 
-const classes = {
-    base: 'flex flex-col rounded shadow',
-    themes: {
-        'primary': 'border'
-    }
-}
-
-const NitroCardMain = forwardRef<HTMLDivElement, PropsWithChildren<{
-    theme?: 'primary';
+const NitroCardRoot = forwardRef<HTMLDivElement, PropsWithChildren<{
 } & DraggableWindowProps> & DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>>((props, ref) =>
 {
-    const { theme = 'primary', uniqueKey = null, handleSelector = '.drag-handler', windowPosition = DraggableWindowPosition.CENTER, disableDrag = false, className = null, ...rest } = props;
+    const { uniqueKey = null, handleSelector = '.drag-handler', windowPosition = DraggableWindowPosition.CENTER, disableDrag = false, className = null, ...rest } = props;
 
     return (
         <DraggableWindow disableDrag={ disableDrag } handleSelector={ handleSelector } uniqueKey={ uniqueKey } windowPosition={ windowPosition }>
             <div
                 ref={ ref }
                 className={ classNames(
-                    classes.base,
-                    classes.themes[theme],
+                    'flex flex-col rounded-md shadow border border-card-border overflow-hidden min-w-full min-h-full max-w-full max-h-full',
                     className
                 ) }
                 { ...rest } />
@@ -30,7 +20,7 @@ const NitroCardMain = forwardRef<HTMLDivElement, PropsWithChildren<{
     );
 });
 
-NitroCardMain.displayName = 'NitroCardMain';
+NitroCardRoot.displayName = 'NitroCardRoot';
 
 const NitroCardHeader = forwardRef<HTMLDivElement, {
     headerText: string;
@@ -46,12 +36,10 @@ const NitroCardHeader = forwardRef<HTMLDivElement, {
             }
 
             return (
-                <div ref={ ref } className={ classNames('relative flex items-center justify-center flex-column drag-handler', className) }>
-                    <div className="flex items-center justify-center w-full">
-                        <span>{ headerText }</span>
-                        <div className="absolute flex items-center justify-center right-2" onClick={ onCloseClick } onMouseDownCapture={ onMouseDown }>
-                            <FaTimes className="fa-icon w-[12px] h-[12px]" />
-                        </div>
+                <div ref={ ref } className={ classNames('relative flex items-center justify-center flex-col drag-handler min-h-card-header max-h-card-header bg-card-header', className) }>
+                    <div className="flex items-center justify-center w-full ">
+                        <span className="text-xl text-white drop-shadow-lg">{ headerText }</span>
+                        <div className="absolute flex items-center justify-center cursor-pointer right-2 p-[2px] ubuntu-close-button" onClick={ onCloseClick } onMouseDownCapture={ onMouseDown } />
                     </div>
                 </div>
             )
@@ -59,24 +47,30 @@ const NitroCardHeader = forwardRef<HTMLDivElement, {
 
 NitroCardHeader.displayName = 'NitroCardHeader';
 
-const NitroCardContent = forwardRef<HTMLDivElement, DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>>((props, ref) =>
+const NitroCardContent = forwardRef<HTMLDivElement, {
+    isLoading?: boolean;
+} & DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>>((props, ref) =>
 {
-    const { className = null, ...rest } = props;
+    const { isLoading = false, className = null, children = null, ...rest } = props;
 
     return (
         <div
             ref={ ref }
             className={ classNames(
-                'overflow-auto',
+                'overflow-auto bg-card-content-area p-2 h-full',
                 className
             ) }
-            { ...rest } />
+            { ...rest }>
+            { isLoading &&
+                <div className="absolute top-0 left-0 z-10 opacity-50 size-full bg-muted" /> }
+            { children }
+        </div>
     );
 });
 
 NitroCardContent.displayName = 'NitroCardContent';
 
-const NitroCardTabsMain = forwardRef<HTMLDivElement, {
+const NitroCardTabs = forwardRef<HTMLDivElement, {
 } & DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>>((props, ref) =>
 {
     const { className = null, ...rest } = props;
@@ -85,16 +79,16 @@ const NitroCardTabsMain = forwardRef<HTMLDivElement, {
         <div
             ref={ ref }
             className={ classNames(
-                'justify-center gap-1 flex',
+                'justify-center gap-0.5 flex bg-card-tabs min-h-card-tabs max-h-card-tabs pt-1 border-b border-card-border px-2',
                 className)
             }
             { ...rest } />
     )
 });
 
-NitroCardTabsMain.displayName = 'NitroCardTabsMain';
+NitroCardTabs.displayName = 'NitroCardTabs';
 
-const NitroCardTabsItem = forwardRef<HTMLDivElement, {
+const NitroCardTabItem = forwardRef<HTMLDivElement, {
     isActive?: boolean;
     count?: number;
 } & DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>>((props, ref) =>
@@ -105,8 +99,8 @@ const NitroCardTabsItem = forwardRef<HTMLDivElement, {
         <div
             ref={ ref }
             className={ classNames(
-                'overflow-hidden relative cursor-pointer rounded-t-lg flex',
-                isActive && 'active',
+                'overflow-hidden relative cursor-pointer rounded-t-md flex bg-card-tab-item px-3 py-1 text-sm z-[1] border-card-border border-t border-l border-r before:absolute before:w-[93%] before:h-[3px] before:rounded-md before:top-[1.5px] before:left-0 before:right-0 before:m-auto before:z-[1] before:bg-[#C2C9D1]',
+                isActive && 'bg-card-tab-item-active -mb-[1px] before:bg-white',
                 className)
             }
             { ...rest }>
@@ -119,15 +113,11 @@ const NitroCardTabsItem = forwardRef<HTMLDivElement, {
     )
 });
 
-NitroCardTabsItem.displayName = 'NitroCardTabsItem';
+NitroCardTabItem.displayName = 'NitroCardTabItem';
 
-export const NitroCard = {
-    Main: NitroCardMain,
+export const NitroCard = Object.assign(NitroCardRoot, {
     Header: NitroCardHeader,
-    Content: NitroCardContent
-};
-
-export const NitroCardTabs = {
-    Main: NitroCardTabsMain,
-    Item: NitroCardTabsItem
-};
+    Content: NitroCardContent,
+    Tabs: NitroCardTabs,
+    TabItem: NitroCardTabItem
+});
diff --git a/src/layout/index.ts b/src/layout/index.ts
index 91d571f0..d256036a 100644
--- a/src/layout/index.ts
+++ b/src/layout/index.ts
@@ -1,2 +1,3 @@
+export * from './InfiniteGrid';
 export * from './NitroCard';
 export * from './NitroItemCountBadge';
diff --git a/tailwind.config.js b/tailwind.config.js
index 75b273df..bbf7d660 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -4,6 +4,13 @@ const { generateShades } = require('./css-utils/CSSColorUtils');
 
 const colors = {
     'toolbar': '#555555',
+    'card-header': '#1E7295',
+    'card-close': '#921911',
+    'card-tabs': '#185D79',
+    'card-border': '#283F5D',
+    'card-tab-item': '#B6BEC5',
+    'card-tab-item-active': '#DFDFDF',
+    'card-content-area': '#DFDFDF'
 };
 
 const boxShadow = {
@@ -19,12 +26,13 @@ module.exports = {
             },
             colors: generateShades(colors),
             boxShadow,
-            width: {
-                'navigator': '420px'
-            },
-            height: {
-                'toolbar': '55px',
-                'navigator': '440px'
+            spacing: {
+                'card-header': '33px',
+                'card-tabs': '33px',
+                'navigator-w': '420px',
+                'navigator-h': '440px',
+                'inventory-w': '528px',
+                'inventory-h': '320px'
             },
             zIndex: {
                 'toolbar': ''