From d377d2e1454e9ad485d867c754b4ea62c49b57c4 Mon Sep 17 00:00:00 2001
From: Nicolas-micuda-becker
 <155229215+Nicolas-micuda-becker@users.noreply.github.com>
Date: Mon, 13 Apr 2026 20:29:35 +0200
Subject: [PATCH] fix(web): center images in RTL layouts (#27678) (#27753)

---
 web/src/lib/components/AdaptiveImage.svelte | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/web/src/lib/components/AdaptiveImage.svelte b/web/src/lib/components/AdaptiveImage.svelte
index 90c9328cf8..f60260bd05 100644
--- a/web/src/lib/components/AdaptiveImage.svelte
+++ b/web/src/lib/components/AdaptiveImage.svelte
@@ -98,13 +98,13 @@
     return { width: 1, height: 1 };
   });
 
-  const { width, height, left, top } = $derived.by(() => {
+  const { width, height, insetInlineStart, top } = $derived.by(() => {
     const scaleFn = objectFit === 'cover' ? scaleToCover : scaleToFit;
     const { width, height } = scaleFn(imageDimensions, container);
     return {
       width: width + 'px',
       height: height + 'px',
-      left: (container.width - width) / 2 + 'px',
+      insetInlineStart: (container.width - width) / 2 + 'px',
       top: (container.height - height) / 2 + 'px',
     };
   });
@@ -151,7 +151,13 @@
 <div class="relative h-full w-full overflow-hidden will-change-transform" bind:this={ref}>
   {@render backdrop?.()}
 
-  <div class="absolute inset-0 pointer-events-none" style:left style:top style:width style:height>
+  <div
+    class="absolute inset-0 pointer-events-none"
+    style:inset-inline-start={insetInlineStart}
+    style:top
+    style:width
+    style:height
+  >
     {#if show.alphaBackground}
       <AlphaBackground />
     {/if}