diff --git a/frontend/src/components/ui/treatment/FdiToothChart.tsx b/frontend/src/components/ui/treatment/FdiToothChart.tsx index d61b1b3..eba19a3 100644 --- a/frontend/src/components/ui/treatment/FdiToothChart.tsx +++ b/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,40 +291,42 @@ export function FdiToothChart({ /> ) : null} {renderEdge ? ( - linkInteractive ? ( -