Various changes

src/assets/styles/bootstrap/_variables.scss

@@ -353,7 +353,7 @@ $container-max-widths: (
 // Set the number of columns and specify the width of the gutters.
 
 $grid-columns:                12 !default;
-$grid-gutter-width:           1rem !default;
+$grid-gutter-width:           16px !default;
 $grid-row-columns:            6 !default;
 
 $gutters: $spacers !default;

src/index.scss

@@ -33,6 +33,8 @@ $grid-border-color: $muted;
 $grid-active-bg-color: #ECECEC;
 $grid-active-border-color: $white;
 
+$toolbar-height: 55px;
+
 @import './utils/Styles';
 @import './App';
 @import './hooks/Styles';

src/layout/card/NitroCardView.scss

@@ -2,8 +2,41 @@ $nitro-card-header-height: 33px;
 $nitro-card-tabs-height: 33px;
 $nitro-card-top-height: $nitro-card-header-height + $nitro-card-tabs-height;
 
+.nitro-card-responsive {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+
+    .nitro-card {
+        pointer-events: all;
+
+        @import './content/NitroCardContentView';
+        @import './header/NitroCardHeaderView';
+        @import './simple-header/NitroCardSimpleHeaderView';
+        @import './tabs/NitroCardTabsView';
+    }
+
+    @include media-breakpoint-down(md) {
+        
+        .draggable-window {
+            top: 0 !important;
+            left: 0 !important;
+            width: 100%;
+            height: 100%;
+            transform: none !important;
+        }
+    
+        .nitro-card {
+            width: 100%;
+    
+            &.rounded {
+                border-radius: 0 !important;
+            }
+        }
+    }
+}
+
 @import './accordion/NitroCardAccordionView';
-@import './content/NitroCardContentView';
-@import './header/NitroCardHeaderView';
-@import './simple-header/NitroCardSimpleHeaderView';
-@import './tabs/NitroCardTabsView';

src/layout/card/NitroCardView.tsx

@@ -4,13 +4,15 @@ import { NitroCardViewProps } from './NitroCardView.types';
 
 export const NitroCardView: FC<NitroCardViewProps> = props =>
 {
-    const { className = '', disableDrag = false } = props;
+    const { className = '', disableDrag = false, children = null } = props;
 
     return (
+        <div className="nitro-card-responsive">
             <DraggableWindow handle=".drag-handler" disableDrag= { disableDrag }>
                 <div className={ 'nitro-card d-flex flex-column rounded border shadow overflow-hidden ' + className }>
-                { props.children }
+                    { children }
                 </div>
             </DraggableWindow>
+        </div>
     );
 }

src/layout/card/content/NitroCardContentView.scss

@@ -0,0 +1,12 @@
+.content-area {
+    padding-top: $container-padding-x;
+    padding-bottom: $container-padding-x;
+}
+
+@include media-breakpoint-down(md) {
+        
+    .content-area {
+        height: 100% !important;
+        max-height: 100% !important;
+    }
+}

src/layout/card/content/NitroCardContentView.tsx

@@ -4,7 +4,7 @@ import { NitroCardContentViewProps } from './NitroCardContextView.types';
 export const NitroCardContentView: FC<NitroCardContentViewProps> = props =>
 {
     return (
-        <div className="bg-light p-2 content-area">
+        <div className="container-fluid bg-light content-area">
             { props.children }
         </div>
     );

src/layout/card/header/NitroCardHeaderView.tsx

@@ -6,7 +6,7 @@ export const NitroCardHeaderView: FC<NitroCardHeaderViewProps> = props =>
     const { headerText = null, onCloseClick = null } = props;
 
     return (
-        <div className="drag-handler d-flex align-items-center bg-primary px-2 py-1 nitro-card-header">
+        <div className="drag-handler container-fluid d-flex align-items-center bg-primary py-1 nitro-card-header">
             <div className="d-flex flex-grow-1 justify-content-center align-items-center">
                 <div className="h4 m-0 text-white text-shadow">{ headerText }</div>
             </div>

src/layout/card/simple-header/NitroCardSimpleHeaderView.tsx

@@ -6,7 +6,7 @@ export const NitroCardSimpleHeaderView: FC<NitroCardSimpleHeaderViewProps> = pro
     const { headerText = null, onCloseClick = null } = props;
 
     return (
-        <div className="d-flex align-items-center bg-light">
+        <div className="d-flex container-fluid align-items-center bg-light">
             <div className="col-1"></div>
             <div className="d-flex bg-primary-split flex-grow-1 justify-content-center align-items-center border border-top-0 rounded-bottom px-2 py-1">
                 <div className="h5 m-0 text-white text-shadow">{ headerText }</div>

src/layout/card/tabs/NitroCardTabsView.scss

@@ -1,6 +1,6 @@
 .nitro-card-tabs {
     min-height: $nitro-card-tabs-height;
     max-height: $nitro-card-tabs-height;
-}
 
-@import './tabs-item/NitroCardTabsItemView';
+    @import './tabs-item/NitroCardTabsItemView';
+}

src/layout/card/tabs/NitroCardTabsView.tsx

@@ -4,8 +4,10 @@ import { NitroCardTabsViewProps } from './NitroCardTabsView.types';
 export const NitroCardTabsView: FC<NitroCardTabsViewProps> = props =>
 {
     return (
-        <ul className="nav nav-tabs justify-content-center bg-secondary px-2 pt-1 nitro-card-tabs">
+        <div className="container-fluid d-flex bg-secondary pt-1 nitro-card-tabs justify-content-center">
+            <ul className="nav nav-tabs">
                 { props.children }
             </ul>
+        </div>
     );
 }

src/layout/card/tabs/tabs-item/NitroCardTabsItemView.scss

@@ -0,0 +1,6 @@
+.nav-item {
+
+    &:last-child() {
+        margin-right: 0 !important;
+    }
+}

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

@@ -21,14 +21,14 @@ export const CatalogLayoutDefaultView: FC<CatalogLayoutDefaultViewProps> = props
                 <CatalogPageOffersView offers={ pageParser.offers } />
             </div>
             { !product &&
-                <div className="position-relative d-flex flex-column col justify-content-center align-items-center">
+                <div className="position-relative d-flex flex-column col-5 justify-content-center align-items-center">
                     <div className="d-block mb-2">
                         <img alt="" src={ GetCatalogPageImage(pageParser, 1) } />
                     </div>
                     <div className="fs-6 text-center text-black lh-sm overflow-hidden">{ GetCatalogPageText(pageParser, 0) }</div>
                 </div> }
             { product &&
-                <div className="position-relative d-flex flex-column col">
+                <div className="position-relative d-flex flex-column col-5">
                     <RoomPreviewerView roomPreviewer={ roomPreviewer } height={ 140 } />
                     { product.uniqueLimitedItem &&
                         <LimitedEditionCompletePlateView uniqueLimitedItemsLeft={ product.uniqueLimitedItemsLeft } uniqueLimitedSeriesSize={ product.uniqueLimitedSeriesSize } /> }

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

@@ -21,7 +21,7 @@ export const CatalogLayoutSingleBundleView: FC<CatalogLayoutSingleBundleViewProp
                         }) }
                 </div>
             </div>
-            <div className="position-relative d-flex flex-column col justify-content-center align-items-center">
+            <div className="position-relative d-flex flex-column col-5 justify-content-center align-items-center">
                 <div className="d-block mb-2">
                     <img alt="" src={ GetCatalogPageImage(pageParser, 1) } />
                 </div>

src/views/hotel-view/HotelView.tsx

@@ -1,9 +1,31 @@
-import { Nitro } from 'nitro-renderer';
+import { Nitro, RoomSessionEvent } from 'nitro-renderer';
+import { useCallback, useState } from 'react';
+import { useRoomSessionManagerEvent } from '../../hooks/events/nitro/session/room-session-manager-event';
 import { GetConfiguration } from '../../utils/GetConfiguration';
 import { HotelViewProps } from './HotelView.types';
 
 export function HotelView(props: HotelViewProps): JSX.Element
 {
+    const [ isVisible, setIsVisible ] = useState(true);
+
+    const onRoomSessionEvent = useCallback((event: RoomSessionEvent) =>
+    {
+        switch(event.type)
+        {
+            case RoomSessionEvent.CREATED:
+                setIsVisible(false);
+                return;
+            case RoomSessionEvent.ENDED:
+                setIsVisible(event.openLandingView);
+                return;
+        }
+    }, []);
+
+    useRoomSessionManagerEvent(RoomSessionEvent.CREATED, onRoomSessionEvent);
+    useRoomSessionManagerEvent(RoomSessionEvent.ENDED, onRoomSessionEvent);
+
+    if(!isVisible) return null;
+
     const backgroundColor = GetConfiguration('hotelview.images')['background.colour'];
     const background      = Nitro.instance.core.configuration.interpolate(GetConfiguration('hotelview.images')['background']);
     const sun             = Nitro.instance.core.configuration.interpolate(GetConfiguration('hotelview.images')['sun']);

src/views/inventory/InventoryView.scss

@@ -2,8 +2,8 @@
     width: 475px;
 
     .content-area {
-        height: 243.5px;
+        height: calc(220px + (#{$container-padding-x} * 2));
-        max-height: 243.5px;
+        max-height: calc(220px + (#{$container-padding-x} * 2));
     }
 
     .empty-image {

src/views/inventory/views/badge/results/InventoryBadgeResultsView.scss

@@ -1,5 +1,5 @@
 .badge-item-container {
-    height: 144px;
+    height: 139px;
-    max-height: 144px;
+    max-height: 139px;
     overflow-y: auto;
 }

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

@@ -70,7 +70,7 @@ export const InventoryBotView: FC<InventoryBotViewProps> = props =>
                 <div className="col-5 d-flex justify-content-center align-items-center">
                     <div className="empty-image"></div>
                 </div>
-                <div className="d-flex flex-column col justify-content-center">
+                <div className="d-flex flex-column col-7 justify-content-center">
                     <div className="h5 m-0 text-black fw-bold m-0 mb-2">
                         { LocalizeText('inventory.empty.bots.title') }
                     </div>
@@ -81,11 +81,11 @@ export const InventoryBotView: FC<InventoryBotViewProps> = props =>
     }
 
     return (
-        <div className="row h-100">
+        <div className="row">
             <div className="col-7">
                 <InventoryBotResultsView botItems={ botItems }  />
             </div>
-            <div className="d-flex flex-column col justify-space-between">
+            <div className="d-flex flex-column col-5 justify-space-between">
                 <RoomPreviewerView roomPreviewer={ roomPreviewer } height={ 140 } />
                 { botItem && <div className="d-flex flex-column flex-grow-1">
                     <p className="flex-grow-1 fs-6 text-black my-2">{ botItem.botData.name }</p>

src/views/inventory/views/bot/results/InventoryBotResultsView.scss

@@ -1,5 +1,5 @@
 .bot-item-container {
-    height: 226px;
+    height: 220px;
-    max-height: 226px;
+    max-height: 220px;
     overflow-y: auto;
 }

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

@@ -105,7 +105,7 @@ export const InventoryFurnitureView: FC<InventoryFurnitureViewProps> = props =>
                 <div className="col-5 d-flex justify-content-center align-items-center">
                     <div className="empty-image"></div>
                 </div>
-                <div className="d-flex flex-column col justify-content-center">
+                <div className="d-flex flex-column col-7 justify-content-center">
                     <div className="h5 m-0 text-black fw-bold m-0 mb-2">
                         { LocalizeText('inventory.empty.title') }
                     </div>
@@ -116,12 +116,12 @@ export const InventoryFurnitureView: FC<InventoryFurnitureViewProps> = props =>
     }
 
     return (
-        <div className="row h-100">
+        <div className="row">
             <div className="col-7">
                 <InventoryFurnitureSearchView groupItems={ groupItems } setGroupItems={ setFilteredGroupItems } />
                 <InventoryFurnitureResultsView groupItems={ filteredGroupItems }  />
             </div>
-            <div className="position-relative d-flex flex-column col justify-space-between">
+            <div className="position-relative d-flex flex-column col-5 justify-space-between">
                 <RoomPreviewerView roomPreviewer={ roomPreviewer } height={ 140 } />
                 { groupItem && groupItem.stuffData.isUnique &&
                     <div className="position-absolute limited-edition-info-container">

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

@@ -1,5 +1,5 @@
 .furni-item-container {
-    height: 192px;
+    height: 188px;
-    max-height: 192px;
+    max-height: 188px;
     overflow-y: auto;
 }

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

@@ -70,7 +70,7 @@ export const InventoryPetView: FC<InventoryPetViewProps> = props =>
                 <div className="col-5 d-flex justify-content-center align-items-center">
                     <div className="empty-image"></div>
                 </div>
-                <div className="d-flex flex-column col justify-content-center">
+                <div className="d-flex flex-column col-7 justify-content-center">
                     <div className="h5 m-0 text-black fw-bold m-0 mb-2">
                         { LocalizeText('inventory.empty.pets.title') }
                     </div>
@@ -85,7 +85,7 @@ export const InventoryPetView: FC<InventoryPetViewProps> = props =>
             <div className="col-7">
                 <InventoryPetResultsView petItems={ petItems }  />
             </div>
-            <div className="d-flex flex-column col justify-space-between">
+            <div className="d-flex flex-column col-5 justify-space-between">
                 <RoomPreviewerView roomPreviewer={ roomPreviewer } height={ 140 } />
                 { petItem && <div className="d-flex flex-column flex-grow-1">
                     <p className="flex-grow-1 fs-6 text-black my-2">{ petItem.petData.name }</p>

src/views/inventory/views/pet/results/InventoryPetResultsView.scss

@@ -1,5 +1,5 @@
 .pet-item-container {
-    height: 226px;
+    height: 220px;
-    max-height: 226px;
+    max-height: 220px;
     overflow-y: auto;
 }

src/views/room-previewer/RoomPreviewerView.scss

@@ -3,7 +3,7 @@
     width: 100%;
 
     .room-preview-image {
-        position: absolute;
+        position: relative;
         top: 0;
         left: 0;
         height: 100%;

src/views/toolbar/ToolbarView.scss

@@ -3,7 +3,7 @@
     bottom: 0;
     left: 0;
     width: 100%;
-    height: 55px;
+    height: $toolbar-height;
     z-index: $toolbar-zindex;
     
     .nitro-toolbar {