From 1ddcb51af576050ea0008075f9663c4a1ad6f0b6 Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Tue, 2 May 2023 20:18:45 +0800
Subject: [PATCH] Add a button here to prevent poll height from jumping
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Still quite a hidden feature 🤫
---
 src/components/poll.jsx   | 99 ++++++++++++++++++++++-----------------
 src/components/status.css |  4 +-
 2 files changed, 59 insertions(+), 44 deletions(-)

diff --git a/src/components/poll.jsx b/src/components/poll.jsx
index c53b209b..c051c217 100644
--- a/src/components/poll.jsx
+++ b/src/components/poll.jsx
@@ -87,54 +87,67 @@ export default function Poll({
       }}
     >
       {(showResults && optionsHaveVoteCounts) || voted || expired ? (
-        <div class="poll-options">
-          {options.map((option, i) => {
-            const { title, votesCount: optionVotesCount } = option;
-            const percentage = pollVotesCount
-              ? ((optionVotesCount / pollVotesCount) * 100).toFixed(
-                  roundPrecision,
-                )
-              : 0; // check if current poll choice is the leading one
+        <>
+          <div class="poll-options">
+            {options.map((option, i) => {
+              const { title, votesCount: optionVotesCount } = option;
+              const percentage = pollVotesCount
+                ? ((optionVotesCount / pollVotesCount) * 100).toFixed(
+                    roundPrecision,
+                  )
+                : 0; // check if current poll choice is the leading one
 
-            const isLeading =
-              optionVotesCount > 0 &&
-              optionVotesCount ===
-                Math.max(...options.map((o) => o.votesCount));
-            return (
-              <div
-                key={`${i}-${title}-${optionVotesCount}`}
-                class={`poll-option poll-result ${
-                  isLeading ? 'poll-option-leading' : ''
-                }`}
-                style={{
-                  '--percentage': `${percentage}%`,
-                }}
-              >
-                <div class="poll-option-title">
-                  <span
-                    dangerouslySetInnerHTML={{
-                      __html: emojifyText(title, emojis),
-                    }}
-                  />
-                  {voted && ownVotes.includes(i) && (
-                    <>
-                      {' '}
-                      <Icon icon="check-circle" />
-                    </>
-                  )}
-                </div>
+              const isLeading =
+                optionVotesCount > 0 &&
+                optionVotesCount ===
+                  Math.max(...options.map((o) => o.votesCount));
+              return (
                 <div
-                  class="poll-option-votes"
-                  title={`${optionVotesCount} vote${
-                    optionVotesCount === 1 ? '' : 's'
+                  key={`${i}-${title}-${optionVotesCount}`}
+                  class={`poll-option poll-result ${
+                    isLeading ? 'poll-option-leading' : ''
                   }`}
+                  style={{
+                    '--percentage': `${percentage}%`,
+                  }}
                 >
-                  {percentage}%
+                  <div class="poll-option-title">
+                    <span
+                      dangerouslySetInnerHTML={{
+                        __html: emojifyText(title, emojis),
+                      }}
+                    />
+                    {voted && ownVotes.includes(i) && (
+                      <>
+                        {' '}
+                        <Icon icon="check-circle" />
+                      </>
+                    )}
+                  </div>
+                  <div
+                    class="poll-option-votes"
+                    title={`${optionVotesCount} vote${
+                      optionVotesCount === 1 ? '' : 's'
+                    }`}
+                  >
+                    {percentage}%
+                  </div>
                 </div>
-              </div>
-            );
-          })}
-        </div>
+              );
+            })}
+          </div>
+          {!expired && !voted && (
+            <button
+              class="poll-vote-button plain2"
+              disabled={uiState === 'loading'}
+              onClick={() => {
+                setShowResults(false);
+              }}
+            >
+              <Icon icon="arrow-left" /> Hide results
+            </button>
+          )}
+        </>
       ) : (
         <form
           onSubmit={async (e) => {
diff --git a/src/components/status.css b/src/components/status.css
index 4c582d18..f9015b2b 100644
--- a/src/components/status.css
+++ b/src/components/status.css
@@ -1035,11 +1035,13 @@ a.card:is(:hover, :focus) {
 }
 .poll-vote-button {
   margin: 8px 8px 0 12px;
-  padding-inline: 24px;
+  /* padding-inline: 24px; */
+  min-width: 160px;
 }
 .poll-meta {
   margin: 8px 16px;
   font-size: 90%;
+  user-select: none;
 }
 .poll-option-title {
   text-shadow: 0 1px var(--bg-color);