diff --git a/client/src/components/UserGroup/index.jsx b/client/src/components/UserGroup/index.jsx
index 193d50b..c5078a1 100644
--- a/client/src/components/UserGroup/index.jsx
+++ b/client/src/components/UserGroup/index.jsx
@@ -21,6 +21,7 @@ export default function UserGroup({
           .map((group, index) => {
             return (
               <Pill
+                className={styles.pillContainer}
                 key={group.id}
                 name={group.name}
                 removable={true}
diff --git a/client/src/components/UserGroup/style.module.scss b/client/src/components/UserGroup/style.module.scss
index 3550edc..e336970 100644
--- a/client/src/components/UserGroup/style.module.scss
+++ b/client/src/components/UserGroup/style.module.scss
@@ -51,3 +51,11 @@ div.groupContent > button:first-child {
   align-items: center;
   height: 30px;
 }
+
+.pillContainer {
+  max-width: -webkit-fill-available;
+  /* Mozilla-based browsers will ignore this. */
+  max-width: stretch;
+  max-width: -moz-available;
+  /* WebKit-based browsers will ignore this. */
+}