From 180754a14edebacba58a2d964a9a556f849fc5cb Mon Sep 17 00:00:00 2001
From: diondiondion <mail@diondiondion.com>
Date: Wed, 11 Jun 2025 17:17:14 +0200
Subject: [PATCH] [Glitch] fix: Fix direction of media gallery arrows

Port 9896bed85feff10c23490dcaba145a1166f4c4a9 to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>
---
 .../glitch/features/ui/components/media_modal.jsx        | 4 ++--
 app/javascript/flavours/glitch/styles/components.scss    | 5 +++--
 app/javascript/flavours/glitch/styles/css_variables.scss | 9 +++++++++
 3 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/app/javascript/flavours/glitch/features/ui/components/media_modal.jsx b/app/javascript/flavours/glitch/features/ui/components/media_modal.jsx
index 4bc8e946eb..0660f352a2 100644
--- a/app/javascript/flavours/glitch/features/ui/components/media_modal.jsx
+++ b/app/javascript/flavours/glitch/features/ui/components/media_modal.jsx
@@ -168,8 +168,8 @@ class MediaModal extends ImmutablePureComponent {
 
     const index = this.getIndex();
 
-    const leftNav  = media.size > 1 && <button tabIndex={0} className='media-modal__nav media-modal__nav--left' onClick={this.handlePrevClick} aria-label={intl.formatMessage(messages.previous)}><Icon id='chevron-left' icon={ChevronLeftIcon} /></button>;
-    const rightNav = media.size > 1 && <button tabIndex={0} className='media-modal__nav  media-modal__nav--right' onClick={this.handleNextClick} aria-label={intl.formatMessage(messages.next)}><Icon id='chevron-right' icon={ChevronRightIcon} /></button>;
+    const leftNav  = media.size > 1 && <button tabIndex={0} className='media-modal__nav media-modal__nav--prev' onClick={this.handlePrevClick} aria-label={intl.formatMessage(messages.previous)}><Icon id='chevron-left' icon={ChevronLeftIcon} /></button>;
+    const rightNav = media.size > 1 && <button tabIndex={0} className='media-modal__nav  media-modal__nav--next' onClick={this.handleNextClick} aria-label={intl.formatMessage(messages.next)}><Icon id='chevron-right' icon={ChevronRightIcon} /></button>;
 
     const content = media.map((image, idx) => {
       const width  = image.getIn(['meta', 'original', 'width']) || null;
diff --git a/app/javascript/flavours/glitch/styles/components.scss b/app/javascript/flavours/glitch/styles/components.scss
index 81dce6c825..241fe5a92d 100644
--- a/app/javascript/flavours/glitch/styles/components.scss
+++ b/app/javascript/flavours/glitch/styles/components.scss
@@ -6087,6 +6087,7 @@ a.status-card {
   position: absolute;
   top: 0;
   bottom: 0;
+  transform: scaleX(var(--text-x-direction));
 
   &:hover,
   &:focus,
@@ -6095,11 +6096,11 @@ a.status-card {
   }
 }
 
-.media-modal__nav--left {
+.media-modal__nav--prev {
   inset-inline-start: 0;
 }
 
-.media-modal__nav--right {
+.media-modal__nav--next {
   inset-inline-end: 0;
 }
 
diff --git a/app/javascript/flavours/glitch/styles/css_variables.scss b/app/javascript/flavours/glitch/styles/css_variables.scss
index 413efca3f6..4390a917bf 100644
--- a/app/javascript/flavours/glitch/styles/css_variables.scss
+++ b/app/javascript/flavours/glitch/styles/css_variables.scss
@@ -35,3 +35,12 @@
   --input-background-color: var(--surface-variant-background-color);
   --on-input-color: #{$secondary-text-color};
 }
+
+body {
+  // Variable for easily inverting directional UI elements,
+  --text-x-direction: 1;
+
+  &.rtl {
+    --text-x-direction: -1;
+  }
+}