scroll/resizable

src/assets/styles/scrollbars.scss

@@ -1,20 +1,26 @@
 ::-webkit-scrollbar {
-    width: 5px;
+    width: 7px;
     height: 5px;
 }
 
 ::-webkit-scrollbar-track {
     border-radius: $border-radius;
-    background: rgba(transparent, 0.1);
+    background: rgba($primary,.4);
+    box-shadow:inset 1px 0 rgba($black,.2);
 }
 
 ::-webkit-scrollbar-thumb {
     border-radius: $border-radius;
-    background: rgba($white, 0.7);
+    background: #DCDCDC;
+    box-shadow:inset 1px 4px $white, inset -1px -4px rgba($black,.2), 0 1px rgba($black,.2);
     width: 4px;
-    border-left: 1px solid transparent;
 }
 
 ::-webkit-scrollbar-thumb:hover {
     background: rgba($white, 1);
 }
+
+::-webkit-scrollbar-thumb:active {
+    box-shadow: inset 1px 4px rgba($white,.4), inset -1px -4px rgba($black,.2), 0 1px rgba($black,.2);
+    background:#C4C4C4;
+}

src/views/catalog/CatalogView.scss

@@ -2,8 +2,11 @@
     width: 620px;
 
     .content-area {
-        height: 330px;
+        min-height: 350px;
-        max-height: 330px;
+        height: 350px;
+        max-height: 700px;
+        resize: vertical;
+        overflow:auto;
     }
 }
 

src/views/catalog/CatalogView.tsx

@@ -105,10 +105,10 @@ export const CatalogView: FC<CatalogViewProps> = props =>
                     <NitroCardContentView>
                         <div className="row h-100">
                             { pageParser && !pageParser.frontPageItems.length &&
-                                <div className="col-3">
+                                <div className="col-3 d-flex flex-column h-100">
                                     <CatalogNavigationView page={ currentNavigationPage } />
                                 </div> }
-                            <div className="col">
+                            <div className="col h-100">
                                 <CatalogPageView roomPreviewer={ roomPreviewer } />
                             </div>
                         </div>

src/views/catalog/views/navigation/CatalogNavigationView.scss

@@ -3,8 +3,6 @@
     background-color: $grid-bg-color !important;
 
     .navigation-container {
-        height: 270px;
-        max-height: 270px;
         overflow-y: auto;
     }
 }

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

