chore: limit height of multiple choice question (#1740)

src/extensions/surveys.tsx

@@ -12,6 +12,7 @@ import {
 
 import * as Preact from 'preact'
 import { useContext, useEffect, useMemo, useRef, useState } from 'preact/hooks'
+import { addEventListener } from '../utils'
 import { document as _document, window as _window } from '../utils/globals'
 import { createLogger } from '../utils/logger'
 import { isNull, isNumber } from '../utils/type-utils'
@@ -35,7 +36,6 @@ import {
     style,
     SurveyContext,
 } from './surveys/surveys-utils'
-import { addEventListener } from '../utils'
 const logger = createLogger('[Surveys]')
 
 // We cast the types here which is dangerous but protected by the top level generateSurveys call

src/extensions/surveys/components/QuestionTypes.tsx

@@ -248,7 +248,7 @@ export function MultipleChoiceQuestion({
                 forceDisableHtml={forceDisableHtml}
                 backgroundColor={appearance.backgroundColor}
             />
-            <div className="multiple-choice-options">
+            <div className="multiple-choice-options limit-height">
                 {/* Remove the last element from the choices, if hasOpenChoice is set */}
                 {/* shuffle all other options here if question.shuffleOptions is set */}
                 {/* Always ensure that the open ended choice is the last option */}

src/extensions/surveys/surveys-utils.tsx

@@ -209,6 +209,12 @@ export const style = (appearance: SurveyAppearance | null) => {
               background: ${appearance?.backgroundColor || '#eeeded'};
               opacity: .60;
           }
+          .limit-height {
+              max-height: 300px;
+              overflow: auto;
+              scrollbar-width: thin;
+              scrollbar-color: ${appearance?.borderColor || '#c9c6c6'} ${appearance?.backgroundColor || '#eeeded'};
+          }
           .multiple-choice-options {
               margin-top: 13px;
               font-size: 14px;