From b58eef1221694599a396007856baa5d9f4b3f2f8 Mon Sep 17 00:00:00 2001
From: omercelikdev <omer@omercelik.dev>
Date: Sun, 12 Jul 2026 22:11:21 +0300
Subject: [PATCH] rtl: use logical inset for the transform picker + pause dot
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Two spots still used physical left/right instead of logical inset, so they
sat on the wrong side under an RTL language:

- PreviewPanel transform picker popover: `left-0` → `start-0`, so the 520px
  panel opens from the reading-start edge instead of always the physical
  left.
- Sidebar capture-paused status dot: `right-1` → `end-1`.

(The window resize handles keep physical left/right — those track real
window edges, not reading direction.)

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 src/components/layout/Sidebar.tsx       | 2 +-
 src/components/preview/PreviewPanel.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/layout/Sidebar.tsx b/src/components/layout/Sidebar.tsx
index 09ba888..9b00a5e 100644
--- a/src/components/layout/Sidebar.tsx
+++ b/src/components/layout/Sidebar.tsx
@@ -92,7 +92,7 @@ export function Sidebar() {
         >
           {isCapturePaused ? <Play className="w-4 h-4" /> : <Pause className="w-4 h-4" />}
           {isCapturePaused && (
-            <span className="absolute top-1 right-1 w-1.5 h-1.5 rounded-full bg-amber-500 animate-pulse" />
+            <span className="absolute top-1 end-1 w-1.5 h-1.5 rounded-full bg-amber-500 animate-pulse" />
           )}
           <span className="absolute left-full ms-2 px-2 py-1 bg-surface border border-border rounded-md text-xs font-medium whitespace-nowrap opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all group-hover:delay-500 z-50 shadow-lg">
             {isCapturePaused ? t('capture.resume') : t('capture.pause')}
diff --git a/src/components/preview/PreviewPanel.tsx b/src/components/preview/PreviewPanel.tsx
index 224f1c0..8577e44 100644
--- a/src/components/preview/PreviewPanel.tsx
+++ b/src/components/preview/PreviewPanel.tsx
@@ -598,7 +598,7 @@ function TransformPicker({
   return (
     <div
       ref={pickerRef}
-      className="absolute top-full left-0 z-50 mt-1 w-[520px] max-w-[calc(100vw-24px)] rounded-xl bg-popover border border-popover-border shadow-[0_12px_40px_rgb(0_0_0/0.16)] dark:shadow-[0_12px_40px_rgb(0_0_0/0.55)] overflow-hidden"
+      className="absolute top-full start-0 z-50 mt-1 w-[520px] max-w-[calc(100vw-24px)] rounded-xl bg-popover border border-popover-border shadow-[0_12px_40px_rgb(0_0_0/0.16)] dark:shadow-[0_12px_40px_rgb(0_0_0/0.55)] overflow-hidden"
     >
       <div className="flex items-center gap-2 px-3 py-2 border-b border-popover-border/70">
         <Search className="w-3.5 h-3.5 text-muted-foreground shrink-0" />