diff --git a/change/react-native-windows-4a3033f2-c79a-4a04-859f-0c4647cf1b4d.json b/change/react-native-windows-4a3033f2-c79a-4a04-859f-0c4647cf1b4d.json new file mode 100644 index 00000000000..5ef35d7d587 --- /dev/null +++ b/change/react-native-windows-4a3033f2-c79a-4a04-859f-0c4647cf1b4d.json @@ -0,0 +1,7 @@ +{ + "type": "prerelease", + "comment": "Fix DPI scaling for debugging overlay highlights", + "packageName": "react-native-windows", + "email": "74712637+iamAbhi-916@users.noreply.github.com", + "dependentChangeType": "patch" +} diff --git a/vnext/Microsoft.ReactNative/Fabric/Composition/DebuggingOverlayComponentView.cpp b/vnext/Microsoft.ReactNative/Fabric/Composition/DebuggingOverlayComponentView.cpp index 84452bf67aa..365ba85cdb4 100644 --- a/vnext/Microsoft.ReactNative/Fabric/Composition/DebuggingOverlayComponentView.cpp +++ b/vnext/Microsoft.ReactNative/Fabric/Composition/DebuggingOverlayComponentView.cpp @@ -86,10 +86,11 @@ void DebuggingOverlayComponentView::HandleCommand( if (auto root = rootComponentView()) { auto rootVisual = root->OuterVisual(); auto brush = m_compContext.CreateColorBrush({204, 200, 230, 255}); + float scaleFactor = m_layoutMetrics.pointScaleFactor; for (auto &element : elements) { auto overlayVisual = m_compContext.CreateSpriteVisual(); - overlayVisual.Size({element.width, element.height}); - overlayVisual.Offset({element.x, element.y, 0.0f}); + overlayVisual.Size({element.width * scaleFactor, element.height * scaleFactor}); + overlayVisual.Offset({element.x * scaleFactor, element.y * scaleFactor, 0.0f}); overlayVisual.Brush(brush); rootVisual.InsertAt(overlayVisual, root->overlayIndex() + m_activeOverlays);