@@ -20,8 +20,8 @@ export const CatalogNavigationView: FC<CatalogNavigationViewProps> = props =>
     return (
         <>
             <CatalogSearchView />
-            <div className="border border-2 rounded overflow-hidden nitro-catalog-navigation">
+            <div className="border border-2 rounded overflow-hidden nitro-catalog-navigation p-1 h-100">
-                <div className="navigation-container m-1">
+                <div className="navigation-container h-100">
                     <CatalogNavigationSetView page={ page } isFirstSet={ true } />
                 </div>
             </div>

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

@@ -17,7 +17,7 @@ export const CatalogLayoutDefaultView: FC<CatalogLayoutDefaultViewProps> = props
 
     return (
         <div className="row h-100">
-            <div className="col-7">
+            <div className="col-7 h-100">
                 <CatalogPageOffersView offers={ pageParser.offers } />
             </div>
             { !product &&

src/views/catalog/views/page/layout/frontpage4/CatalogLayoutFrontpage4View.scss

@@ -1,4 +1,5 @@
 .nitro-catalog-layout-frontpage4 {
+    max-height:600px;
 
     .front-page-item {
         position: relative;

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

@@ -1,5 +1,3 @@
 .catalog-offers-container {
-    height: 314px;
-    max-height: 314px;
     overflow-y: auto;
 }

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

@@ -22,7 +22,7 @@ export const CatalogPageOffersView: FC<CatalogPageOffersViewProps> = props =>
     }, [ offers, dispatchCatalogState ]);
 
     return (
-        <div className="row row-cols-5 align-content-start g-0 mb-n1 w-100 catalog-offers-container">
+        <div className="row row-cols-5 align-content-start g-0 mb-n1 w-100 catalog-offers-container h-100">
             { offers && (offers.length > 0) && offers.map((offer, index) =>
                 {
                     return <CatalogPageOfferView key={ index } isActive={ (activeOffer === offer) } offer={ offer } />

src/views/catalog/views/page/search-result/CatalogLayoutSearchResultView.tsx

@@ -17,7 +17,7 @@ export const CatalogLayoutSearchResultView: FC<CatalogLayoutSearchResultViewProp
 
     return (
         <div className="row h-100">
-            <div className="col-7">
+            <div className="col-7 h-100">
                 <CatalogSearchResultOffersView offers={ furnitureDatas } />
             </div>
             { product &&

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

@@ -1,5 +1,3 @@
 .catalog-offers-container {
-    height: 314px;
-    max-height: 314px;
     overflow-y: auto;
 }

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

@@ -19,7 +19,7 @@ export const CatalogSearchResultOffersView: FC<CatalogSearchResultOffersViewProp
     }, [ offers ]);
 
     return (
-        <div className="row row-cols-5 align-content-start g-0 mb-n1 w-100 catalog-offers-container">
+        <div className="row row-cols-5 align-content-start g-0 mb-n1 w-100 catalog-offers-container h-100">
             { offers && (offers.length > 0) && offers.map((offer, index) =>
                 {
                     const isActive = (activeOffer && (activeOffer.products[0].furniClassId === offer.id));

src/views/inventory/InventoryView.scss

@@ -2,8 +2,11 @@
     width: 475px;
 
     .content-area {
-        height: calc(220px + (#{$container-padding-x} * 2));
+        min-height: 240px;
-        max-height: calc(220px + (#{$container-padding-x} * 2));
+        height: 240px;
+        max-height: 430px;
+        resize: vertical;
+        overflow:auto;
     }
 
     .empty-image {

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

@@ -76,27 +76,31 @@ export const InventoryBadgeView: FC<InventoryBadgeViewProps> = props =>
 
     return (
         <>
-            <div className="row h-100">
+            <div className="d-flex flex-column h-100 overflow-hidden">
-                <div className="d-flex flex-column col-7">
+                <div className="row inventory-badge-overflow">
-                    <InventoryBadgeResultsView badges={ badges } activeBadges={ activeBadges }  />
+                    <div className="col-7 d-flex flex-column h-100">
-                </div>
+                        <InventoryBadgeResultsView badges={ badges } activeBadges={ activeBadges }  />
-                <div className="col">
-                    <p className="mb-1 text-black">{ LocalizeText('inventory.badges.activebadges') }</p>
-                    <InventoryActiveBadgeResultsView badges={ activeBadges }  />
-                </div>
-            </div>
-            { badge && badge.length &&
-                <div className="d-flex justify-content-between align-items-center bg-secondary rounded px-2 py-1 mb-1">
-                    <div className="d-flex flex-grow-1 current-badge-container">
-                        <BadgeImageView badgeCode={ badge } />
-                        <div className="d-flex flex-column justify-content-center flex-grow-1 ms-2">
-                            <p className="mb-0">{ LocalizeBadgeName(badge) }</p>
-                        </div>
                     </div>
-                    <button type="button" className={ 'btn btn-' + (isWearingBadge(badge) ? 'danger' : 'success') } disabled={ !canWearBadges() } onClick={ toggleBadge }>{ LocalizeText(isWearingBadge(badge) ? 'inventory.badges.clearbadge' : 'inventory.badges.wearbadge')}</button>
+                    <div className="col">
-                </div> }
+                        <p className="mb-1 text-black">{ LocalizeText('inventory.badges.activebadges') }</p>
-            <div className="d-flex justify-content-center align-items-center bg-primary rounded p-1">
+                        <InventoryActiveBadgeResultsView badges={ activeBadges }  />
-                <div className="h6 m-0 text-white">{ LocalizeText('achievements_score_description', [ 'score' ], [ '0' ]) }</div>
+                    </div>
+                </div>
+                <div className="my-auto">
+                    { badge && badge.length &&
+                        <div className="d-flex justify-content-between align-items-center bg-secondary rounded px-2 py-1 mb-1 mt-1">
+                            <div className="d-flex flex-grow-1 current-badge-container">
+                                <BadgeImageView badgeCode={ badge } />
+                                <div className="d-flex flex-column justify-content-center flex-grow-1 ms-2">
+                                    <p className="mb-0">{ LocalizeBadgeName(badge) }</p>
+                                </div>
+                            </div>
+                            <button type="button" className={ 'btn btn-' + (isWearingBadge(badge) ? 'danger' : 'success') } disabled={ !canWearBadges() } onClick={ toggleBadge }>{ LocalizeText(isWearingBadge(badge) ? 'inventory.badges.clearbadge' : 'inventory.badges.wearbadge')}</button>
+                        </div> }
+                    <div className="d-flex justify-content-center align-items-center bg-primary rounded p-1">
+                        <div className="h6 m-0 text-white">{ LocalizeText('achievements_score_description', [ 'score' ], [ '0' ]) }</div>
+                    </div>
+                </div>
             </div>
         </>
     );

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

@@ -3,3 +3,7 @@
     max-height: 139px;
     overflow-y: auto;
 }
+
+.inventory-badge-overflow {
+    height:calc(100% - 86px)
+}

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

@@ -1,5 +1,4 @@
 import { FC } from 'react';
-import { ScrollableAreaView } from '../../../../../layout/scrollable-area/ScrollableAreaView';
 import { InventoryBadgeItemView } from '../item/InventoryBadgeItemView';
 import { InventoryBadgeResultsViewProps } from './InventoryBadgeResultsView.types';
 
@@ -8,15 +7,15 @@ export const InventoryBadgeResultsView: FC<InventoryBadgeResultsViewProps> = pro
     const { badges = [], activeBadges = [] } = props;
     
     return (
-        <div className="d-flex flex-grow-1">
+        <div className="h-100 overflow-hidden">
-            <ScrollableAreaView className="row row-cols-5 align-content-start g-0 w-100">
+            <div className="row row-cols-5 align-content-start g-0 w-100 h-100 overflow-auto">
-                { badges && (badges.length > 0) && badges.map((code, index) =>
+            { badges && (badges.length > 0) && badges.map((code, index) =>
                     {
                         if(activeBadges.indexOf(code) >= 0) return null;
                         
                         return <InventoryBadgeItemView key={ index } badge={ code } />
                     }) }
-            </ScrollableAreaView>
+            </div>
         </div>
     );
 }

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

@@ -82,7 +82,7 @@ export const InventoryBotView: FC<InventoryBotViewProps> = props =>
 
     return (
         <div className="row h-100">
-            <div className="d-flex flex-column col-7">
+            <div className="col-7 d-flex flex-column h-100">
                 <InventoryBotResultsView botItems={ botItems }  />
             </div>
             <div className="d-flex flex-column col-5 justify-space-between">

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

@@ -1,5 +1,4 @@
 import { FC } from 'react';
-import { ScrollableAreaView } from '../../../../../layout/scrollable-area/ScrollableAreaView';
 import { InventoryBotItemView } from '../item/InventoryBotItemView';
 import { InventoryBotResultsViewProps } from './InventoryBotResultsView.types';
 
@@ -8,13 +7,13 @@ export const InventoryBotResultsView: FC<InventoryBotResultsViewProps> = props =
     const { botItems = [] } = props;
     
     return (
-        <div className="d-flex flex-grow-1">
+        <div className="h-100 overflow-hidden">
-            <ScrollableAreaView className="row row-cols-5 align-content-start g-0 w-100">
+            <div className="row row-cols-5 align-content-start g-0 w-100 h-100 overflow-auto">
-                { botItems && (botItems.length > 0) && botItems.map((item, index) =>
+            { botItems && (botItems.length > 0) && botItems.map((item, index) =>
                     {
                         return <InventoryBotItemView key={ index } botItem={ item } />
                     }) }
-            </ScrollableAreaView>
+            </div>
         </div>
     );
 }

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

@@ -117,7 +117,7 @@ export const InventoryFurnitureView: FC<InventoryFurnitureViewProps> = props =>
 
     return (
         <div className="row h-100">
-            <div className="d-flex flex-column col-7">
+            <div className="col-7 d-flex flex-column h-100">
                 <InventoryFurnitureSearchView groupItems={ groupItems } setGroupItems={ setFilteredGroupItems } />
                 <InventoryFurnitureResultsView groupItems={ filteredGroupItems }  />
             </div>

src/views/inventory/views/furniture/item/InventoryFurnitureItemView.tsx

@@ -41,7 +41,8 @@ export const InventoryFurnitureItemView: FC<InventoryFurnitureItemViewProps> = p
     return (
         <div className="col pe-1 pb-1 inventory-furniture-item-container">
             <div className={ 'position-relative border border-2 rounded inventory-furniture-item cursor-pointer ' + (isActive ? 'active ' : '') + (groupItem.stuffData.isUnique ? 'unique-item ' : '') } style={ { backgroundImage: imageUrl }} onMouseDown={ onMouseEvent } onMouseUp={ onMouseEvent } onMouseOut={ onMouseEvent }>
-                <span className="position-absolute badge border bg-danger px-1 rounded-circle">{ groupItem.getUnlockedCount() }</span>
+                {groupItem.getUnlockedCount() > 1 &&
+                    <span className="position-absolute badge border bg-danger px-1 rounded-circle">{groupItem.getUnlockedCount()}</span> }
                 { groupItem.stuffData.isUnique && 
                     <div className="position-absolute unique-item-counter">
                         <LimitedEditionStyledNumberView value={ groupItem.stuffData.uniqueNumber } />

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

@@ -1,5 +1,4 @@
 import { FC } from 'react';
-import { ScrollableAreaView } from '../../../../../layout/scrollable-area/ScrollableAreaView';
 import { InventoryFurnitureItemView } from '../item/InventoryFurnitureItemView';
 import { InventoryFurnitureResultsViewProps } from './InventoryFurnitureResultsView.types';
 
@@ -8,13 +7,13 @@ export const InventoryFurnitureResultsView: FC<InventoryFurnitureResultsViewProp
     const { groupItems = [] } = props;
 
     return (
-        <div className="d-flex flex-grow-1">
+        <div className="h-100 overflow-hidden">
-            <ScrollableAreaView className="row row-cols-5 align-content-start g-0 w-100">
+            <div className="row row-cols-5 align-content-start g-0 w-100 h-100 overflow-auto">
-                { groupItems && (groupItems.length > 0) && groupItems.map((item, index) =>
+            { groupItems && (groupItems.length > 0) && groupItems.map((item, index) =>
                     {
                         return <InventoryFurnitureItemView key={ index } groupItem={ item } />
                     }) }
-            </ScrollableAreaView>
+            </div>
         </div>
     );
 }

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

@@ -82,7 +82,7 @@ export const InventoryPetView: FC<InventoryPetViewProps> = props =>
 
     return (
         <div className="row h-100">
-            <div className="d-flex flex-column col-7">
+            <div className="col-7 d-flex flex-column h-100">
                 <InventoryPetResultsView petItems={ petItems }  />
             </div>
             <div className="d-flex flex-column col-5 justify-space-between">

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

@@ -1,5 +1,4 @@
 import { FC } from 'react';
-import { ScrollableAreaView } from '../../../../../layout/scrollable-area/ScrollableAreaView';
 import { InventoryPetItemView } from '../item/InventoryPetItemView';
 import { InventoryPetResultsViewProps } from './InventoryPetResultsView.types';
 
@@ -8,13 +7,13 @@ export const InventoryPetResultsView: FC<InventoryPetResultsViewProps> = props =
     const { petItems = [] } = props;
     
     return (
-        <div className="d-flex flex-grow-1">
+        <div className="h-100 overflow-hidden">
-            <ScrollableAreaView className="row row-cols-5 align-content-start g-0 w-100">
+            <div className="row row-cols-5 align-content-start g-0 w-100 h-100 overflow-auto">
-                { petItems && (petItems.length > 0) && petItems.map((item, index) =>
+            { petItems && (petItems.length > 0) && petItems.map((item, index) =>
                     {
                         return <InventoryPetItemView key={ index } petItem={ item } />
                     }) }
-            </ScrollableAreaView>
+            </div>
         </div>
     );
 }

src/views/navigator/NavigatorView.scss

@@ -2,8 +2,11 @@
     width: 400px;
 
     .content-area {
+        min-height: 400px;
         height: 400px;
-        max-height: 400px;
+        max-height: 700px;
+        resize: vertical;
+        overflow:auto;
     }
 }
 

src/views/navigator/NavigatorView.tsx

@@ -98,8 +98,10 @@ export const NavigatorView: FC<NavigatorViewProps> = props =>
                         </NitroCardTabsItemView>
                     </NitroCardTabsView>
                     <NitroCardContentView>
+                    <div className="d-flex flex-column h-100">
                         <NavigatorSearchView sendSearch={ sendSearch } />
                         <NavigatorSearchResultSetView />
+                    </div>
                     </NitroCardContentView>
                 </NitroCardView> }
         </NavigatorContextProvider>

src/views/navigator/views/search-result-set/NavigatorSearchResultSetView.tsx

@@ -12,10 +12,12 @@ export const NavigatorSearchResultSetView: FC<NavigatorSearchResultSetViewProps>
 
     return (
         <>
-            { (searchResult.results.map((result, index) =>
+            <div className="h-100 overflow-auto">
-                {
+                { (searchResult.results.map((result, index) =>
-                    return <NavigatorSearchResultView key={ index } searchResult={ result } />
+                    {
-                })) }
+                        return <NavigatorSearchResultView key={ index } searchResult={ result } />
+                    })) }
+            </div>
         </>
     );
 }