git push origin developMerge branch 'issue-17' into develop

Author: callmekatootie

client/src/components/AddToGroupModal/index.jsx

@@ -154,66 +154,76 @@ export default function AddToGroupModal({ onCancel, updateUser, user }) {
       overlayClassName={style.overlay}
     >
       <h1 className={style.title}>Add to Group</h1>
-      <div className={style.searchRow}>
-        <ZoomIcon className={style.zoomIcon} />
-        <input
-          className={style.search}
-          onChange={({ target }) => {
-            setFilter(target.value);
-            setImmediate(() => target.focus());
-          }}
-          placeholder="Search or create group"
-          value={filter}
-          disabled={loadingGroups}
-        />
-        <Button
-          className={style.createButton}
-          onClick={createGroup}
-          disabled={creatingGroup}
-        >
-          {creatingGroup ? "Creating..." : "+ Create"}
-        </Button>
-      </div>
-      <h3 className={style.subTitle}>
-        My groups{loadingGroups && " (Loading...)"}
-      </h3>
-      <div className={style.groups}>
-        {!loadingGroups &&
-          myGroups
-            .filter((g) => g.name.toLowerCase().includes(filter.toLowerCase()))
-            .map((g) => (
-              <Group
-                checked={g.isSelected === true}
-                group={g}
-                key={g.id}
-                onSwitch={() => switchSelected(g)}
-              />
-            ))}
-      </div>
-      {myGroups.filter((g) =>
-        g.name.toLowerCase().includes(filter.toLowerCase())
-      ).length === 0 &&
-        !loadingGroups && <div className={style.message}>No results found</div>}
-      <h3 className={style.subTitle}>
-        Other Groups{loadingGroups && " (Loading...)"}
-      </h3>
       <div className={style.groups}>
-        {!loadingGroups &&
-          otherGroups
-            .filter((g) => g.name.toLowerCase().includes(filter.toLowerCase()))
-            .map((g) => (
-              <Group
-                checked={g.isSelected === true}
-                group={g}
-                key={g.id}
-                onSwitch={() => switchSelected(g)}
-              />
-            ))}
+        <div className={style.searchRow}>
+          <ZoomIcon className={style.zoomIcon} />
+          <input
+            className={style.search}
+            onChange={({ target }) => {
+              setFilter(target.value);
+              setImmediate(() => target.focus());
+            }}
+            placeholder="Search or create group"
+            value={filter}
+            disabled={loadingGroups}
+          />
+          <Button
+            className={style.createButton}
+            onClick={createGroup}
+            disabled={creatingGroup}
+          >
+            {creatingGroup ? "Creating..." : "+ Create"}
+          </Button>
+        </div>
+        <h3 className={style.subTitle}>
+          My groups{loadingGroups && " (Loading...)"}
+        </h3>
+        <div>
+          {!loadingGroups &&
+            myGroups
+              .filter((g) =>
+                g.name.toLowerCase().includes(filter.toLowerCase())
+              )
+              .map((g) => (
+                <Group
+                  checked={g.isSelected === true}
+                  group={g}
+                  key={g.id}
+                  onSwitch={() => switchSelected(g)}
+                />
+              ))}
+        </div>
+        {myGroups.filter((g) =>
+          g.name.toLowerCase().includes(filter.toLowerCase())
+        ).length === 0 &&
+          !loadingGroups && (
+            <div className={style.message}>No results found</div>
+          )}
+        <h3 className={style.subTitle}>
+          Other Groups{loadingGroups && " (Loading...)"}
+        </h3>
+        <div>
+          {!loadingGroups &&
+            otherGroups
+              .filter((g) =>
+                g.name.toLowerCase().includes(filter.toLowerCase())
+              )
+              .map((g) => (
+                <Group
+                  checked={g.isSelected === true}
+                  group={g}
+                  key={g.id}
+                  onSwitch={() => switchSelected(g)}
+                />
+              ))}
+        </div>
+        {otherGroups.filter((g) =>
+          g.name.toLowerCase().includes(filter.toLowerCase())
+        ).length === 0 &&
+          !loadingGroups && (
+            <div className={style.message}>No results found</div>
+          )}
       </div>
-      {otherGroups.filter((g) =>
-        g.name.toLowerCase().includes(filter.toLowerCase())
-      ).length === 0 &&
-        !loadingGroups && <div className={style.message}>No results found</div>}
       <div className={style.buttons}>
         <Button onClick={onCancel} disabled={updatingGroups || creatingGroup}>
           Cancel

client/src/components/AddToGroupModal/style.module.scss

@@ -44,7 +44,7 @@
 
 .groups {
   margin: 0 -30px;
-  max-height: 150px;
+  max-height: calc(95vh - 157px);
   overflow-y: auto;
 }
 
@@ -68,10 +68,12 @@
 .searchRow {
   display: flex;
   position: relative;
+  margin: 0 30px;
 }
 
 .subTitle {
   @include h3;
+  margin-left: 30px;
 }
 
 .title {
@@ -88,4 +90,5 @@
 .message {
   color: $textColor2;
   font: 400 12pt/1.25 Inter;
+  margin-left: 30px;
 }