From 0bcf4d24d2809e61ecd539e331b28ba490616b5d Mon Sep 17 00:00:00 2001
From: Paul Wackerow <54227730+wackerow@users.noreply.github.com>
Date: Thu, 29 May 2025 11:35:24 -0700
Subject: [PATCH 1/2] fix(temp): force roadmap release carousel to LTR

---
 app/[locale]/roadmap/_components/ReleaseCarousel.tsx | 7 ++++++-
 src/components/ui/carousel.tsx                       | 8 +++++---
 2 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/app/[locale]/roadmap/_components/ReleaseCarousel.tsx b/app/[locale]/roadmap/_components/ReleaseCarousel.tsx
index c092d5eebe0..ae2006f0c29 100644
--- a/app/[locale]/roadmap/_components/ReleaseCarousel.tsx
+++ b/app/[locale]/roadmap/_components/ReleaseCarousel.tsx
@@ -1,5 +1,8 @@
 "use client"
 
+// TODO: Extract intl strings
+// TODO: Fix RTL compatibility; currenly forced to LTR flow
+
 import { useEffect, useState } from "react"
 
 import { Image } from "@/components/Image"
@@ -73,7 +76,7 @@ const ReleaseCarousel = () => {
   }, [api1, api2])
 
   return (
-    <div className="w-full max-w-[100vw] overflow-hidden">
+    <div className="w-full max-w-[100vw] overflow-hidden" dir="ltr">
       <div className="mx-auto w-full max-w-screen-2xl px-4 sm:px-6">
         <div className="w-full rounded-2xl bg-background-highlight py-6">
           <div className="flex flex-col gap-6">
@@ -84,6 +87,7 @@ const ReleaseCarousel = () => {
               opts={{
                 align: "center",
                 containScroll: false,
+                direction: "ltr",
                 loop: false,
                 startIndex: findLatestReleaseIndex(),
               }}
@@ -202,6 +206,7 @@ const ReleaseCarousel = () => {
               opts={{
                 align: "center",
                 containScroll: false,
+                direction: "ltr",
                 loop: false,
                 startIndex: findLatestReleaseIndex(),
               }}
diff --git a/src/components/ui/carousel.tsx b/src/components/ui/carousel.tsx
index 32b67c80cfb..c95abe765d0 100644
--- a/src/components/ui/carousel.tsx
+++ b/src/components/ui/carousel.tsx
@@ -1,9 +1,11 @@
+// TODO: Fix RTL compatibility
+
 import * as React from "react"
 import useEmblaCarousel, {
   type UseEmblaCarouselType,
 } from "embla-carousel-react"
+import { MdChevronLeft, MdChevronRight } from "react-icons/md"
 
-import { ChevronNext, ChevronPrev } from "@/components/Chevron"
 import { Button } from "@/components/ui/buttons/Button"
 
 import { cn } from "@/lib/utils/cn"
@@ -215,7 +217,7 @@ const CarouselPrevious = React.forwardRef<
       onClick={scrollPrev}
       {...props}
     >
-      <ChevronPrev className="h-8 w-8" />
+      <MdChevronLeft className="h-8 w-8" />
       <span className="sr-only">Previous slide</span>
     </Button>
   )
@@ -244,7 +246,7 @@ const CarouselNext = React.forwardRef<
       onClick={scrollNext}
       {...props}
     >
-      <ChevronNext className="h-8 w-8" />
+      <MdChevronRight className="h-8 w-8" />
       <span className="sr-only">Next slide</span>
     </Button>
   )

From d409f9cfcb31a8a51794f69de9319169b41739d3 Mon Sep 17 00:00:00 2001
From: Paul Wackerow <54227730+wackerow@users.noreply.github.com>
Date: Thu, 29 May 2025 12:02:20 -0700
Subject: [PATCH 2/2] fix: use direction-responsive positioning

---
 src/components/ui/carousel.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/ui/carousel.tsx b/src/components/ui/carousel.tsx
index c95abe765d0..e305c16900b 100644
--- a/src/components/ui/carousel.tsx
+++ b/src/components/ui/carousel.tsx
@@ -209,8 +209,8 @@ const CarouselPrevious = React.forwardRef<
       className={cn(
         "absolute h-8 w-8 rounded-full",
         orientation === "horizontal"
-          ? "left-5 top-1/2 -translate-y-1/2"
-          : "-top-12 left-1/2 -translate-x-1/2 rotate-90",
+          ? "start-5 top-1/2 -translate-y-1/2"
+          : "-top-12 start-1/2 -translate-x-1/2 rotate-90",
         className
       )}
       disabled={!canScrollPrev}
@@ -238,8 +238,8 @@ const CarouselNext = React.forwardRef<
       className={cn(
         "absolute h-8 w-8 rounded-full",
         orientation === "horizontal"
-          ? "right-5 top-1/2 -translate-y-1/2"
-          : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
+          ? "end-5 top-1/2 -translate-y-1/2"
+          : "-bottom-12 start-1/2 -translate-x-1/2 rotate-90",
         className
       )}
       disabled={!canScrollNext}