diff --git a/src/components/middle/composer/PollModal.scss b/src/components/middle/composer/PollModal.scss index a92a8580d..a19b709a1 100644 --- a/src/components/middle/composer/PollModal.scss +++ b/src/components/middle/composer/PollModal.scss @@ -1,3 +1,5 @@ +@use '../../../styles/mixins'; + .PollModal { .modal-dialog { max-width: 26.25rem; @@ -26,19 +28,13 @@ border-top: 1px solid var(--color-chat-hover); max-height: 20rem; overflow: auto; + overflow-y: scroll; - &.overflown { - padding: 0 0.4375rem 0.5rem 0.75rem; - } + @include mixins.adapt-padding-to-scrollbar(0.75rem); @media (max-width: 600px) { overflow: hidden; max-height: none; - - &, - &.overflown { - padding: 0 0.75rem; - } } } diff --git a/src/components/middle/composer/PollModal.tsx b/src/components/middle/composer/PollModal.tsx index 24bc4e3b6..48fc391b9 100644 --- a/src/components/middle/composer/PollModal.tsx +++ b/src/components/middle/composer/PollModal.tsx @@ -6,7 +6,7 @@ import React, { import type { ApiNewPoll } from '../../../api/types'; -import { requestNextMutation } from '../../../lib/fasterdom/fasterdom'; +import { requestMeasure, requestNextMutation } from '../../../lib/fasterdom/fasterdom'; import captureEscKeyListener from '../../../util/captureEscKeyListener'; import parseHtmlAsFormattedText from '../../../util/parseHtmlAsFormattedText'; @@ -90,8 +90,9 @@ const PollModal: FC = ({ return; } - list.classList.toggle('overflown', list.scrollHeight > MAX_LIST_HEIGHT); - list.scrollTo({ top: list.scrollHeight, behavior: 'smooth' }); + requestMeasure(() => { + list.scrollTo({ top: list.scrollHeight, behavior: 'smooth' }); + }); }); }); @@ -101,12 +102,26 @@ const PollModal: FC = ({ return; } - const questionTrimmed = question.trim().substring(0, MAX_QUESTION_LENGTH); - const optionsTrimmed = options.map((o) => o.trim().substring(0, MAX_OPTION_LENGTH)).filter((o) => o.length); + const isNoCorrectOptionError = isQuizMode && (correctOption === undefined || !options[correctOption].trim()); - if (!questionTrimmed || optionsTrimmed.length < 2) { + const answers = options + .map((text, index) => { + text = text.trim(); + + if (!text) return undefined; + + return { + text, + option: String(index), + ...(index === correctOption && { correct: true }), + }; + }).filter(Boolean); + + const questionTrimmed = question.trim().substring(0, MAX_QUESTION_LENGTH); + if (!questionTrimmed || answers.length < 2) { setQuestion(questionTrimmed); - if (optionsTrimmed.length) { + if (answers.length) { + const optionsTrimmed = options.map((o) => o.trim().substring(0, MAX_OPTION_LENGTH)).filter(Boolean); if (optionsTrimmed.length < 2) { addNewOption(optionsTrimmed); } else { @@ -119,18 +134,11 @@ const PollModal: FC = ({ return; } - if (isQuizMode && (correctOption === undefined || !optionsTrimmed[correctOption])) { + if (isNoCorrectOptionError) { setHasErrors(true); return; } - const answers = optionsTrimmed - .map((text, index) => ({ - text: text.trim(), - option: String(index), - ...(index === correctOption && { correct: true }), - })); - const payload: ApiNewPoll = { summary: { question: questionTrimmed, @@ -280,7 +288,7 @@ const PollModal: FC = ({ function renderRadioOptions() { return renderOptions() - .map((label, index) => ({ value: String(index), label, hidden: index === options.length - 1 })); + .map((label, index) => ({ value: String(index), label, hidden: !options[index].trim() })); } function renderQuizNoOptionError() {