From a9d97efc9846ad4787ae98a5c82701defe25575f Mon Sep 17 00:00:00 2001
From: Bill <billsonnn@live.com>
Date: Thu, 23 Sep 2021 05:20:15 -0400
Subject: [PATCH] Inventory layout updates

---
 .../views/badge/InventoryBadgeView.tsx        | 58 +++++++++++++------
 .../inventory/views/bot/InventoryBotView.tsx  | 19 +++---
 .../furniture/InventoryFurnitureView.tsx      | 26 +++++----
 .../inventory/views/pet/InventoryPetView.tsx  | 17 +++---
 4 files changed, 75 insertions(+), 45 deletions(-)

diff --git a/src/views/inventory/views/badge/InventoryBadgeView.tsx b/src/views/inventory/views/badge/InventoryBadgeView.tsx
index 58ce4a56..3bcd03b6 100644
--- a/src/views/inventory/views/badge/InventoryBadgeView.tsx
+++ b/src/views/inventory/views/badge/InventoryBadgeView.tsx
@@ -74,33 +74,55 @@ export const InventoryBadgeView: FC<InventoryBadgeViewProps> = props =>
     }
 
     return (
-        <>
-            <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>
-                    <div className="col">
+        <div className="d-flex flex-column h-100 overflow-hidden">
+            <div className="row h-100">
+                <div className="d-flex flex-column col-7 h-100">
+                    <InventoryBadgeResultsView badges={ badges } activeBadges={ activeBadges } />
+                </div>
+                <div className="d-flex flex-column justify-content-between col-5 gap-2 h-100 overflow-hidden">
+                    <div className="d-flex flex-column overflow-hidden">
                         <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 className="d-flex flex-column gap-2">
+                            <div className="d-flex justify-content-between align-items-center">
+                                <div className="d-flex flex-grow-1 gap-2 align-items-center current-badge-container overflow-hidden">
+                                    <BadgeImageView badgeCode={ badge } />
+                                    <div className="flex-grow-1 text-black text-truncate">{ LocalizeBadgeName(badge) }</div>
                                 </div>
                             </div>
                             <button type="button" className={ 'btn btn-sm btn-' + (isWearingBadge(badge) ? 'danger' : 'success') } disabled={ !isWearingBadge(badge) && !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>
-        </>
+        </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>
+    //             <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-sm btn-' + (isWearingBadge(badge) ? 'danger' : 'success') } disabled={ !isWearingBadge(badge) && !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/bot/InventoryBotView.tsx b/src/views/inventory/views/bot/InventoryBotView.tsx
index 5ea3ef84..d4828b31 100644
--- a/src/views/inventory/views/bot/InventoryBotView.tsx
+++ b/src/views/inventory/views/bot/InventoryBotView.tsx
@@ -81,15 +81,18 @@ export const InventoryBotView: FC<InventoryBotViewProps> = props =>
 
     return (
         <div className="row h-100">
-            <div className="col-7 d-flex flex-column h-100">
-                <InventoryBotResultsView botItems={ botItems }  />
+            <div className="d-flex flex-column col-7 h-100">
+                <InventoryBotResultsView botItems={ botItems } />
             </div>
-            <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>
-                    { !!roomSession && <button type="button" className="btn btn-success btn-sm" onClick={ event => attemptBotPlacement(botItem) }>{ LocalizeText('inventory.furni.placetoroom') }</button> }
-                </div> }
+            <div className="d-flex flex-column col-5 gap-2 h-100 overflow-hidden">
+                <div className="position-relative d-flex flex-column overflow-auto h-100">
+                    <RoomPreviewerView roomPreviewer={ roomPreviewer } height={ 140 } />
+                </div>
+                { botItem &&
+                    <div className="d-flex flex-column gap-2">
+                        <p className="flex-grow-1 text-black text-truncate">{ botItem.botData.name }</p>
+                        { !!roomSession && <button type="button" className="btn btn-success btn-sm" onClick={ event => attemptBotPlacement(botItem) }>{ LocalizeText('inventory.furni.placetoroom') }</button> }
+                    </div> }
             </div>
         </div>
     );
diff --git a/src/views/inventory/views/furniture/InventoryFurnitureView.tsx b/src/views/inventory/views/furniture/InventoryFurnitureView.tsx
index 1df916ef..0a4f93cc 100644
--- a/src/views/inventory/views/furniture/InventoryFurnitureView.tsx
+++ b/src/views/inventory/views/furniture/InventoryFurnitureView.tsx
@@ -121,19 +121,21 @@ export const InventoryFurnitureView: FC<InventoryFurnitureViewProps> = props =>
                 <InventoryFurnitureSearchView groupItems={ groupItems } setGroupItems={ setFilteredGroupItems } />
                 <InventoryFurnitureResultsView groupItems={ filteredGroupItems }  />
             </div>
-            <div className="position-relative d-flex flex-column col-5 justify-space-between">
-                <RoomPreviewerView roomPreviewer={ roomPreviewer } height={ 140 } />
-                { groupItem && groupItem.stuffData.isUnique &&
-                    <div className="stuffdata-extra-container">
-                        <LimitedEditionCompactPlateView uniqueNumber={ groupItem.stuffData.uniqueNumber } uniqueSeries={ groupItem.stuffData.uniqueSeries } />
-                    </div> }
-                { (groupItem && groupItem.stuffData.rarityLevel > -1) &&
-                    <div className="stuffdata-extra-container">
-                        <RarityLevelView level={ groupItem.stuffData.rarityLevel } />
-                    </div> }
+            <div className="d-flex flex-column col-5 gap-2 h-100 overflow-hidden">
+                <div className="position-relative d-flex flex-column overflow-auto h-100">
+                    <RoomPreviewerView roomPreviewer={ roomPreviewer } height={ 140 } />
+                    { groupItem && groupItem.stuffData.isUnique &&
+                        <div className="stuffdata-extra-container">
+                            <LimitedEditionCompactPlateView uniqueNumber={ groupItem.stuffData.uniqueNumber } uniqueSeries={ groupItem.stuffData.uniqueSeries } />
+                        </div> }
+                    { (groupItem && groupItem.stuffData.rarityLevel > -1) &&
+                        <div className="stuffdata-extra-container">
+                            <RarityLevelView level={ groupItem.stuffData.rarityLevel } />
+                        </div> }
+                </div>
                 { groupItem &&
-                    <div className="d-flex flex-column flex-grow-1">
-                        <p className="flex-grow-1 fs-6 text-black my-2">{ groupItem.name }</p>
+                    <div className="d-flex flex-column gap-2">
+                        <p className="flex-grow-1 text-black text-truncate">{ groupItem.name }</p>
                         { !!roomSession &&
                             <button type="button" className="btn btn-success btn-sm" onClick={ event => attemptItemPlacement(groupItem) }>{ LocalizeText('inventory.furni.placetoroom') }</button> }
                     </div> }
diff --git a/src/views/inventory/views/pet/InventoryPetView.tsx b/src/views/inventory/views/pet/InventoryPetView.tsx
index 5d8d8d90..a90faef1 100644
--- a/src/views/inventory/views/pet/InventoryPetView.tsx
+++ b/src/views/inventory/views/pet/InventoryPetView.tsx
@@ -81,15 +81,18 @@ export const InventoryPetView: FC<InventoryPetViewProps> = props =>
 
     return (
         <div className="row h-100">
-            <div className="col-7 d-flex flex-column h-100">
+            <div className="d-flex flex-column col-7 h-100">
                 <InventoryPetResultsView petItems={ petItems }  />
             </div>
-            <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>
-                    { !!roomSession && <button type="button" className="btn btn-success btn-sm" onClick={ event => attemptPetPlacement(petItem) }>{ LocalizeText('inventory.furni.placetoroom') }</button> }
-                </div> }
+            <div className="d-flex flex-column col-5 gap-2 h-100 overflow-hidden">
+                <div className="position-relative d-flex flex-column overflow-auto h-100">
+                    <RoomPreviewerView roomPreviewer={ roomPreviewer } height={ 140 } />
+                </div>
+                { petItem &&
+                    <div className="d-flex flex-column gap-2">
+                        <p className="flex-grow-1 text-black text-truncate">{ petItem.petData.name }</p>
+                        { !!roomSession && <button type="button" className="btn btn-success btn-sm" onClick={ event => attemptPetPlacement(petItem) }>{ LocalizeText('inventory.furni.placetoroom') }</button> }
+                    </div> }
             </div>
         </div>
     );