bugfix: FDI tooth chart is now compatible with RTL direction.

frontend/src/components/ui/treatment/FdiToothChart.tsx

@@ -24,6 +24,12 @@ const TOOTH_NUMBER_GAP = 'mt-1';
 const REALISTIC_NUMBER_GAP = '2mm';
 /** Tight interproximal gap between tooth columns. */
 const TOOTH_GAP = 'gap-x-px';
+/**
+ * Centers a mark on the inline-end edge of a tooth column (between this tooth
+ * and the next in flex order). Logical `end` + 0-width flex stays correct in LTR and RTL.
+ */
+const EDGE_MARK_ANCHOR =
+  'absolute inset-y-0 end-0 z-10 w-0 flex items-center justify-center';
 
 function quadrantMirrored(fdi: FdiToothId): boolean {
   const q = fdi[0];
@@ -285,7 +291,8 @@ export function FdiToothChart({
                 />
               ) : null}
               {renderEdge ? (
-                linkInteractive ? (
+                <div className={EDGE_MARK_ANCHOR}>
+                  {linkInteractive ? (
                     <button
                       type="button"
                       disabled={isDisabled}
@@ -302,7 +309,7 @@ export function FdiToothChart({
                         onToggleLink?.(fdi, next!);
                       }}
                       className={`
-                      absolute right-0 z-10 translate-x-1/2 h-3.5 w-3.5 rounded-full border-2 transition-colors
+                        h-3.5 w-3.5 shrink-0 rounded-full border-2 transition-colors
                         focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/50
                         ${
                           linked
@@ -314,11 +321,12 @@ export function FdiToothChart({
                     />
                   ) : (
                     <span
-                    className="absolute right-0 z-10 translate-x-1/2 h-2.5 w-2.5 rounded-full bg-primary shadow-sm"
+                      className="h-2.5 w-2.5 shrink-0 rounded-full bg-primary shadow-sm"
                       title={t('toothConnectedHint')}
                       aria-hidden
                     />
-                )
+                  )}
+                </div>
               ) : null}
             </div>
           );