dubinc · steven-tey · Nov 7, 2025 · Nov 7, 2025 · Nov 7, 2025 · Nov 7, 2025
diff --git a/apps/web/ui/partners/groups/design/application-form/application-hero-preview.tsx b/apps/web/ui/partners/groups/design/application-form/application-hero-preview.tsx
@@ -30,7 +30,9 @@ export function ApplicationFormHero({
       {/* <p className="font-mono text-xs font-medium uppercase text-[var(--brand)]">
         {label}
       </p> */}
-      <Heading className="text-4xl font-semibold">{title}</Heading>
+      <Heading className="text-4xl font-semibold" dir="auto">
+        {title}
+      </Heading>
       <BlockMarkdown>{description}</BlockMarkdown>
     </div>
   );

diff --git a/apps/web/ui/partners/groups/design/application-form/fields/form-control.tsx b/apps/web/ui/partners/groups/design/application-form/fields/form-control.tsx
@@ -1,12 +1,13 @@
 import { cn } from "@dub/utils";
-import { PropsWithChildren } from "react";
+import { HTMLAttributes } from "react";
 
-export type FormControlProps = PropsWithChildren<{
+export type FormControlProps = {
   label: string;
   required?: boolean;
   helperText?: string;
   error?: string;
-}>;
+  labelDir?: string;
+} & HTMLAttributes<HTMLLabelElement>;
 
 export const FormControlRequiredBadge = () => {
   return (
@@ -22,10 +23,12 @@ export const FormControl = ({
   children,
   error,
   helperText,
+  labelDir,
+  ...rest
 }: FormControlProps) => {
   return (
-    <label>
-      <div className="flex items-center gap-1.5">
+    <label {...rest}>
+      <div className="flex items-center gap-1.5" dir={labelDir}>
         <span className="text-content-emphasis text-sm font-medium">
           {label}
         </span>

diff --git a/apps/web/ui/partners/groups/design/application-form/fields/long-text-field.tsx b/apps/web/ui/partners/groups/design/application-form/fields/long-text-field.tsx
@@ -24,7 +24,7 @@ export function LongTextField({
   const error = !!state.error || exceedsMaxLength;
 
   return (
-    <FormControl label={field.label} required={field.required}>
+    <FormControl label={field.label} required={field.required} dir="auto">
       <textarea
         className={cn(
           "mt-2 block w-full rounded-md text-sm focus:outline-none",

diff --git a/apps/web/ui/partners/groups/design/application-form/fields/multiple-choice-field.tsx b/apps/web/ui/partners/groups/design/application-form/fields/multiple-choice-field.tsx
@@ -52,6 +52,7 @@ export function MultipleChoiceField({
                 <label
                   key={option.id}
                   className="flex w-full items-center gap-2.5 text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+                  dir="auto"
                 >
                   <Checkbox
                     id={option.id}
@@ -115,6 +116,7 @@ export function MultipleChoiceField({
               <label
                 key={option.id}
                 className="flex items-center gap-2.5 leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+                dir="auto"
               >
                 <RadioGroupItem
                   value={option.value}
@@ -139,6 +141,7 @@ export function MultipleChoiceField({
       required={field.required}
       helperText={field.data.multiple ? "Select all that apply" : undefined}
       error={state.error?.message}
+      labelDir="auto"
     >
       {content}
     </FormControl>

diff --git a/apps/web/ui/partners/groups/design/application-form/fields/select-field.tsx b/apps/web/ui/partners/groups/design/application-form/fields/select-field.tsx
@@ -31,6 +31,7 @@ export function SelectField({
       label={field.label}
       required={field.required}
       error={state.error?.message}
+      labelDir="auto"
     >
       <Controller
         control={control}

diff --git a/apps/web/ui/partners/groups/design/application-form/fields/short-text-field.tsx b/apps/web/ui/partners/groups/design/application-form/fields/short-text-field.tsx
@@ -28,7 +28,7 @@ export function ShortTextField({
   const error = !!state.error || exceedsMaxLength;
 
   return (
-    <FormControl label={field.label} required={field.required}>
+    <FormControl label={field.label} required={field.required} dir="auto">
       <input
         className={cn(
           "mt-2 block w-full rounded-md text-sm focus:outline-none",

diff --git a/apps/web/ui/partners/lander/blocks/accordion-block.tsx b/apps/web/ui/partners/lander/blocks/accordion-block.tsx
@@ -21,7 +21,7 @@ export function AccordionBlock({
         <Accordion type="multiple">
           {block.data.items.map((item, idx) => (
             <AccordionItem key={idx} value={idx.toString()}>
-              <AccordionTrigger className="py-2" variant="plus">
+              <AccordionTrigger className="py-2" variant="plus" dir="auto">
                 <h3 className="text-left md:text-lg">{item.title}</h3>
               </AccordionTrigger>
               <AccordionContent>

diff --git a/apps/web/ui/partners/lander/blocks/block-markdown.tsx b/apps/web/ui/partners/lander/blocks/block-markdown.tsx
@@ -9,21 +9,25 @@ export function BlockMarkdown({
   children: string;
 }) {
   return (
-    <Markdown
+    <div
       className={cn(
         "prose prose-neutral max-w-none",
         "prose-headings:leading-tight prose-bullet:text-red-500",
         "prose-a:font-medium prose-a:text-neutral-500 hover:prose-a:text-neutral-600",
         "marker:prose-ul:text-neutral-700 prose-ul:pl-[1.5em] [&_ul>li]:pl-0",
         className,
       )}
-      components={{
-        a: ({ node, ...props }) => (
-          <a {...props} target="_blank" rel="noopener noreferrer" />
-        ),
-      }}
+      dir="auto"
     >
-      {children}
-    </Markdown>
+      <Markdown
+        components={{
+          a: ({ node, ...props }) => (
+            <a {...props} target="_blank" rel="noopener noreferrer" />
+          ),
+        }}
+      >
+        {children}
+      </Markdown>
+    </div>
   );
 }
diff --git a/apps/web/ui/partners/lander/blocks/block-title.tsx b/apps/web/ui/partners/lander/blocks/block-title.tsx
@@ -1,5 +1,7 @@
 export function BlockTitle({ title }: { title?: string }) {
   return title ? (
-    <h2 className="text-2xl font-semibold text-neutral-800">{title}</h2>
+    <h2 className="text-2xl font-semibold text-neutral-800" dir="auto">
+      {title}
+    </h2>
   ) : null;
 }
diff --git a/apps/web/ui/partners/lander/blocks/files-block.tsx b/apps/web/ui/partners/lander/blocks/files-block.tsx
@@ -37,8 +37,12 @@ export function FilesBlock({
                 </div>
               </div>
               <div className="flex flex-col overflow-hidden text-sm text-neutral-700">
-                <span className="truncate font-semibold">{file.name}</span>
-                <span className="truncate">{file.description}</span>
+                <span className="truncate font-semibold" dir="auto">
+                  {file.name}
+                </span>
+                <span className="truncate" dir="auto">
+                  {file.description}
+                </span>
               </div>
             </div>
             <div className="pr-3">

diff --git a/apps/web/ui/partners/lander/lander-hero.tsx b/apps/web/ui/partners/lander/lander-hero.tsx
@@ -15,19 +15,22 @@ export function LanderHero({
 
   return (
     <div className="grid grid-cols-1 gap-5 py-6 sm:mt-14">
-      <span
-        className={cn(
-          "font-mono text-xs font-medium uppercase text-[var(--brand)]",
-          "animate-slide-up-fade [--offset:5px] [animation-duration:1s] [animation-fill-mode:both]",
-        )}
-      >
-        {landerData.label || "Affiliate Program"}
-      </span>
+      <div dir="auto">
+        <span
+          className={cn(
+            "block font-mono text-xs font-medium uppercase text-[var(--brand)]",
+            "animate-slide-up-fade [--offset:5px] [animation-duration:1s] [animation-fill-mode:both]",
+          )}
+        >
+          {landerData.label || "Affiliate Program"}
+        </span>
+      </div>
       <Heading
         className={cn(
           "text-4xl font-semibold",
           "animate-slide-up-fade [--offset:5px] [animation-delay:100ms] [animation-duration:1s] [animation-fill-mode:both]",
         )}
+        dir="auto"
       >
         {landerData.title || `Join the ${program.name} affiliate program`}
       </Heading>
@@ -36,6 +39,7 @@ export function LanderHero({
           "text-base text-neutral-700",
           "animate-slide-up-fade [--offset:5px] [animation-delay:200ms] [animation-duration:1s] [animation-fill-mode:both]",
         )}
+        dir="auto"
       >
         {landerData.description ||
           `Share ${program.name} with your audience and for each subscription generated through your referral, you'll earn a share of the revenue on any plans they purchase.`}