diff --git a/frontend/src/scenes/surveys/SurveyAppearance.scss b/frontend/src/scenes/surveys/SurveyAppearance.scss index d39b0e4941c77..6600e24a630ec 100644 --- a/frontend/src/scenes/surveys/SurveyAppearance.scss +++ b/frontend/src/scenes/surveys/SurveyAppearance.scss @@ -246,6 +246,10 @@ .multiple-choice-options .choice-option-open label { padding-right: 30px; + display: flex; + flex-wrap: wrap; + gap: 8px; + max-width: 100%; } .multiple-choice-options .choice-option-open input:disabled + label { @@ -255,12 +259,14 @@ .multiple-choice-options .choice-option-open label input { position: relative; opacity: 1; - outline: 1px solid rgba(0, 0, 0, 0.25); - border-radius: 4px; + border: 1.5px solid rgba(0, 0, 0, 0.25); + border-radius: 2px; + outline: 0; + flex-grow: 1; } .multiple-choice-options .choice-option-open label input:focus { - outline-color: black; + border-color: rgba(0, 0, 0); } .thank-you-message { diff --git a/frontend/src/scenes/surveys/SurveyAppearance.tsx b/frontend/src/scenes/surveys/SurveyAppearance.tsx index 1d894a5e5df91..d2793227e1acd 100644 --- a/frontend/src/scenes/surveys/SurveyAppearance.tsx +++ b/frontend/src/scenes/surveys/SurveyAppearance.tsx @@ -530,11 +530,13 @@ const OpenEndedChoice = ({ label, initialChecked, inputType, + key, }: { label: string initialChecked: boolean inputType: string textColor: string + key: number }): JSX.Element => { const textRef = useRef(null) const checkRef = useRef(null) @@ -543,23 +545,23 @@ const OpenEndedChoice = ({
{ - if (checkRef.current && checkRef.current.checked) { + if (checkRef.current?.checked || checkRef.current?.disabled) { textRef.current?.focus() } }} > -