From 99f71a2a8bc988e1dd680d4c0cb4fbdd928336fb Mon Sep 17 00:00:00 2001
From: alcercu <333aleix333@gmail.com>
Date: Wed, 4 Dec 2024 12:20:59 +0100
Subject: [PATCH] fix: add divide-x-reverse to answers when the langDir is rtl

---
 .../case/[disputeId]/components/Question.tsx     | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

diff --git a/src/app/[locale]/case/[disputeId]/components/Question.tsx b/src/app/[locale]/case/[disputeId]/components/Question.tsx
index 19295ac..60b9576 100644
--- a/src/app/[locale]/case/[disputeId]/components/Question.tsx
+++ b/src/app/[locale]/case/[disputeId]/components/Question.tsx
@@ -1,11 +1,11 @@
 import React from "react";
 
-import { getTranslations } from "next-intl/server";
+import clsx from "clsx";
+import { getLocale, getTranslations } from "next-intl/server";
 import { headers } from "next/headers";
 import Image from "next/image";
 import Link from "next/link";
-
-import clsx from "clsx";
+import { getLangDir } from "rtl-detect";
 
 import { type StatusResponseType } from "@/app/api/dispute/[id]/status/query";
 import { DisputeDetails } from "@/app/api/dispute/[id]/template/route";
@@ -40,6 +40,9 @@ const Question: React.FC<IQuestion> = async ({ disputeId }) => {
   ).toString(16)}`;
 
   const t = await getTranslations("case.question");
+  const locale = await getLocale();
+
+  const langDir = getLangDir(locale);
 
   return (
     <div className="space-y-6">
@@ -77,7 +80,12 @@ const Question: React.FC<IQuestion> = async ({ disputeId }) => {
           </Link>
         </div>
       ) : null}
-      <div className="grid auto-cols-fr grid-flow-col divide-x-2 divide-stroke">
+      <div
+        className={clsx(
+          "grid auto-cols-fr grid-flow-col divide-x-2 divide-stroke",
+          langDir === "rtl" && "divide-x-reverse",
+        )}
+      >
         {disputeDetails.answers.map((answer) => (
           <div key={answer.title}>
             <div