From eeee644bad8848879c0d1d0545cf9c857332c0f7 Mon Sep 17 00:00:00 2001
From: Layne <laynebalsters@gmail.com>
Date: Sat, 19 Jun 2021 23:33:08 -0400
Subject: [PATCH] scroll/resizable

---
 src/assets/styles/scrollbars.scss             | 14 ++++--
 src/views/catalog/CatalogView.scss            |  7 ++-
 src/views/catalog/CatalogView.tsx             |  4 +-
 .../navigation/CatalogNavigationView.scss     |  2 -
 .../navigation/CatalogNavigationView.tsx      |  4 +-
 .../default/CatalogLayoutDefaultView.tsx      |  2 +-
 .../CatalogLayoutFrontpage4View.scss          |  1 +
 .../page/offers/CatalogPageOffersView.scss    |  2 -
 .../page/offers/CatalogPageOffersView.tsx     |  2 +-
 .../CatalogLayoutSearchResultView.tsx         |  2 +-
 .../offers/CatalogSearchResultOffersView.scss |  2 -
 .../offers/CatalogSearchResultOffersView.tsx  |  2 +-
 src/views/inventory/InventoryView.scss        |  7 ++-
 .../views/badge/InventoryBadgeView.tsx        | 44 ++++++++++---------
 .../results/InventoryBadgeResultsView.scss    |  4 ++
 .../results/InventoryBadgeResultsView.tsx     |  9 ++--
 .../inventory/views/bot/InventoryBotView.tsx  |  2 +-
 .../bot/results/InventoryBotResultsView.tsx   |  9 ++--
 .../furniture/InventoryFurnitureView.tsx      |  2 +-
 .../item/InventoryFurnitureItemView.tsx       |  3 +-
 .../results/InventoryFurnitureResultsView.tsx |  9 ++--
 .../inventory/views/pet/InventoryPetView.tsx  |  2 +-
 .../pet/results/InventoryPetResultsView.tsx   |  9 ++--
 src/views/navigator/NavigatorView.scss        |  5 ++-
 src/views/navigator/NavigatorView.tsx         |  2 +
 .../NavigatorSearchResultSetView.tsx          | 10 +++--
 26 files changed, 90 insertions(+), 71 deletions(-)

diff --git a/src/assets/styles/scrollbars.scss b/src/assets/styles/scrollbars.scss
index d59a0063..19ad9c90 100644
--- a/src/assets/styles/scrollbars.scss
+++ b/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;
+}
diff --git a/src/views/catalog/CatalogView.scss b/src/views/catalog/CatalogView.scss
index 681824ef..3d0f76d8 100644
--- a/src/views/catalog/CatalogView.scss
+++ b/src/views/catalog/CatalogView.scss
@@ -2,8 +2,11 @@
     width: 620px;
 
     .content-area {
-        height: 330px;
-        max-height: 330px;
+        min-height: 350px;
+        height: 350px;
+        max-height: 700px;
+        resize: vertical;
+        overflow:auto;
     }
 }
 
diff --git a/src/views/catalog/CatalogView.tsx b/src/views/catalog/CatalogView.tsx
index 53f3cf98..4ee80c6a 100644
--- a/src/views/catalog/CatalogView.tsx
+++ b/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>
diff --git a/src/views/catalog/views/navigation/CatalogNavigationView.scss b/src/views/catalog/views/navigation/CatalogNavigationView.scss
index 7ae55335..e094aaac 100644
--- a/src/views/catalog/views/navigation/CatalogNavigationView.scss
+++ b/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;
     }
 }
diff --git a/src/views/catalog/views/navigation/CatalogNavigationView.tsx b/src/views/catalog/views/navigation/CatalogNavigationView.tsx
index 5fc30357..a9fb07c9 100644
--- a/src/views/catalog/views/navigation/CatalogNavigationView.tsx
+++ b/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="navigation-container m-1">
+            <div className="border border-2 rounded overflow-hidden nitro-catalog-navigation p-1 h-100">
+                <div className="navigation-container h-100">
                     <CatalogNavigationSetView page={ page } isFirstSet={ true } />
                 </div>
             </div>
diff --git a/src/views/catalog/views/page/layout/default/CatalogLayoutDefaultView.tsx b/src/views/catalog/views/page/layout/default/CatalogLayoutDefaultView.tsx
index 1bd9fa52..81276a80 100644
--- a/src/views/catalog/views/page/layout/default/CatalogLayoutDefaultView.tsx
+++ b/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 &&
diff --git a/src/views/catalog/views/page/layout/frontpage4/CatalogLayoutFrontpage4View.scss b/src/views/catalog/views/page/layout/frontpage4/CatalogLayoutFrontpage4View.scss
index 26906368..a08568d7 100644
--- a/src/views/catalog/views/page/layout/frontpage4/CatalogLayoutFrontpage4View.scss
+++ b/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;
diff --git a/src/views/catalog/views/page/offers/CatalogPageOffersView.scss b/src/views/catalog/views/page/offers/CatalogPageOffersView.scss
index c883abb7..28192aa4 100644
--- a/src/views/catalog/views/page/offers/CatalogPageOffersView.scss
+++ b/src/views/catalog/views/page/offers/CatalogPageOffersView.scss
@@ -1,5 +1,3 @@
 .catalog-offers-container {
-    height: 314px;
-    max-height: 314px;
     overflow-y: auto;
 }
