fix: improve RTL support for Arabic text input and placeholders

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

apps/web/modules/ui/components/input/index.tsx

@@ -19,6 +19,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(({ className, isInv
         isInvalid && "border border-red-500 focus:border-red-500"
       )}
       ref={ref}
+      dir="auto"
       {...props}
     />
   );

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,7 +283,7 @@ 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 />

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

@@ -72,5 +72,5 @@ export const SurveyInline = (props: Omit<SurveyContainerProps, "containerId">) =
     }
   }, [isScriptLoaded, renderInline]);
 
-  return <div id={containerId} className="h-full w-full" />;
+  return <div id={containerId} className="h-full w-full" dir="auto" />;
 };