Moved iFrame comments adjustments

- Moved where the styling is to not mess with modals
- Added in some padding at the top for edit box

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

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

@@ -68,8 +68,11 @@ const CommentsBox = (props) => {
     const containerClass = darkMode() ? 'dark' : '';
     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
+        paddingRight: 32,
+        paddingTop: 16,
+        paddingBottom: 16
     };
     return (
         <section className={'ghost-display ' + containerClass} style={style}>

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

@@ -28,8 +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: '100%',
-        height: '400px'
+        width: 'calc(100% + 64px)',
+        height: '400px',
+        marginLeft: '-32px', // negative margins to handle comment alignments and shadows
+        marginRight: '-32px'
     } : {
         zIndex: '3999999',
         position: 'fixed',
@@ -65,7 +67,7 @@ const Frame = ({
         </>
     );
 
-    const mergedStyle = {...iframeStyle, ...style, marginLeft: -32, marginRight: -32, width: 'calc(100% + 64px)'}; // negative margins to handle comment form shadows
+    const mergedStyle = {...iframeStyle, ...style};
 
     // For now we're using <NewFrame> because using a functional component with portal caused some weird issues with modals
     return (