diff --git a/src/views/catalog/views/page/offers/CatalogPageOffersView.tsx b/src/views/catalog/views/page/offers/CatalogPageOffersView.tsx
index c44ebbda..9c67deed 100644
--- a/src/views/catalog/views/page/offers/CatalogPageOffersView.tsx
+++ b/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 } />
diff --git a/src/views/catalog/views/page/search-result/CatalogLayoutSearchResultView.tsx b/src/views/catalog/views/page/search-result/CatalogLayoutSearchResultView.tsx
index 5a0eb885..2b5601c4 100644
--- a/src/views/catalog/views/page/search-result/CatalogLayoutSearchResultView.tsx
+++ b/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 &&
diff --git a/src/views/catalog/views/page/search-result/offers/CatalogSearchResultOffersView.scss b/src/views/catalog/views/page/search-result/offers/CatalogSearchResultOffersView.scss
index c883abb7..28192aa4 100644
--- a/src/views/catalog/views/page/search-result/offers/CatalogSearchResultOffersView.scss
+++ b/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;
 }
diff --git a/src/views/catalog/views/page/search-result/offers/CatalogSearchResultOffersView.tsx b/src/views/catalog/views/page/search-result/offers/CatalogSearchResultOffersView.tsx
index 58f4a331..30f5a670 100644
--- a/src/views/catalog/views/page/search-result/offers/CatalogSearchResultOffersView.tsx
+++ b/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));
diff --git a/src/views/inventory/InventoryView.scss b/src/views/inventory/InventoryView.scss
index 0bec301d..66c21ce4 100644
--- a/src/views/inventory/InventoryView.scss
+++ b/src/views/inventory/InventoryView.scss
@@ -2,8 +2,11 @@
     width: 475px;
 
     .content-area {
-        height: calc(220px + (#{$container-padding-x} * 2));
-        max-height: calc(220px + (#{$container-padding-x} * 2));
+        min-height: 240px;
+        height: 240px;
+        max-height: 430px;
+        resize: vertical;
+        overflow:auto;
     }
 
     .empty-image {
diff --git a/src/views/inventory/views/badge/InventoryBadgeView.tsx b/src/views/inventory/views/badge/InventoryBadgeView.tsx
index eb73bc95..6b8c4f9c 100644
--- a/src/views/inventory/views/badge/InventoryBadgeView.tsx
+++ b/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 col-7">
-                    <InventoryBadgeResultsView badges={ badges } activeBadges={ activeBadges }  />
-                </div>
-                <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 className="d-flex flex-column h-100 overflow-hidden">
+                <div className="row inventory-badge-overflow">
+                    <div className="col-7 d-flex flex-column h-100">
+                        <InventoryBadgeResultsView badges={ badges } activeBadges={ activeBadges }  />
                     </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 className="col">
+                        <p className="mb-1 text-black">{ LocalizeText('inventory.badges.activebadges') }</p>
+                        <InventoryActiveBadgeResultsView badges={ activeBadges }  />
+                    </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>
         </>
     );
diff --git a/src/views/inventory/views/badge/results/InventoryBadgeResultsView.scss b/src/views/inventory/views/badge/results/InventoryBadgeResultsView.scss
index 86bc3042..e9a6e5ee 100644
--- a/src/views/inventory/views/badge/results/InventoryBadgeResultsView.scss
+++ b/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)
+}
diff --git a/src/views/inventory/views/badge/results/InventoryBadgeResultsView.tsx b/src/views/inventory/views/badge/results/InventoryBadgeResultsView.tsx
index 8a57631a..d563979b 100644
--- a/src/views/inventory/views/badge/results/InventoryBadgeResultsView.tsx
+++ b/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">
-            <ScrollableAreaView className="row row-cols-5 align-content-start g-0 w-100">
-                { badges && (badges.length > 0) && badges.map((code, index) =>
+        <div className="h-100 overflow-hidden">
+            <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) =>
                     {
                         if(activeBadges.indexOf(code) >= 0) return null;
                         
                         return <InventoryBadgeItemView key={ index } badge={ code } />
                     }) }
-            </ScrollableAreaView>
+            </div>
         </div>
     );
 }
