fix: embed modal preview (#4548)

Co-authored-by: pandeymangg <anshuman.pandey9999@gmail.com>

apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/ShareEmbedSurvey.tsx

@@ -91,6 +91,7 @@ export const ShareEmbedSurvey = ({
 
   return (
     <Dialog open={open} onOpenChange={handleOpenChange}>
+      <DialogTitle className="sr-only" />
       <DialogContent className="w-full max-w-xl bg-white p-0 md:max-w-3xl lg:h-[700px] lg:max-w-5xl">
         {showView === "start" ? (
           <div className="h-full max-w-full overflow-hidden">

apps/web/modules/email/components/preview-email-template.tsx

@@ -69,7 +69,7 @@ export function PreviewEmailTemplate({
             {getLocalizedValue(firstQuestion.headline, defaultLanguageCode)}
           </Text>
           <Container className="text-question-color m-0 text-sm font-normal leading-6">
-            <Text
+            <div
               className="m-0 p-0"
               dangerouslySetInnerHTML={{
                 __html: getLocalizedValue(firstQuestion.html, defaultLanguageCode) || "",
@@ -117,24 +117,28 @@ export function PreviewEmailTemplate({
                 className={cn("w-full overflow-hidden", {
                   "border border-solid border-slate-200": firstQuestion.scale === "number",
                 })}>
-                <Column className="mb-4 flex w-full justify-between gap-0">
-                  {Array.from({ length: 11 }, (_, i) => (
-                    <EmailButton
-                      href={`${urlWithPrefilling}${firstQuestion.id}=${i.toString()}`}
-                      key={i}
-                      className={cn(
-                        firstQuestion.isColorCodingEnabled ? "h-[46px]" : "h-10",
-                        "relative m-0 w-full overflow-hidden border border-l-0 p-0 text-center align-middle leading-10 text-slate-800",
-                        { "rounded-l-lg border-l": i === 0 },
-                        { "rounded-r-lg": i === 10 }
-                      )}>
-                      {firstQuestion.isColorCodingEnabled ? (
-                        <Section className={`absolute left-0 top-0 h-[6px] w-full ${getNPSOptionColor(i)}`} />
-                      ) : null}
-                      {i}
-                    </EmailButton>
-                  ))}
-                </Column>
+                <Row>
+                  <Column className="mb-4 flex w-full justify-between gap-0">
+                    {Array.from({ length: 11 }, (_, i) => (
+                      <EmailButton
+                        href={`${urlWithPrefilling}${firstQuestion.id}=${i.toString()}`}
+                        key={i}
+                        className={cn(
+                          firstQuestion.isColorCodingEnabled ? "h-[46px]" : "h-10",
+                          "relative m-0 w-full overflow-hidden border border-l-0 border-solid border-slate-200 p-0 text-center align-middle leading-10 text-slate-800",
+                          { "rounded-l-lg border-l": i === 0 },
+                          { "rounded-r-lg": i === 10 }
+                        )}>
+                        {firstQuestion.isColorCodingEnabled ? (
+                          <Section
+                            className={`absolute left-0 top-0 h-[6px] w-full ${getNPSOptionColor(i)}`}
+                          />
+                        ) : null}
+                        {i}
+                      </EmailButton>
+                    ))}
+                  </Column>
+                </Row>
               </Section>
               <Section className="text-question-color mt-2 px-1.5 text-xs leading-6">
                 <Row>
@@ -162,7 +166,7 @@ export function PreviewEmailTemplate({
             {getLocalizedValue(firstQuestion.headline, defaultLanguageCode)}
           </Text>
           <Container className="text-question-color ml-0 mt-2 text-sm font-normal leading-6">
-            <Text
+            <div
               className="m-0 p-0"
               dangerouslySetInnerHTML={{
                 __html: getLocalizedValue(firstQuestion.html, defaultLanguageCode) || "",
@@ -202,42 +206,45 @@ export function PreviewEmailTemplate({
             </Text>
             <Container className="mx-0 mt-4 w-full items-center justify-center">
               <Section className="w-full overflow-hidden">
-                <Column className="flex w-full justify-around">
-                  {Array.from({ length: firstQuestion.range }, (_, i) => (
-                    <EmailButton
-                      className={cn(
-                        "relative m-0 w-full overflow-hidden border border-l-0 p-0 text-center align-middle leading-10 text-slate-800",
-                        { "rounded-l-lg border-l": i === 0 },
-                        { "rounded-r-lg": i === firstQuestion.range - 1 },
-                        firstQuestion.isColorCodingEnabled && firstQuestion.scale === "number"
-                          ? "h-[46px]"
-                          : "h-10",
-                        firstQuestion.scale === "star" ? "h-12" : "h-10"
-                      )}
-                      href={`${urlWithPrefilling}${firstQuestion.id}=${(i + 1).toString()}`}
-                      key={i}>
-                      {firstQuestion.scale === "smiley" && (
-                        <RatingSmiley
-                          active={false}
-                          idx={i}
-                          range={firstQuestion.range}
-                          addColors={firstQuestion.isColorCodingEnabled}
-                        />
-                      )}
-                      {firstQuestion.scale === "number" && (
-                        <>
-                          {firstQuestion.isColorCodingEnabled ? (
-                            <Section
-                              className={`absolute left-0 top-0 h-[6px] w-full ${getRatingNumberOptionColor(firstQuestion.range, i + 1)}`}
-                            />
-                          ) : null}
-                          <Text className="m-0 flex h-10 items-center">{i + 1}</Text>
-                        </>
-                      )}
-                      {firstQuestion.scale === "star" && <Text className="text-3xl">⭐</Text>}
-                    </EmailButton>
-                  ))}
-                </Column>
+                <Row>
+                  <Column className="flex w-full justify-around">
+                    {Array.from({ length: firstQuestion.range }, (_, i) => (
+                      <EmailButton
+                        className={cn(
+                          "relative m-0 flex w-full items-center justify-center overflow-hidden border border-l-0 border-solid border-gray-200 p-0 text-center align-middle leading-10 text-slate-800",
+
+                          { "rounded-l-lg border-l": i === 0 },
+                          { "rounded-r-lg": i === firstQuestion.range - 1 },
+                          firstQuestion.isColorCodingEnabled && firstQuestion.scale === "number"
+                            ? "h-[46px]"
+                            : "h-10",
+                          firstQuestion.scale === "star" ? "h-12" : "h-10"
+                        )}
+                        href={`${urlWithPrefilling}${firstQuestion.id}=${(i + 1).toString()}`}
+                        key={i}>
+                        {firstQuestion.scale === "smiley" && (
+                          <RatingSmiley
+                            active={false}
+                            idx={i}
+                            range={firstQuestion.range}
+                            addColors={firstQuestion.isColorCodingEnabled}
+                          />
+                        )}
+                        {firstQuestion.scale === "number" && (
+                          <>
+                            {firstQuestion.isColorCodingEnabled ? (
+                              <Section
+                                className={`absolute left-0 top-0 h-[6px] w-full ${getRatingNumberOptionColor(firstQuestion.range, i + 1)}`}
+                              />
+                            ) : null}
+                            <Text className="m-0 flex h-10 items-center">{i + 1}</Text>
+                          </>
+                        )}
+                        {firstQuestion.scale === "star" && <Text className="m-0 text-3xl">⭐</Text>}
+                      </EmailButton>
+                    ))}
+                  </Column>
+                </Row>
               </Section>
               <Section className="text-question-color m-0 px-1.5 text-xs leading-6">
                 <Row>
@@ -468,7 +475,7 @@ export function PreviewEmailTemplate({
           <Text className="text-question-color m-0 block p-0 text-sm font-normal leading-6">
             {getLocalizedValue(firstQuestion.subheader, defaultLanguageCode)}
           </Text>
-          <Section className="border-input-border-color rounded-custom mt-4 block flex h-24 w-full items-center justify-center border border-dashed bg-slate-50">
+          <Section className="border-input-border-color rounded-custom mt-4 flex h-24 w-full items-center justify-center border border-dashed bg-slate-50">
             <Container className="mx-auto flex items-center text-center">
               <UploadIcon className="mt-6 inline h-5 w-5 text-slate-400" />
               <Text className="text-slate-400">Click or drag to upload files.</Text>