Push some more style tweaks for iFrame but it may need more

- Includes more dynamic styling for negative margins for iFrames
- This may well change again when looking more closely with themes

refs https://github.com/TryGhost/Team/issues/1701

apps/comments-ui/src/components/CommentsBox.js

@@ -69,8 +69,8 @@ const CommentsBox = (props) => {
     const style = {
         '--gh-accent-color': accentColor ?? 'blue',
         // need careful padding adjustments to match iFrame negative margins and to not cut off top editing form
-        paddingLeft: 32,
-        paddingRight: 32,
+        paddingLeft: 'min(4vmin,20px)',
+        paddingRight: 'min(4vmin,20px)',
         paddingTop: 16,
         paddingBottom: 16
     };

apps/comments-ui/src/components/Frame.js

@@ -28,10 +28,10 @@ const Frame = ({
 
     // For now we don't listen for type changes, we could consider adding useEffect, but that won't be used
     const defaultStyle = type === 'dynamic' ? {
-        width: 'calc(100% + 64px)',
+        width: 'calc(100% + min(8vmin, 40px))',
         height: '400px',
-        marginLeft: '-32px', // negative margins to handle comment alignments and shadows
-        marginRight: '-32px'
+        marginLeft: 'max(-4vmin,-20px)', // negative margins to handle comment alignments and shadows
+        marginRight: 'max(-4vmin,-20px)'
     } : {
         zIndex: '3999999',
         position: 'fixed',