Fix RTL arrow direction and horizontal overflow

scottmakestech · scottmakestech · commit 454608ac3e93 · 2026-04-24T09:54:10.000-05:00
- Flip navigational arrows (→) in RTL using rtl:-scale-x-100 - Flip SVG chevron in hero grid items for RTL - Add overflow-x-hidden to body to prevent horizontal scroll in RTL Ref: #2195
diff --git a/themes/le-2025/layouts/_default/baseof.html b/themes/le-2025/layouts/_default/baseof.html
@@ -3,7 +3,7 @@
 <head>
   {{ partial "head.html" . }}
 </head>
-<body>
+<body class="overflow-x-hidden">
   {{ partial "header.html" . }}
   <main>
     {{ block "main" . }}{{ end }}
diff --git a/themes/le-2025/layouts/partials/components/accordion-item.html b/themes/le-2025/layouts/partials/components/accordion-item.html
@@ -17,7 +17,7 @@
       {{ end }}
       {{ if and .link_url .link_text }}
         <a href="{{ .link_url }}" class="text-link hover:text-link-hover active:text-link-active underline">
-          {{ .link_text }} →
+          {{ .link_text }} <span class="inline-block rtl:-scale-x-100">→</span>
         </a>
       {{ end }}
     </div>
diff --git a/themes/le-2025/layouts/partials/components/blog-grid-item.html b/themes/le-2025/layouts/partials/components/blog-grid-item.html
@@ -14,6 +14,6 @@ <h3 class="text-xl font-bold mt-2 mb-3 text-gray-900">{{ .page.Title }}</h3>
     {{ end }}
   </div>
   <div class="absolute bottom-6 start-6">
-    <span class="font-medium text-link group-hover:text-link-hover">{{ i18n "read_more" }}{{ i18n "common_read_more_arrow" }}</span>
+    <span class="font-medium text-link group-hover:text-link-hover">{{ i18n "read_more" }}<span class="inline-block rtl:-scale-x-100">{{ i18n "common_read_more_arrow" }}</span></span>
   </div>
 </a>
diff --git a/themes/le-2025/layouts/partials/components/hero-grid-item.html b/themes/le-2025/layouts/partials/components/hero-grid-item.html
@@ -12,7 +12,7 @@ <h3 class="text-xl font-semibold mb-4">{{ $title }}</h3>
   {{ else }}
     <a href="{{ $link_url }}" class="font-medium inline-flex items-center">
       {{ $link_text }}
-      <svg class="w-4 h-4 ms-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+      <svg class="w-4 h-4 ms-2 rtl:-scale-x-100" fill="none" stroke="currentColor" viewBox="0 0 24 24">
         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
       </svg>
     </a>
diff --git a/themes/le-2025/layouts/partials/sections/home-hero.html b/themes/le-2025/layouts/partials/sections/home-hero.html
@@ -39,7 +39,7 @@ <h2 class="text-base font-bold mb-2">{{ T "home_hero_annual_report_title" }}</h2
         </div>
         <div class="md:col-span-4 md:text-end">
           <a href="https://www.abetterinternet.org/annual-reports" class="text-sm btn btn-primary">
-            {{ T "home_hero_annual_report_button" }} →
+            {{ T "home_hero_annual_report_button" }} <span class="inline-block rtl:-scale-x-100">→</span>
           </a>
         </div>
         </div>
