Repository: pwrdrvr/microapps-core (language: python)

Issue:
v0.3 - Fix iframe scroll wiggle
- The page container is allowed to move, which is causing problems with scrolling (dragging the page up/down)


Discussion / hints:

Fix patch:
diff --git a/packages/microapps-cdk/src/MicroAppsEdgeToOrigin.ts b/packages/microapps-cdk/src/MicroAppsEdgeToOrigin.ts
index 71f8a6b7..3aebba35 100644
--- a/packages/microapps-cdk/src/MicroAppsEdgeToOrigin.ts
+++ b/packages/microapps-cdk/src/MicroAppsEdgeToOrigin.ts
@@ -1,7 +1,7 @@
 import { existsSync, writeFileSync } from 'fs';
 import * as os from 'os';
 import * as path from 'path';
-import { Aws, Duration, RemovalPolicy } from 'aws-cdk-lib';
+import { Aws, Duration, RemovalPolicy, Stack } from 'aws-cdk-lib';
 import * as cf from 'aws-cdk-lib/aws-cloudfront';
 import * as iam from 'aws-cdk-lib/aws-iam';
 import * as lambda from 'aws-cdk-lib/aws-lambda';
@@ -279,7 +279,11 @@ replaceHostHeader: ${props.replaceHostHeader}`;
   ) {
     writeFileSync(path.join(distPath, 'config.yml'), edgeToOriginConfigYaml);
 
-    return new cf.experimental.EdgeFunction(this, 'edge-to-apigwy-func', {
+    const { stackName } = Stack.of(this);
+
+    // EdgeFunction has a bug where it will generate the same parameter
+    // name across multiple stacks in the same region if the id param is constant
+    return new cf.experimental.EdgeFunction(this, `${stackName}-edge-to-apigwy-func`, {
       code: lambda.Code.fromAsset(distPath),
       handler: 'index.handler',
       ...(edgeToOriginFuncProps.functionName
diff --git a/packages/microapps-router/templates/appFrame.html b/packages/microapps-router/templates/appFrame.html
index 2c194077..09e4ec08 100644
--- a/packages/microapps-router/templates/appFrame.html
+++ b/packages/microapps-router/templates/appFrame.html
@@ -5,6 +5,6 @@
     <title></title>
 </head>
 <body>
-    <iframe src="{{iframeSrc}}" seamless height="100%" width="100%" frameBorder="0"></iframe>
+    <iframe src="{{iframeSrc}}" seamless frameBorder="0" style="top: 0; left: 0; width: 100%; height: 100%; position: fixed"></iframe>
 </body>
 </html>


Test patch:
diff --git a/packages/microapps-cdk/test/MicroApps.test.ts b/packages/microapps-cdk/test/MicroApps.test.ts
index c37bbaf5..a4d9b1ea 100644
--- a/packages/microapps-cdk/test/MicroApps.test.ts
+++ b/packages/microapps-cdk/test/MicroApps.test.ts
@@ -261,7 +261,7 @@ describe('MicroApps', () => {
         constructsvcstable0311CF05: {
           Type: 'AWS::DynamoDB::Table',
         },
-        constructedgeToOriginedgetoapigwyfuncFn10C0FCC9: {
+        constructedgeToOriginstackedgetoapigwyfuncFn26A556E6: {
           Type: 'AWS::Lambda::Function',
         },
         constructsvcsdeployerfunc88CC1526: {