From 359962af6c5418a5e8820a551a23ee4f8b34621b Mon Sep 17 00:00:00 2001
From: Andy Balaam <andyb@element.io>
Date: Tue, 23 Nov 2021 11:16:31 +0000
Subject: [PATCH] Prevent text overlapping on poll options (#7187)

---
 res/css/views/messages/_MPollBody.scss        |  20 +-
 src/components/views/messages/MPollBody.tsx   |  12 +-
 .../__snapshots__/MPollBody-test.tsx.snap     | 216 +++++++++++-------
 3 files changed, 153 insertions(+), 95 deletions(-)

diff --git a/res/css/views/messages/_MPollBody.scss b/res/css/views/messages/_MPollBody.scss
index 0c307fbc4d..257e04cea7 100644
--- a/res/css/views/messages/_MPollBody.scss
+++ b/res/css/views/messages/_MPollBody.scss
@@ -57,15 +57,23 @@ limitations under the License.
             padding-top: 2px;
         }
 
-        .mx_MPollBody_optionVoteCount {
-            position: absolute;
-            color: $secondary-content;
-            right: 4px;
-            font-size: $font-12px;
+        .mx_StyledRadioButton_spacer {
+            display: none;
+        }
+
+        .mx_MPollBody_optionDescription {
+            display: flex;
+            justify-content: space-between;
+
+            .mx_MPollBody_optionVoteCount {
+                color: $secondary-content;
+                font-size: $font-12px;
+                white-space: nowrap;
+            }
         }
 
         .mx_MPollBody_popularityBackground {
-            width: calc(100% - 4px);
+            width: calc(100% - 6px);
             height: 8px;
             margin-right: 12px;
             border-radius: 8px;
diff --git a/src/components/views/messages/MPollBody.tsx b/src/components/views/messages/MPollBody.tsx
index ee2cd663d7..e9eede77fc 100644
--- a/src/components/views/messages/MPollBody.tsx
+++ b/src/components/views/messages/MPollBody.tsx
@@ -197,11 +197,13 @@ export default class MPollBody extends React.Component<IBodyProps, IState> {
                                 checked={this.state.selected === answer.id}
                                 onChange={this.onOptionSelected}
                             >
-                                <div className="mx_MPollBody_optionVoteCount">
-                                    { _t("%(count)s votes", { count: answerVotes }) }
-                                </div>
-                                <div className="mx_MPollBody_optionText">
-                                    { answer[TEXT_NODE_TYPE] }
+                                <div className="mx_MPollBody_optionDescription">
+                                    <div className="mx_MPollBody_optionText">
+                                        { answer[TEXT_NODE_TYPE] }
+                                    </div>
+                                    <div className="mx_MPollBody_optionVoteCount">
+                                        { _t("%(count)s votes", { count: answerVotes }) }
+                                    </div>
                                 </div>
                             </StyledRadioButton>
                             <div className="mx_MPollBody_popularityBackground">
diff --git a/test/components/views/messages/__snapshots__/MPollBody-test.tsx.snap b/test/components/views/messages/__snapshots__/MPollBody-test.tsx.snap
index 37689b2011..543f178274 100644
--- a/test/components/views/messages/__snapshots__/MPollBody-test.tsx.snap
+++ b/test/components/views/messages/__snapshots__/MPollBody-test.tsx.snap
@@ -120,14 +120,18 @@ exports[`MPollBody renders a poll with local, non-local and invalid votes 1`] =
                 className="mx_StyledRadioButton_content"
               >
                 <div
-                  className="mx_MPollBody_optionVoteCount"
+                  className="mx_MPollBody_optionDescription"
                 >
-                  1 vote
-                </div>
-                <div
-                  className="mx_MPollBody_optionText"
-                >
-                  Pizza
+                  <div
+                    className="mx_MPollBody_optionText"
+                  >
+                    Pizza
+                  </div>
+                  <div
+                    className="mx_MPollBody_optionVoteCount"
+                  >
+                    1 vote
+                  </div>
                 </div>
               </div>
               <div
@@ -178,14 +182,18 @@ exports[`MPollBody renders a poll with local, non-local and invalid votes 1`] =
                 className="mx_StyledRadioButton_content"
               >
                 <div
-                  className="mx_MPollBody_optionVoteCount"
+                  className="mx_MPollBody_optionDescription"
                 >
-                  0 votes
-                </div>
-                <div
-                  className="mx_MPollBody_optionText"
-                >
-                  Poutine
+                  <div
+                    className="mx_MPollBody_optionText"
+                  >
+                    Poutine
+                  </div>
+                  <div
+                    className="mx_MPollBody_optionVoteCount"
+                  >
+                    0 votes
+                  </div>
                 </div>
               </div>
               <div
@@ -236,14 +244,18 @@ exports[`MPollBody renders a poll with local, non-local and invalid votes 1`] =
                 className="mx_StyledRadioButton_content"
               >
                 <div
-                  className="mx_MPollBody_optionVoteCount"
+                  className="mx_MPollBody_optionDescription"
                 >
-                  3 votes
-                </div>
-                <div
-                  className="mx_MPollBody_optionText"
-                >
-                  Italian
+                  <div
+                    className="mx_MPollBody_optionText"
+                  >
+                    Italian
+                  </div>
+                  <div
+                    className="mx_MPollBody_optionVoteCount"
+                  >
+                    3 votes
+                  </div>
                 </div>
               </div>
               <div
@@ -294,14 +306,18 @@ exports[`MPollBody renders a poll with local, non-local and invalid votes 1`] =
                 className="mx_StyledRadioButton_content"
               >
                 <div
-                  className="mx_MPollBody_optionVoteCount"
+                  className="mx_MPollBody_optionDescription"
                 >
-                  1 vote
-                </div>
-                <div
-                  className="mx_MPollBody_optionText"
-                >
-                  Wings
+                  <div
+                    className="mx_MPollBody_optionText"
+                  >
+                    Wings
+                  </div>
+                  <div
+                    className="mx_MPollBody_optionVoteCount"
+                  >
+                    1 vote
+                  </div>
                 </div>
               </div>
               <div
@@ -453,14 +469,18 @@ exports[`MPollBody renders a poll with no votes 1`] = `
                 className="mx_StyledRadioButton_content"
               >
                 <div
-                  className="mx_MPollBody_optionVoteCount"
+                  className="mx_MPollBody_optionDescription"
                 >
-                  0 votes
-                </div>
-                <div
-                  className="mx_MPollBody_optionText"
-                >
-                  Pizza
+                  <div
+                    className="mx_MPollBody_optionText"
+                  >
+                    Pizza
+                  </div>
+                  <div
+                    className="mx_MPollBody_optionVoteCount"
+                  >
+                    0 votes
+                  </div>
                 </div>
               </div>
               <div
@@ -511,14 +531,18 @@ exports[`MPollBody renders a poll with no votes 1`] = `
                 className="mx_StyledRadioButton_content"
               >
                 <div
-                  className="mx_MPollBody_optionVoteCount"
+                  className="mx_MPollBody_optionDescription"
                 >
-                  0 votes
-                </div>
-                <div
-                  className="mx_MPollBody_optionText"
-                >
-                  Poutine
+                  <div
+                    className="mx_MPollBody_optionText"
+                  >
+                    Poutine
+                  </div>
+                  <div
+                    className="mx_MPollBody_optionVoteCount"
+                  >
+                    0 votes
+                  </div>
                 </div>
               </div>
               <div
@@ -569,14 +593,18 @@ exports[`MPollBody renders a poll with no votes 1`] = `
                 className="mx_StyledRadioButton_content"
               >
                 <div
-                  className="mx_MPollBody_optionVoteCount"
+                  className="mx_MPollBody_optionDescription"
                 >
-                  0 votes
-                </div>
-                <div
-                  className="mx_MPollBody_optionText"
-                >
-                  Italian
+                  <div
+                    className="mx_MPollBody_optionText"
+                  >
+                    Italian
+                  </div>
+                  <div
+                    className="mx_MPollBody_optionVoteCount"
+                  >
+                    0 votes
+                  </div>
                 </div>
               </div>
               <div
@@ -627,14 +655,18 @@ exports[`MPollBody renders a poll with no votes 1`] = `
                 className="mx_StyledRadioButton_content"
               >
                 <div
-                  className="mx_MPollBody_optionVoteCount"
+                  className="mx_MPollBody_optionDescription"
                 >
-                  0 votes
-                </div>
-                <div
-                  className="mx_MPollBody_optionText"
-                >
-                  Wings
+                  <div
+                    className="mx_MPollBody_optionText"
+                  >
+                    Wings
+                  </div>
+                  <div
+                    className="mx_MPollBody_optionVoteCount"
+                  >
+                    0 votes
+                  </div>
                 </div>
               </div>
               <div
@@ -786,14 +818,18 @@ exports[`MPollBody renders a poll with only non-local votes 1`] = `
                 className="mx_StyledRadioButton_content"
               >
                 <div
-                  className="mx_MPollBody_optionVoteCount"
+                  className="mx_MPollBody_optionDescription"
                 >
-                  0 votes
-                </div>
-                <div
-                  className="mx_MPollBody_optionText"
-                >
-                  Pizza
+                  <div
+                    className="mx_MPollBody_optionText"
+                  >
+                    Pizza
+                  </div>
+                  <div
+                    className="mx_MPollBody_optionVoteCount"
+                  >
+                    0 votes
+                  </div>
                 </div>
               </div>
               <div
@@ -844,14 +880,18 @@ exports[`MPollBody renders a poll with only non-local votes 1`] = `
                 className="mx_StyledRadioButton_content"
               >
                 <div
-                  className="mx_MPollBody_optionVoteCount"
+                  className="mx_MPollBody_optionDescription"
                 >
-                  0 votes
-                </div>
-                <div
-                  className="mx_MPollBody_optionText"
-                >
-                  Poutine
+                  <div
+                    className="mx_MPollBody_optionText"
+                  >
+                    Poutine
+                  </div>
+                  <div
+                    className="mx_MPollBody_optionVoteCount"
+                  >
+                    0 votes
+                  </div>
                 </div>
               </div>
               <div
@@ -902,14 +942,18 @@ exports[`MPollBody renders a poll with only non-local votes 1`] = `
                 className="mx_StyledRadioButton_content"
               >
                 <div
-                  className="mx_MPollBody_optionVoteCount"
+                  className="mx_MPollBody_optionDescription"
                 >
-                  2 votes
-                </div>
-                <div
-                  className="mx_MPollBody_optionText"
-                >
-                  Italian
+                  <div
+                    className="mx_MPollBody_optionText"
+                  >
+                    Italian
+                  </div>
+                  <div
+                    className="mx_MPollBody_optionVoteCount"
+                  >
+                    2 votes
+                  </div>
                 </div>
               </div>
               <div
@@ -960,14 +1004,18 @@ exports[`MPollBody renders a poll with only non-local votes 1`] = `
                 className="mx_StyledRadioButton_content"
               >
                 <div
-                  className="mx_MPollBody_optionVoteCount"
+                  className="mx_MPollBody_optionDescription"
                 >
-                  1 vote
-                </div>
-                <div
-                  className="mx_MPollBody_optionText"
-                >
-                  Wings
+                  <div
+                    className="mx_MPollBody_optionText"
+                  >
+                    Wings
+                  </div>
+                  <div
+                    className="mx_MPollBody_optionVoteCount"
+                  >
+                    1 vote
+                  </div>
                 </div>
               </div>
               <div