fix: headline alignment issue (#1641)

Co-authored-by: Matthias Nannt <mail@matthiasnannt.com>

packages/surveys/src/components/general/Headline.tsx

@@ -1,17 +1,20 @@
 interface HeadlineProps {
   headline?: string;
   questionId: string;
-  style?: any;
   required?: boolean;
+  alignTextCenter?: boolean;
 }
 
-export default function Headline({ headline, questionId, style, required = true }: HeadlineProps) {
+export default function Headline({
+  headline,
+  questionId,
+  required = true,
+  alignTextCenter = false,
+}: HeadlineProps) {
   return (
-    <label
-      htmlFor={questionId}
-      className="text-heading mb-1.5 block text-base font-semibold leading-6"
-      style={style}>
-      <div className={"flex items-center justify-center"} style={style}>
+    <label htmlFor={questionId} className="text-heading mb-1.5 block text-base font-semibold leading-6">
+      <div
+        className={`flex items-center  ${alignTextCenter ? "justify-center" : "mr-[3ch] justify-between"}`}>
         {headline}
         {!required && (
           <span className="text-info-text self-start	text-sm font-normal leading-7" tabIndex={-1}>

packages/surveys/src/components/general/ThankYouCard.tsx

@@ -36,7 +36,7 @@ export default function ThankYouCard({
       <span className="bg-shadow mb-[10px] inline-block h-1 w-16 rounded-[100%]"></span>
 
       <div>
-        <Headline headline={headline} questionId="thankYouCard" style={{ "justify-content": "center" }} />
+        <Headline alignTextCenter={true} headline={headline} questionId="thankYouCard" />
         <Subheader subheader={subheader} questionId="thankYouCard" />
         <RedirectCountDown redirectUrl={redirectUrl} isRedirectDisabled={isRedirectDisabled} />
       </div>