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%;