UX: Fix overflow + wrap issues for long usernames (#168)

UX: Fix overflow + wrap issues for long usernames (#168)

  • UX: Fix overflow + wrap issues for long usernames
diff --git a/assets/stylesheets/common/discourse-post-event-invitees.scss b/assets/stylesheets/common/discourse-post-event-invitees.scss
index 98af124..1402675 100644
--- a/assets/stylesheets/common/discourse-post-event-invitees.scss
+++ b/assets/stylesheets/common/discourse-post-event-invitees.scss
@@ -22,8 +22,16 @@
       }
 
       .user {
+        max-width: 175px;
+        display: flex;
+        align-items: center;
+        white-space: nowrap;
         .username {
           margin-left: 0.5em;
+          text-overflow: ellipsis;
+          overflow: hidden;
+          color: var(--primary-high-or-secondary-low);
+          font-weight: bold;
         }
       }
 
diff --git a/assets/stylesheets/desktop/discourse-post-event-invitees.scss b/assets/stylesheets/desktop/discourse-post-event-invitees.scss
new file mode 100644
index 0000000..081a586
--- /dev/null
+++ b/assets/stylesheets/desktop/discourse-post-event-invitees.scss
@@ -0,0 +1,5 @@
+.discourse-post-event-invitees-modal {
+  .modal-inner-container {
+    min-width: 350px;
+  }
+}
diff --git a/assets/stylesheets/mobile/discourse-post-event-invitees.scss b/assets/stylesheets/mobile/discourse-post-event-invitees.scss
new file mode 100644
index 0000000..96be7c8
--- /dev/null
+++ b/assets/stylesheets/mobile/discourse-post-event-invitees.scss
@@ -0,0 +1,5 @@
+.discourse-post-event-invitees-modal {
+  .modal-inner-container {
+    min-width: 90vw;
+  }
+}

GitHub sha: 6b9de96887787f458983800bdeb9aa753cfd330e

This commit appears in #168 which was approved by eviltrout. It was merged by jordanvidrine.