diff --git a/src/views/inventory/views/bot/InventoryBotView.tsx b/src/views/inventory/views/bot/InventoryBotView.tsx
index 9c255460..0dbf85e4 100644
--- a/src/views/inventory/views/bot/InventoryBotView.tsx
+++ b/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">
diff --git a/src/views/inventory/views/bot/results/InventoryBotResultsView.tsx b/src/views/inventory/views/bot/results/InventoryBotResultsView.tsx
index 14503fb8..05e044fb 100644
--- a/src/views/inventory/views/bot/results/InventoryBotResultsView.tsx
+++ b/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">
-            <ScrollableAreaView className="row row-cols-5 align-content-start g-0 w-100">
-                { botItems && (botItems.length > 0) && botItems.map((item, index) =>
+        <div className="h-100 overflow-hidden">
+            <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) =>
                     {
                         return <InventoryBotItemView key={ index } botItem={ item } />
                     }) }
-            </ScrollableAreaView>
+            </div>
         </div>
     );
 }
diff --git a/src/views/inventory/views/furniture/InventoryFurnitureView.tsx b/src/views/inventory/views/furniture/InventoryFurnitureView.tsx
index 3152404a..9cf4f4ac 100644
--- a/src/views/inventory/views/furniture/InventoryFurnitureView.tsx
+++ b/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>
diff --git a/src/views/inventory/views/furniture/item/InventoryFurnitureItemView.tsx b/src/views/inventory/views/furniture/item/InventoryFurnitureItemView.tsx
index f86f611d..250e604d 100644
--- a/src/views/inventory/views/furniture/item/InventoryFurnitureItemView.tsx
+++ b/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 } />
diff --git a/src/views/inventory/views/furniture/results/InventoryFurnitureResultsView.tsx b/src/views/inventory/views/furniture/results/InventoryFurnitureResultsView.tsx
index 45318dae..4b3ae59b 100644
--- a/src/views/inventory/views/furniture/results/InventoryFurnitureResultsView.tsx
+++ b/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">
-            <ScrollableAreaView className="row row-cols-5 align-content-start g-0 w-100">
-                { groupItems && (groupItems.length > 0) && groupItems.map((item, index) =>
+        <div className="h-100 overflow-hidden">
+            <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) =>
                     {
                         return <InventoryFurnitureItemView key={ index } groupItem={ item } />
                     }) }
-            </ScrollableAreaView>
+            </div>
         </div>
     );
 }
diff --git a/src/views/inventory/views/pet/InventoryPetView.tsx b/src/views/inventory/views/pet/InventoryPetView.tsx
index fc38536f..7e6f849e 100644
--- a/src/views/inventory/views/pet/InventoryPetView.tsx
+++ b/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">
diff --git a/src/views/inventory/views/pet/results/InventoryPetResultsView.tsx b/src/views/inventory/views/pet/results/InventoryPetResultsView.tsx
index 2dc685da..03fc893e 100644
--- a/src/views/inventory/views/pet/results/InventoryPetResultsView.tsx
+++ b/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">
-            <ScrollableAreaView className="row row-cols-5 align-content-start g-0 w-100">
-                { petItems && (petItems.length > 0) && petItems.map((item, index) =>
+        <div className="h-100 overflow-hidden">
+            <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) =>
                     {
                         return <InventoryPetItemView key={ index } petItem={ item } />
                     }) }
-            </ScrollableAreaView>
+            </div>
         </div>
     );
 }
diff --git a/src/views/navigator/NavigatorView.scss b/src/views/navigator/NavigatorView.scss
index 854d721b..9efa61f2 100644
--- a/src/views/navigator/NavigatorView.scss
+++ b/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;
     }
 }
 
diff --git a/src/views/navigator/NavigatorView.tsx b/src/views/navigator/NavigatorView.tsx
index 3bf9a5b4..6a81cf73 100644
--- a/src/views/navigator/NavigatorView.tsx
+++ b/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>
diff --git a/src/views/navigator/views/search-result-set/NavigatorSearchResultSetView.tsx b/src/views/navigator/views/search-result-set/NavigatorSearchResultSetView.tsx
index 741d8d9b..f0c365a4 100644
--- a/src/views/navigator/views/search-result-set/NavigatorSearchResultSetView.tsx
+++ b/src/views/navigator/views/search-result-set/NavigatorSearchResultSetView.tsx
@@ -12,10 +12,12 @@ export const NavigatorSearchResultSetView: FC<NavigatorSearchResultSetViewProps>
 
     return (
         <>
-            { (searchResult.results.map((result, index) =>
-                {
-                    return <NavigatorSearchResultView key={ index } searchResult={ result } />
-                })) }
+            <div className="h-100 overflow-auto">
+                { (searchResult.results.map((result, index) =>
+                    {
+                        return <NavigatorSearchResultView key={ index } searchResult={ result } />
+                    })) }
+            </div>
         </>
     );
 }