fix(ComparisonSlider): change the way width is calculated to avoid transform:scale issues

src/shared/lib/helpers/createCharacterComparison/createCharacterComparison.svelte.ts

@@ -2,7 +2,13 @@
  * Interface representing a line of text with its measured width.
  */
 export interface LineData {
+    /**
+     * Line's text
+     */
     text: string;
+    /**
+     * It's width
+     */
     width: number;
 }
 
@@ -80,16 +86,23 @@ export function createCharacterComparison<
         container: HTMLElement | undefined,
         measureCanvas: HTMLCanvasElement | undefined,
     ) {
-        if (!container || !measureCanvas || !fontA() || !fontB()) return;
+        if (!container || !measureCanvas || !fontA() || !fontB()) {
+            return;
+        }
 
-        const rect = container.getBoundingClientRect();
-        containerWidth = rect.width;
+        // Use offsetWidth instead of getBoundingClientRect() to avoid CSS transform scaling issues
+        // getBoundingClientRect() returns transformed dimensions, which causes incorrect line breaking
+        // when PerspectivePlan applies scale() transforms (e.g., scale(0.5) in settings mode)
+        const width = container.offsetWidth;
+        containerWidth = width;
 
         // Padding considerations - matches the container padding
         const padding = window.innerWidth < 640 ? 48 : 96;
-        const availableWidth = rect.width - padding;
+        const availableWidth = width - padding;
         const ctx = measureCanvas.getContext('2d');
-        if (!ctx) return;
+        if (!ctx) {
+            return;
+        }
 
         const controlledFontSize = size();
         const fontSize = getFontSize();