Quick fix for iFrame, negative margins and padding to retain shadow

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

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

@@ -67,7 +67,9 @@ const CommentsBox = (props) => {
 
     const containerClass = darkMode() ? 'dark' : '';
     const style = {
-        '--gh-accent-color': accentColor ?? 'blue'
+        '--gh-accent-color': accentColor ?? 'blue',
+        paddingLeft: 32,
+        paddingRight: 32
     };
     return (
         <section className={'ghost-display ' + containerClass} style={style}>

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

@@ -200,7 +200,7 @@ const Form = (props) => {
                 transition duration-200
                 -mt-[12px] -mr-3 mb-10 -ml-[12px] pt-3 pb-2 px-3
                 bg-white dark:bg-[rgba(255,255,255,0.08)]
-                rounded-md shadow-lg dark:shadow-transparent hover:shadow-xl
+                rounded-md shadow-formlg dark:shadow-transparent hover:shadow-formxl
                 ${!commentsCount && !props.isEdit && !props.isReply && '-mt-0 -mr-0 -ml-0'}
                 ${isFocused ? 'cursor-default' : 'cursor-pointer'}`
             }>

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

@@ -65,7 +65,7 @@ const Frame = ({
         </>
     );
 
-    const mergedStyle = {...iframeStyle, ...style};
+    const mergedStyle = {...iframeStyle, ...style, marginLeft: -32, marginRight: -32, width: 'calc(100% + 64px)'}; // negative margins to handle comment form shadows
 
     // For now we're using <NewFrame> because using a functional component with portal caused some weird issues with modals
     return (

apps/comments-ui/tailwind.config.js

@@ -134,6 +134,16 @@ module.exports = {
                 '0px 13px 20px rgba(0, 0, 0, 0.04)', 
                 '0px 14px 57px rgba(0, 0, 0, 0.06)'
             ],
+            formlg: [
+                '0px 0px 1px rgba(0, 0, 0, 0.12)', 
+                '0px 4px 8px rgba(0, 0, 0, 0.03)', 
+                '0px 6px 16px rgba(0, 0, 0, 0.04)'
+            ],
+            formxl: [
+                '0px 0px 1px rgba(0, 0, 0, 0.12)', 
+                '0px 8px 12px rgba(0, 0, 0, 0.04)', 
+                '0px 12px 20px rgba(0, 0, 0, 0.06)'
+            ],
             modal: [
                 '0 3.8px 2.2px rgba(0, 0, 0, 0.028)',
                 '0 9.2px 5.3px rgba(0, 0, 0, 0.04)',