From dd8715fa4611acbcb5c9af3e69e21341fcad5ef6 Mon Sep 17 00:00:00 2001
From: James Morris <moreofmorris@users.noreply.github.com>
Date: Thu, 21 Jul 2022 14:44:28 +0100
Subject: [PATCH] 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 | 5 ++++-
 apps/comments-ui/src/components/Frame.js       | 8 +++++---
 2 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/apps/comments-ui/src/components/CommentsBox.js b/apps/comments-ui/src/components/CommentsBox.js
index d3accef697..26d67d2fe6 100644
--- a/apps/comments-ui/src/components/CommentsBox.js
+++ b/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}>
diff --git a/apps/comments-ui/src/components/Frame.js b/apps/comments-ui/src/components/Frame.js
index 346d49d69a..4eea66b27d 100644
--- a/apps/comments-ui/src/components/Frame.js
+++ b/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 (