diff --git a/web/settings/relationship/user-list-modal.react.js b/web/settings/relationship/user-list-modal.react.js
--- a/web/settings/relationship/user-list-modal.react.js
+++ b/web/settings/relationship/user-list-modal.react.js
@@ -33,13 +33,19 @@
   const searchModalChildGenerator = React.useCallback(
     (searchText: string) => (
       <div className={css.searchModalContent}>
-        <UserList
-          userRowComponent={userRowComponent}
-          filterUser={filterUser}
-          usersComparator={usersComparator}
-          searchText={searchText}
-        />
-        <Button variant="filled" onClick={onAddUsersClick}>
+        <div className={css.searchModalUserList}>
+          <UserList
+            userRowComponent={userRowComponent}
+            filterUser={filterUser}
+            usersComparator={usersComparator}
+            searchText={searchText}
+          />
+        </div>
+        <Button
+          variant="filled"
+          onClick={onAddUsersClick}
+          className={css.searchModalButton}
+        >
           {buttonLabel}
         </Button>
       </div>
diff --git a/web/settings/relationship/user-list.css b/web/settings/relationship/user-list.css
--- a/web/settings/relationship/user-list.css
+++ b/web/settings/relationship/user-list.css
@@ -13,3 +13,16 @@
   row-gap: 8px;
   height: 625px;
 }
+
+.searchModalUserList {
+  flex-shrink: 0;
+  flex-grow: 1;
+  flex-basis: 0px;
+  min-height: 0px;
+  overflow-y: scroll;
+}
+
+.searchModalButton {
+  flex-shrink: 1;
+  flex-grow: 0;
+}