fix: multiple smaller bugfixes (#805)

* fix: very small bugs

* fix: fixes white space bug

apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/responses/SingleResponse.tsx

@@ -167,7 +167,9 @@ export default function SingleResponse({ data, environmentId, surveyId }: OpenTe
                     <RatingResponse scale={response.scale} answer={response.answer} range={response.range} />
                   </div>
                 ) : (
-                  <p className="ph-no-capture my-1 font-semibold text-slate-700">{response.answer}</p>
+                  <p className="ph-no-capture my-1 whitespace-pre-wrap font-semibold text-slate-700">
+                    {response.answer}
+                  </p>
                 )
               ) : (
                 <p className="ph-no-capture my-1 font-semibold text-slate-700">

apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/SurveyEditor.tsx

@@ -41,6 +41,13 @@ export default function SurveyEditor({
     }
   }, [survey]);
 
+  // when the survey type changes, we need to reset the active question id to the first question
+  useEffect(() => {
+    if (survey?.questions?.length > 0) {
+      setActiveQuestionId(survey.questions[0].id);
+    }
+  }, [localSurvey?.type]);
+
   if (isLoadingSurvey || isLoadingProduct || !localSurvey) {
     return <LoadingSpinner />;
   }

apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/WhenToSendCard.tsx

@@ -174,7 +174,7 @@ export default function WhenToSendCard({ environmentId, localSurvey, setLocalSur
                     </button>
                     <SelectSeparator />
                     {eventClasses.map((eventClass) => (
-                      <SelectItem value={eventClass.id} key={eventClass.id}>
+                      <SelectItem value={eventClass.id} key={eventClass.id} title={eventClass.description}>
                         {eventClass.name}
                       </SelectItem>
                     ))}
@@ -212,7 +212,7 @@ export default function WhenToSendCard({ environmentId, localSurvey, setLocalSur
                       id="triggerDelay"
                       value={localSurvey.delay.toString()}
                       onChange={(e) => handleTriggerDelay(e)}
-                      className="ml-2 mr-2 inline w-16 text-center text-sm"
+                      className="ml-2 mr-2 inline w-16 bg-white text-center text-sm"
                     />
                     seconds before showing the survey.
                   </p>

apps/web/lib/email-template.ts

@@ -157,6 +157,7 @@ export const withEmailTemplate = (content: string) =>
           max-width: 525px;
           margin: 0 auto;
           border-radius: 12px;
+          white-space: pre-wrap;
         "
       >
         ${content}

apps/web/lib/questions.ts

@@ -93,7 +93,7 @@ export const questionTypes: QuestionType[] = [
     preset: {
       headline: "How would you rate {{productName}}",
       subheader: "Don't worry, be honest.",
-      scale: "number",
+      scale: "star",
       range: 5,
       lowerLabel: "Not good",
       upperLabel: "Very good",

packages/ui/components/ColorPicker.tsx

@@ -9,10 +9,10 @@ export const ColorPicker = ({ color, onChange }: { color: string; onChange: (v:
   return (
     <div className="my-2">
       <div className="flex w-full items-center justify-between space-x-1 rounded-md border border-slate-300 px-2 text-sm text-slate-400">
-        <div>
+        <div className="flex w-full items-center">
           #
           <HexColorInput
-            className="ml-2 mr-2 h-10 w-32 border-0 bg-transparent text-slate-500 outline-none focus:border-none"
+            className="ml-2 mr-2 h-10 w-32 flex-1 border-0 bg-transparent text-slate-500 outline-none focus:border-none"
             color={color}
             onChange={onChange}
           />