From 95d4d2173753f69f4f5b5f1b8834d1f7f86b7681 Mon Sep 17 00:00:00 2001
From: Reece <reecebrowne1995@gmail.com>
Date: Thu, 3 Jul 2025 16:16:53 +0100
Subject: [PATCH] Feedback tweaks

---
 .../resources/templates/fragments/common.html     | 15 +++++++++++++--
 .../src/main/resources/templates/home.html        | 13 +++++++++++--
 2 files changed, 24 insertions(+), 4 deletions(-)

diff --git a/stirling-pdf/src/main/resources/templates/fragments/common.html b/stirling-pdf/src/main/resources/templates/fragments/common.html
index 67ed76192..40a4389af 100644
--- a/stirling-pdf/src/main/resources/templates/fragments/common.html
+++ b/stirling-pdf/src/main/resources/templates/fragments/common.html
@@ -39,10 +39,21 @@
       const navbar = document.querySelector('.navbar');
       
       if (navbar) {
-        navbar.style.transform = `translateX(-50%) scale(${navScale})`;
+        // RTL support - check document direction
+        const isRTL = document.documentElement.dir === 'rtl' || document.documentElement.getAttribute('dir') === 'rtl';
+        
+        const translateX = isRTL ? '50%' : '-50%';
+        navbar.style.transform = `translateX(${translateX}) scale(${navScale})`;
         navbar.style.transformOrigin = 'top center';
         navbar.style.width = `${100 / navScale}%`;
-        navbar.style.left = '50%';
+        
+        if (isRTL) {
+          navbar.style.right = '50%';
+          navbar.style.left = 'auto';
+        } else {
+          navbar.style.left = '50%';
+          navbar.style.right = 'auto';
+        }
         
         // Adjust bottom margin based on scale to prevent overlap/gaps
         const baseHeight = 60; // Assume base navbar height
diff --git a/stirling-pdf/src/main/resources/templates/home.html b/stirling-pdf/src/main/resources/templates/home.html
index 5e3edd837..ec61f03c0 100644
--- a/stirling-pdf/src/main/resources/templates/home.html
+++ b/stirling-pdf/src/main/resources/templates/home.html
@@ -246,10 +246,19 @@
       // Dynamically adjust features container width based on scale
       const featuresContainer = document.querySelector('.features-container');
       if (featuresContainer) {
+        const isRTL = document.documentElement.dir === 'rtl' || document.documentElement.getAttribute('dir') === 'rtl';
         const dynamicWidth = Math.min(140, 100 / finalS);
-        const leftOffset = (dynamicWidth - 100) / 2;
+        const offset = (dynamicWidth - 100) / 2;
+        
         featuresContainer.style.width = `${dynamicWidth}%`;
-        featuresContainer.style.left = `-${leftOffset}%`;
+        
+        if (isRTL) {
+          featuresContainer.style.right = `-${offset}%`;
+          featuresContainer.style.left = 'auto';
+        } else {
+          featuresContainer.style.left = `-${offset}%`;
+          featuresContainer.style.right = 'auto';
+        }
       }
       
     }