diff --git a/client/src/components/AddToGroupModal/index.jsx b/client/src/components/AddToGroupModal/index.jsx
index 5948292..cae7a6b 100644
--- a/client/src/components/AddToGroupModal/index.jsx
+++ b/client/src/components/AddToGroupModal/index.jsx
@@ -1,5 +1,5 @@
import React, { useEffect } from "react";
-import { List } from "react-virtualized";
+import { List, AutoSizer } from "react-virtualized";
import PT from "prop-types";
import Button from "../Button";
@@ -237,24 +237,27 @@ export default function AddToGroupModal({ onCancel, updateUser, user }) {
My groups{loadingGroups && " (Loading...)"}
-
- {!loadingGroups && (
- 10
- ? 450
- : filteredMyGroups.length * 45
- }
- rowCount={filteredMyGroups.length}
- rowHeight={45}
- rowRenderer={(params) =>
- rowRenderer({ ...params, items: filteredMyGroups })
- }
- />
- )}
-
+
+ {!loadingGroups && (
+
+ {() => (
+ 10
+ ? 450
+ : filteredMyGroups.length * 45
+ }
+ rowCount={filteredMyGroups.length}
+ rowHeight={45}
+ rowRenderer={(params) =>
+ rowRenderer({ ...params, items: filteredMyGroups })
+ }
+ />
+ )}
+
+ )}
{myGroups.filter((g) =>
g.name.toLowerCase().includes(filter.toLowerCase())
).length === 0 &&
@@ -264,22 +267,26 @@ export default function AddToGroupModal({ onCancel, updateUser, user }) {
Other Groups{loadingGroups && " (Loading...)"}
-
+
{!loadingGroups && (
-
10
- ? 450
- : filteredOtherGroups.length * 45
- }
- rowCount={filteredOtherGroups.length}
- rowHeight={45}
- rowRenderer={(params) =>
- rowRenderer({ ...params, items: filteredOtherGroups })
- }
- />
+
+ {() => (
+ 10
+ ? 250
+ : filteredOtherGroups.length * 45
+ }
+ rowCount={filteredOtherGroups.length}
+ rowHeight={45}
+ rowRenderer={(params) =>
+ rowRenderer({ ...params, items: filteredOtherGroups })
+ }
+ />
+ )}
+
)}
{otherGroups.filter((g) =>
diff --git a/client/src/components/AddToGroupModal/style.module.scss b/client/src/components/AddToGroupModal/style.module.scss
index 5acfbad..0563562 100644
--- a/client/src/components/AddToGroupModal/style.module.scss
+++ b/client/src/components/AddToGroupModal/style.module.scss
@@ -78,7 +78,7 @@
.searchRow {
display: flex;
position: relative;
- margin: 0 30px;
+ margin: 0 10px;
}
.subTitle {
@@ -123,3 +123,8 @@
visibility: hidden;
}
}
+
+.clear {
+ padding-right: 15px;
+ overflow: auto;
+}
diff --git a/client/src/components/Modal/style.module.scss b/client/src/components/Modal/style.module.scss
index 313d774..8939318 100644
--- a/client/src/components/Modal/style.module.scss
+++ b/client/src/components/Modal/style.module.scss
@@ -27,7 +27,7 @@
max-width: $screen-md;
overflow: hidden;
padding: 30px;
- min-width: 500px;
+ min-width: 520px;
position: fixed;
top: 50%;
left: 50%;