fix: HudMarginComponent positioning on zoom (#1250)

This fixes so that the HudMarginComponent uses the size of the viewport instead of the zoomed size from the game.

packages/flame/lib/src/components/input/hud_margin_component.dart

@@ -83,7 +83,9 @@ class HudMarginComponent<T extends FlameGame> extends PositionComponent
   }
 
   void _updateMargins() {
-    final screenSize = gameRef.size;
+    final screenSize = positionType == PositionType.viewport
+        ? gameRef.camera.viewport.effectiveSize
+        : gameRef.canvasSize;
     final margin = this.margin!;
     final x = margin.left != 0
         ? margin.left + scaledSize.x / 2

packages/flame/test/components/hud_margin_component_test.dart

@@ -29,5 +29,26 @@ void main() async {
         expectVector2(marginComponent.position, Vector2(960.0, 950.0));
       },
     );
+
+    flameGame.test(
+      'position is still correct after zooming and a game resize',
+      (game) async {
+        final marginComponent = HudMarginComponent(
+          margin: const EdgeInsets.only(right: 10, bottom: 20),
+          size: Vector2.all(20),
+        );
+        await game.ensureAdd(marginComponent);
+        // The position should be (470, 460) since the game size is (500, 500)
+        // and the component has its anchor in the top left corner (which then
+        // is were the margin will be calculated from).
+        // (500, 500) - size(20, 20) - position(10, 20) = (470, 460)
+        expectVector2(marginComponent.position, Vector2(470.0, 460.0));
+        game.update(0);
+        game.camera.zoom = 2.0;
+        game.onGameResize(Vector2.all(500));
+        game.update(0);
+        expectVector2(marginComponent.position, Vector2(470.0, 460.0));
+      },
+    );
   });
 }