From e447c8af88f13f914f915240d20fc7045f933583 Mon Sep 17 00:00:00 2001
From: nikitaorliak-cengage <nikita.orliak@cengage.com>
Date: Mon, 21 Oct 2024 19:33:16 +0200
Subject: [PATCH] fix(Toast): Fixed loading ring alignment when zooming in
 Safari. (#1503)

Co-authored-by: Nikita Orliak <nikita.orliak@nixs.com>
---
 .changeset/fix-toast-loading-ring-misaligned.md          | 5 +++++
 .../src/components/ProgressRing/index.tsx                | 9 ++++++---
 2 files changed, 11 insertions(+), 3 deletions(-)
 create mode 100644 .changeset/fix-toast-loading-ring-misaligned.md

diff --git a/.changeset/fix-toast-loading-ring-misaligned.md b/.changeset/fix-toast-loading-ring-misaligned.md
new file mode 100644
index 0000000000..d3a752f225
--- /dev/null
+++ b/.changeset/fix-toast-loading-ring-misaligned.md
@@ -0,0 +1,5 @@
+---
+'react-magma-dom': patch
+---
+
+fix(Toast): Fixed loading ring alignment when zooming in Safari.
diff --git a/packages/react-magma-dom/src/components/ProgressRing/index.tsx b/packages/react-magma-dom/src/components/ProgressRing/index.tsx
index 7ce9a7fdb6..4ed64ac771 100644
--- a/packages/react-magma-dom/src/components/ProgressRing/index.tsx
+++ b/packages/react-magma-dom/src/components/ProgressRing/index.tsx
@@ -18,6 +18,9 @@ export interface ProgressRingProps
 
 const Circle = styled.circle`
   transition: stroke-dashoffset 0.35s;
+`;
+
+const Svg = styled.svg`
   transform: rotate(-90deg);
   transform-origin: 50% 50%;
 `;
@@ -64,7 +67,7 @@ export const ProgressRing = React.forwardRef<HTMLDivElement, ProgressRingProps>(
 
     return (
       <div {...other} ref={ref} data-testid={testId}>
-        <svg height={radius * 2} width={radius * 2}>
+        <Svg height={radius * 2} width={radius * 2}>
           <Circle
             cx={radius}
             cy={radius}
@@ -73,9 +76,9 @@ export const ProgressRing = React.forwardRef<HTMLDivElement, ProgressRingProps>(
             stroke={color ? color : theme.colors.neutral}
             strokeWidth={strokeWidth}
             strokeDasharray={`${circumference} ${circumference}`}
-            style={{ strokeDashoffset }}
+            strokeDashoffset={strokeDashoffset}
           />
-        </svg>
+        </Svg>
       </div>
     );
   }