From 4a8f738bb035e4fffdc5e0d9adea881e19ca682c Mon Sep 17 00:00:00 2001
From: dank074 <torresefrain10@gmail.com>
Date: Tue, 2 Nov 2021 21:38:58 -0500
Subject: [PATCH] fix chooser resize

---
 .../widgets/choosers/ChooserWidgetView.scss   | 15 ++++++++-----
 .../widgets/choosers/ChooserWidgetView.tsx    | 21 ++++++++++++-------
 2 files changed, 24 insertions(+), 12 deletions(-)

diff --git a/src/views/room/widgets/choosers/ChooserWidgetView.scss b/src/views/room/widgets/choosers/ChooserWidgetView.scss
index 9a461869..5365dd13 100644
--- a/src/views/room/widgets/choosers/ChooserWidgetView.scss
+++ b/src/views/room/widgets/choosers/ChooserWidgetView.scss
@@ -1,11 +1,16 @@
 .nitro-chooser-widget {
+    
 
-    .list-item {
-        color: black;
-        overflow: hidden;
+    .chooser-container {
+        min-height: 150px;
 
-        &.selected {
-            background-color: cadetblue;
+        .list-item {
+            color: black;
+            overflow: hidden;
+    
+            &.selected {
+                background-color: cadetblue;
+            }
         }
     }
 }
diff --git a/src/views/room/widgets/choosers/ChooserWidgetView.tsx b/src/views/room/widgets/choosers/ChooserWidgetView.tsx
index 638b4999..492b5164 100644
--- a/src/views/room/widgets/choosers/ChooserWidgetView.tsx
+++ b/src/views/room/widgets/choosers/ChooserWidgetView.tsx
@@ -1,5 +1,5 @@
 import { FC, useCallback, useMemo, useState } from 'react';
-import { List, ListRowProps, ListRowRenderer } from 'react-virtualized';
+import { AutoSizer, List, ListRowProps, ListRowRenderer } from 'react-virtualized';
 import { RoomObjectItem, RoomWidgetRoomObjectMessage } from '../../../../api';
 import { LocalizeText } from '../../../../api/utils';
 import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../layout';
@@ -53,12 +53,19 @@ export const ChooserWidgetView: FC<ChooserWidgetViewProps> = props =>
                         <input type="text" className="form-control form-control-sm" placeholder={ LocalizeText('generic.search') } value={searchValue} onChange={event => setSearchValue(event.target.value)} />
                     </div>
                 </div>
-                <List
-                    width={ 150 }
-                    height={ 150 }
-                    rowCount={ filteredItems.length }
-                    rowHeight={ 20 }
-                    rowRenderer={ rowRenderer } />
+                <div className="row w-100 h-100 chooser-container">
+                    <AutoSizer defaultWidth={150} defaultHeight={150}>
+                        {({ height, width }) => 
+                        {
+                            return (<List
+                                width={ width }
+                                height={ height }
+                                rowCount={ filteredItems.length }
+                                rowHeight={ 20 }
+                                rowRenderer={ rowRenderer } />)
+                        }}
+                    </AutoSizer>
+                </div>
             </NitroCardContentView>
         </NitroCardView>
     );