From 9e90784f2a7d13d1c49f93f562170f5c0d5aafaa Mon Sep 17 00:00:00 2001
From: Kalle <38327916+Sendouc@users.noreply.github.com>
Date: Sat, 4 Jun 2022 11:49:39 +0300
Subject: [PATCH] Handle overflow when long name in suggestion

---
 app/routes/plus/suggestions.tsx | 4 +---
 app/styles/plus.css             | 1 +
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/app/routes/plus/suggestions.tsx b/app/routes/plus/suggestions.tsx
index c10981cc8..46f5aac6b 100644
--- a/app/routes/plus/suggestions.tsx
+++ b/app/routes/plus/suggestions.tsx
@@ -233,8 +233,7 @@ function SuggestedUser({
           discordId={suggested.suggestedUser.discordId}
           size="md"
         />
-        {/* xxx: can cause page to overflow when long e.g. Buckinghamshire */}
-        <h2>{suggested.suggestedUser.discordName}</h2>
+        <h2>Buckinghamshire</h2>
         {canAddCommentToSuggestionFE({
           user,
           suggestions: data.suggestions,
@@ -312,7 +311,6 @@ function CommentDeleteButton({
       // TODO: Delete your suggestion of suggestedDiscordName and 3 comments to it? + different behavior of the delete event
       dialogHeading={`Delete your comment to ${suggestedDiscordName}'s +${tier} suggestion?`}
     >
-      {/* xxx: what when this is the first suggestion... it would trigger different behavior so confusing maybe? */}
       <Button
         className="plus__delete-button"
         icon={<TrashIcon />}
diff --git a/app/styles/plus.css b/app/styles/plus.css
index 8288a6f3a..233a959d6 100644
--- a/app/styles/plus.css
+++ b/app/styles/plus.css
@@ -46,6 +46,7 @@
   display: flex;
   align-items: center;
   gap: var(--s-2);
+  overflow-x: auto;
 }
 
 .plus__comment-button {