Merge pull request #14044 from ethereum/rtl-patches

Fix: homepage code example RTL layout

Author: corwintines

src/components/CodeModal.tsx

@@ -55,7 +55,7 @@ const CodeModal = ({ children, isOpen, setIsOpen, title }: CodeModalProps) => {
         <Button
           variant="outline"
           onClick={() => onCopy(codeSnippet)}
-          className="absolute end-4 top-20"
+          className="absolute right-4 top-20" // Force right, code always LTR
         >
           {hasCopied ? (
             <>

src/pages/index.tsx

@@ -519,7 +519,10 @@ const HomePage = ({
                             </p>
                           </div>
                         </AccordionTrigger>
-                        <AccordionContent className="relative border-t">
+                        <AccordionContent
+                          className="relative border-t"
+                          dir="ltr"
+                        >
                           <Suspense fallback={<SkeletonLines noOfLines={16} />}>
                             <div className="-m-2 max-h-[50vh] overflow-auto">
                               <Codeblock
@@ -551,7 +554,9 @@ const HomePage = ({
                   setIsOpen={setModalOpen}
                   title={codeExamples[activeCode].title}
                 >
-                  <Suspense fallback={<SkeletonLines noOfLines={16} />}>
+                  <Suspense
+                    fallback={<SkeletonLines noOfLines={16} dir="ltr" />}
+                  >
                     <Codeblock
                       codeLanguage={codeExamples[activeCode].codeLanguage}
                       allowCollapse={false}

tailwind/ui/accordion.tsx

@@ -1,7 +1,8 @@
 import * as React from "react"
-import { MdChevronRight } from "react-icons/md"
 import * as AccordionPrimitive from "@radix-ui/react-accordion"
 
+import { ChevronNext } from "@/components/Chevron"
+
 import { cn } from "@/lib/utils/cn"
 
 const Accordion = AccordionPrimitive.Root
@@ -24,14 +25,15 @@ const AccordionTrigger = React.forwardRef<
     <AccordionPrimitive.Trigger
       ref={ref}
       className={cn(
-        "flex flex-1 items-center justify-between gap-2 px-2 py-2 font-medium transition-all hover:bg-background-highlight hover:text-primary-hover focus-visible:outline-1 focus-visible:-outline-offset-1 focus-visible:outline-primary-hover md:px-4 [&[data-state=open]>svg]:-rotate-90 [&[data-state=open]]:bg-background-highlight [&[data-state=open]]:text-primary-high-contrast",
+        "flex flex-1 items-center justify-between gap-2 px-2 py-2 font-medium transition-all hover:bg-background-highlight hover:text-primary-hover focus-visible:outline-1 focus-visible:-outline-offset-1 focus-visible:outline-primary-hover md:px-4 [&[data-state=open]:dir(rtl)>svg]:rotate-90 [&[data-state=open]>svg]:-rotate-90 [&[data-state=open]]:bg-background-highlight [&[data-state=open]]:text-primary-high-contrast",
+
         className
       )}
       {...props}
     >
       {children}
       {!hideIcon && (
-        <MdChevronRight className="size-[1em] shrink-0 text-2xl transition-transform duration-200" />
+        <ChevronNext className="size-[1em] shrink-0 text-2xl transition-transform duration-200" />
       )}
     </AccordionPrimitive.Trigger>
   </AccordionPrimitive.Header>