fix: style problems in multiple/single-choice questions

packages/browser/src/extensions/surveys.tsx

@@ -823,14 +823,6 @@ export function usePopupVisibility(
                 sessionRecordingUrl: posthog.get_session_replay_url?.(),
             })
             localStorage.setItem('lastSeenSurveyDate', new Date().toISOString())
-            setTimeout(() => {
-                const inputField = document
-                    .querySelector(getSurveyContainerClass(survey, true))
-                    ?.shadowRoot?.querySelector('textarea') as HTMLElement
-                if (inputField) {
-                    inputField.focus()
-                }
-            }, 100)
         }
 
         addEventListener(window, 'PHSurveyClosed', handleSurveyClosed as EventListener)

packages/browser/src/extensions/surveys/components/QuestionTypes.tsx

@@ -1,5 +1,5 @@
 import { Fragment } from 'preact'
-import { useMemo, useRef, useState } from 'preact/hooks'
+import { useEffect, useMemo, useRef, useState } from 'preact/hooks'
 import {
     BasicSurveyQuestion,
     LinkSurveyQuestion,
@@ -81,20 +81,28 @@ export function OpenTextQuestion({
 }: CommonQuestionProps & {
     question: BasicSurveyQuestion
 }) {
+    const inputRef = useRef<HTMLTextAreaElement>(null)
     const [text, setText] = useState<string>(() => {
         if (isString(initialValue)) {
             return initialValue
         }
         return ''
     })
 
+    useEffect(() => {
+        setTimeout(() => {
+            inputRef.current?.focus()
+        }, 100)
+    }, [])
+
     const htmlFor = `surveyQuestion${displayQuestionIndex}`
 
     return (
         <Fragment>
             <div className="question-container">
                 <QuestionHeader question={question} forceDisableHtml={forceDisableHtml} htmlFor={htmlFor} />
                 <textarea
+                    ref={inputRef}
                     id={htmlFor}
                     rows={4}
                     placeholder={appearance?.placeholder}
@@ -444,7 +452,7 @@ export function MultipleChoiceQuestion({
                               : isArray(selectedChoices) && selectedChoices.includes(choice)
 
                         return (
-                            <label className={isOpenChoice ? ' choice-option-open' : ''} key={idx}>
+                            <label className={isOpenChoice ? 'choice-option-open' : ''} key={idx}>
                                 <input
                                     type={isSingleChoiceQuestion ? 'radio' : 'checkbox'}
                                     name={inputId}

packages/browser/src/extensions/surveys/survey.css

@@ -10,7 +10,6 @@
     --ph-survey-border-radius: 10px;
     --ph-survey-background-color: #eeeded;
     --ph-survey-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-    --ph-survey-disabled-button-opacity: 0.6;
     --ph-survey-submit-button-color: black;
     --ph-survey-submit-button-text-color: white;
     --ph-survey-rating-bg-color: white;
@@ -19,14 +18,16 @@
     --ph-survey-rating-active-text-color: white;
     --ph-survey-text-primary-color: #020617; /* Default text color, based on text-slate-950 */
     --ph-survey-text-subtle-color: #939393;
-    --ph-survey-input-background: white;
-    --ph-survey-scrollbar-thumb-color: var(--ph-survey-border-color);
-    --ph-survey-scrollbar-track-color: var(--ph-survey-background-color);
-    --ph-survey-input-text-color: #020617;
-    --ph-survey-outline-color: rgba(59, 130, 246, 0.8);
     /* Widget/Embedded Tab CSS Variables */
     --ph-widget-color: #e0a045; /* Default color */
     --ph-widget-text-color: white; /* Default text color (usually white for contrast) */
+    /* Not customizable atm */
+    --ph-survey-scrollbar-thumb-color: var(--ph-survey-border-color);
+    --ph-survey-scrollbar-track-color: var(--ph-survey-background-color);
+    --ph-survey-outline-color: rgba(59, 130, 246, 0.8);
+    --ph-survey-input-background: white;
+    --ph-survey-input-text-color: #020617;
+    --ph-survey-disabled-button-opacity: 0.6;
 }
 
 .ph-survey {
@@ -285,7 +286,6 @@
         gap: 8px;
         font-size: 13px;
         align-items: center;
-        flex-wrap: wrap;
 
         &:hover {
             &:not(:has(input:checked)) {
@@ -298,6 +298,14 @@
             border-color: var(--ph-survey-rating-active-bg-color);
             box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
         }
+
+        &.choice-option-open {
+            flex-wrap: wrap;
+        }
+
+        & span {
+            color: inherit;
+        }
     }
 
     & input[type='checkbox'],
@@ -313,6 +321,7 @@
         z-index: 1;
         position: relative;
         border-radius: 3px;
+        flex-shrink: 0;
         /* Smooth, welcoming transition with slight bounce */
         transition:
             all 0.2s cubic-bezier(0.4, 0, 0.2, 1),

packages/browser/src/extensions/surveys/surveys-extension-utils.tsx

@@ -63,12 +63,17 @@ export const defaultSurveyAppearance = {
     disabledButtonOpacity: '0.6',
     maxWidth: '300px',
     textSubtleColor: '#939393',
-    inputBackground: 'white',
     boxPadding: '20px 24px',
     boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15)',
     borderRadius: '10px',
     shuffleQuestions: false,
     surveyPopupDelaySeconds: undefined,
+    // Not customizable atm
+    outlineColor: 'rgba(59, 130, 246, 0.8)',
+    inputBackground: 'white',
+    inputTextColor: BLACK_TEXT_COLOR,
+    scrollbarThumbColor: 'var(--ph-survey-border-color)',
+    scrollbarTrackColor: 'var(--ph-survey-background-color)',
 } as const
 
 export const addSurveyCSSVariablesToElement = (
@@ -79,17 +84,17 @@ export const addSurveyCSSVariablesToElement = (
     const effectiveAppearance = { ...defaultSurveyAppearance, ...appearance }
     const hostStyle = element.style
 
-    const isSurveyOnBottom = [SurveyPosition.Center, SurveyPosition.Left, SurveyPosition.Right].includes(
-        effectiveAppearance.position
-    )
+    const surveyHasBottomBorder =
+        ![SurveyPosition.Center, SurveyPosition.Left, SurveyPosition.Right].includes(effectiveAppearance.position) ||
+        (type === SurveyType.Widget && appearance?.widgetType === SurveyWidgetType.Tab)
 
     hostStyle.setProperty('--ph-survey-font-family', getFontFamily(effectiveAppearance.fontFamily))
     hostStyle.setProperty('--ph-survey-box-padding', effectiveAppearance.boxPadding)
     hostStyle.setProperty('--ph-survey-max-width', effectiveAppearance.maxWidth)
     hostStyle.setProperty('--ph-survey-z-index', effectiveAppearance.zIndex)
     hostStyle.setProperty('--ph-survey-border-color', effectiveAppearance.borderColor)
     // Non-bottom surveys or tab surveys have the border bottom
-    if (!isSurveyOnBottom || (type === SurveyType.Widget && appearance?.widgetType !== SurveyWidgetType.Tab)) {
+    if (surveyHasBottomBorder) {
         hostStyle.setProperty('--ph-survey-border-radius', effectiveAppearance.borderRadius)
         hostStyle.setProperty('--ph-survey-border-bottom', '1.5px solid var(--ph-survey-border-color)')
     } else {
@@ -122,8 +127,6 @@ export const addSurveyCSSVariablesToElement = (
         getContrastingTextColor(effectiveAppearance.backgroundColor)
     )
     hostStyle.setProperty('--ph-survey-text-subtle-color', effectiveAppearance.textSubtleColor)
-    hostStyle.setProperty('--ph-survey-input-background', effectiveAppearance.inputBackground)
-    hostStyle.setProperty('--ph-survey-input-text-color', getContrastingTextColor(effectiveAppearance.inputBackground))
     hostStyle.setProperty('--ph-widget-color', effectiveAppearance.widgetColor)
     hostStyle.setProperty('--ph-widget-text-color', getContrastingTextColor(effectiveAppearance.widgetColor))
     hostStyle.setProperty('--ph-widget-z-index', effectiveAppearance.zIndex)
@@ -132,6 +135,12 @@ export const addSurveyCSSVariablesToElement = (
     if (effectiveAppearance.backgroundColor === 'white') {
         hostStyle.setProperty('--ph-survey-input-background', '#f8f8f8')
     }
+
+    hostStyle.setProperty('--ph-survey-input-background', effectiveAppearance.inputBackground)
+    hostStyle.setProperty('--ph-survey-input-text-color', getContrastingTextColor(effectiveAppearance.inputBackground))
+    hostStyle.setProperty('--ph-survey-scrollbar-thumb-color', effectiveAppearance.scrollbarThumbColor)
+    hostStyle.setProperty('--ph-survey-scrollbar-track-color', effectiveAppearance.scrollbarTrackColor)
+    hostStyle.setProperty('--ph-survey-outline-color', effectiveAppearance.outlineColor)
 }
 
 function nameToHex(name: string) {