fix: RTL support for placeholder and text input in preview mode

Co-Authored-By: Johannes <johannes@formbricks.com>

apps/web/modules/ui/components/preview-survey/components/modal.tsx

@@ -133,6 +133,7 @@ export const Modal = ({
     <div
       id="preview-survey-base"
       aria-live="assertive"
+      dir="auto"
       className={cn(
         "relative h-full w-full overflow-hidden rounded-b-md",
         overlayVisible ? (darkOverlay ? "bg-slate-700/80" : "bg-white/50") : "",
@@ -149,6 +150,7 @@ export const Modal = ({
             background,
           }),
         }}
+        dir="auto"
         className={cn(
           "no-scrollbar pointer-events-auto absolute max-h-[90%] w-full max-w-sm transition-all duration-500 ease-in-out",
           previewMode === "desktop" ? getPlacementStyle(placement) : "max-w-full",

apps/web/modules/ui/components/preview-survey/index.tsx

@@ -283,13 +283,13 @@ export const PreviewSurvey = ({
                   />
                 </Modal>
               ) : (
-                <div className="flex h-full w-full flex-col justify-center px-1">
+                <div className="flex h-full w-full flex-col justify-center px-1" dir="auto">
                   <div className="absolute left-5 top-5">
                     {!styling.isLogoHidden && (
                       <ClientLogo environmentId={environment.id} projectLogo={project.logo} previewSurvey />
                     )}
                   </div>
-                  <div className="z-10 w-full max-w-md rounded-lg border border-transparent">
+                  <div className="z-10 w-full max-w-md rounded-lg border border-transparent" dir="auto">
                     <SurveyInline
                       isPreviewMode={true}
                       survey={{ ...survey, type: "link" }}
@@ -397,7 +397,7 @@ export const PreviewSurvey = ({
                     <ClientLogo environmentId={environment.id} projectLogo={project.logo} previewSurvey />
                   )}
                 </div>
-                <div className="z-0 w-full max-w-4xl rounded-lg border-transparent">
+                <div className="z-0 w-full max-w-4xl rounded-lg border-transparent" dir="auto">
                   <SurveyInline
                     isPreviewMode={true}
                     survey={{ ...survey, type: "link" }}