fix: calculate correct size when no_footer=true

frontend/apps/remark42/app/components/auth/auth.hooks.ts

@@ -3,16 +3,9 @@ import { useIntl } from 'react-intl';
 
 import { errorMessages, RequestError } from 'utils/errorUtils';
 import { isObject } from 'utils/is-object';
-import { parseMessage, postMessageToParent } from 'utils/post-message';
+import { parseMessage, updateIframeHeight } from 'utils/post-message';
 import { messages } from './auth.messsages';
 
-function handleChangeIframeSize(element: HTMLElement) {
-  const { top } = element.getBoundingClientRect();
-  const height = Math.max(window.scrollY + Math.abs(top) + element.scrollHeight + 20, document.body.offsetHeight);
-
-  postMessageToParent({ height });
-}
-
 export function useDropdown(disableClosing?: boolean) {
   const rootRef = useRef<HTMLDivElement>(null);
   const clickInsideRef = useRef<boolean>(false);
@@ -74,10 +67,10 @@ export function useDropdown(disableClosing?: boolean) {
       return;
     }
 
-    handleChangeIframeSize(dropdownElement);
+    updateIframeHeight(dropdownElement);
 
     const observer = new ResizeObserver(() => {
-      handleChangeIframeSize(dropdownElement);
+      updateIframeHeight(dropdownElement);
     });
 
     observer.observe(dropdownElement);

frontend/apps/remark42/app/components/root/root.tsx

@@ -35,19 +35,12 @@ import { ConnectedComment as Comment } from 'components/comment/connected-commen
 import { uploadImage, getPreview } from 'common/api';
 import { isUserAnonymous } from 'utils/isUserAnonymous';
 import { bindActions } from 'utils/actionBinder';
-import { postMessageToParent, parseMessage } from 'utils/post-message';
+import { postMessageToParent, parseMessage, updateIframeHeight } from 'utils/post-message';
 import { useActions } from 'hooks/useAction';
 import { setCollapse } from 'store/thread/actions';
 
 import styles from './root.module.css';
 
-/**
- * Sends size of the iframe to parent window
- */
-export function updateIframeHeight() {
-  postMessageToParent({ height: document.body.offsetHeight });
-}
-
 const mapStateToProps = (state: StoreState) => ({
   sort: state.comments.sort,
   isCommentsLoading: state.comments.isFetching,
@@ -336,7 +329,7 @@ export function ConnectedRoot() {
   const actions = useActions(boundActions);
 
   useEffect(() => {
-    const observer = new ResizeObserver(updateIframeHeight);
+    const observer = new ResizeObserver(() => updateIframeHeight());
 
     updateIframeHeight();
     observer.observe(document.body);

frontend/apps/remark42/app/utils/post-message.ts

@@ -61,3 +61,24 @@ export function parseMessage({ data }: MessageEvent): AllMessages {
 
   return data as AllMessages;
 }
+
+/**
+ * Sends message to parent window with height of iframe
+ *
+ * @param dropdown provide dropdown element if present on screen
+ */
+export function updateIframeHeight(dropdown?: HTMLElement) {
+  let scrollHeight = 0;
+
+  // If dropdown is present on screen, we need to calculate size according to it size since it's positioned absolutely
+  if (dropdown) {
+    const { top } = dropdown.getBoundingClientRect();
+    // The size of shadow under the dropdown is 20px
+    scrollHeight = window.scrollY + Math.abs(top) + dropdown.scrollHeight + 20;
+  }
+
+  // The size of vertical padding on body is 12px
+  const bodyHeight = document.body.offsetHeight + 12;
+
+  postMessageToParent({ height: Math.max(scrollHeight, bodyHeight) });
+}