scroll to cell on flow view change

src/constants/dom/index.ts

@@ -5,3 +5,5 @@ export const isTablet = () => {
 
   return window.innerWidth < 599;
 };
+
+export const headerHeight = 64; // px

src/containers/flow/FlowGrid/components/FlowCell/components/FlowCellText/styles.module.scss

@@ -9,8 +9,4 @@
 
 .heading {
   margin-bottom: 0.25em;
-
-  h4 {
-    // line-height: 1.1em;
-  }
 }

src/containers/flow/FlowGrid/components/FlowCell/index.tsx

@@ -1,4 +1,4 @@
-import { FC, useMemo } from 'react';
+import { FC, useCallback, useMemo } from 'react';
 
 import classNames from 'classnames';
 
@@ -9,6 +9,8 @@ import { useWindowSize } from '~/hooks/dom/useWindowSize';
 import { useFlowCellControls } from '~/hooks/flow/useFlowCellControls';
 import { FlowDisplay, INode } from '~/types';
 
+import { isFullyVisible } from '../../../../../utils/dom';
+
 import { CellShade } from './components/CellShade';
 import { FlowCellImage } from './components/FlowCellImage';
 import { FlowCellMenu } from './components/FlowCellMenu';
@@ -25,7 +27,7 @@ interface Props {
   text?: string;
   flow: FlowDisplay;
   canEdit?: boolean;
-  onChangeCellView: (id: INode['id'], flow: FlowDisplay) => void;
+  onChange: (id: INode['id'], flow: FlowDisplay) => void;
 }
 
 const FlowCell: FC<Props> = ({
@@ -37,7 +39,7 @@ const FlowCell: FC<Props> = ({
   text,
   title,
   canEdit = false,
-  onChangeCellView,
+  onChange,
 }) => {
   const { isTablet } = useWindowSize();
 
@@ -45,6 +47,30 @@ const FlowCell: FC<Props> = ({
     ((!!flow.display && flow.display !== 'single') || !image) &&
     flow.show_description &&
     !!text;
+
+  const {
+    isActive: isMenuActive,
+    activate,
+    ref,
+    deactivate,
+  } = useClickOutsideFocus();
+
+  const onChangeWithScroll = useCallback<typeof onChange>(
+    (...args) => {
+      onChange(...args);
+
+      setTimeout(() => {
+        if (!isFullyVisible(ref.current)) {
+          ref.current?.scrollIntoView({
+            behavior: 'auto',
+            block: 'center',
+          });
+        }
+      }, 0);
+    },
+    [onChange, ref],
+  );
+
   const {
     hasDescription,
     setViewHorizontal,
@@ -52,13 +78,7 @@ const FlowCell: FC<Props> = ({
     setViewQuadro,
     setViewSingle,
     toggleViewDescription,
-  } = useFlowCellControls(id, text, flow, onChangeCellView);
+  } = useFlowCellControls(id, text, flow, onChangeWithScroll);
-  const {
-    isActive: isMenuActive,
-    activate,
-    ref,
-    deactivate,
-  } = useClickOutsideFocus();
 
   const shadeSize = useMemo(() => {
     const min = isTablet ? 10 : 15;

src/containers/flow/FlowGrid/components/FlowCell/styles.module.scss

@@ -116,12 +116,7 @@
 }
 
 .display_modal {
-  @include appear;
-
   position: absolute;
-  top: 0;
+  inset: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
   z-index: 11;
 }

src/containers/flow/FlowGrid/index.tsx

@@ -46,7 +46,7 @@ export const FlowGrid: FC<Props> = observer(
               text={node.description}
               title={node.title}
               canEdit={fetched && isUser && canEditNode(node, user)}
-              onChangeCellView={onChangeCellView}
+              onChange={onChangeCellView}
             />
           </div>
         ))}

src/utils/dom.ts

@@ -10,6 +10,7 @@ import {
   COMMENT_BLOCK_TYPES,
   ICommentBlock,
 } from '~/constants/comment';
+import { headerHeight } from '~/constants/dom';
 import { IFile, ValueOf } from '~/types';
 import { CONFIG } from '~/utils/config';
 import {
@@ -213,3 +214,14 @@ export const sizeOf = (bytes: number): string => {
     (bytes / Math.pow(1024, e)).toFixed(2) + ' ' + ' KMGTP'.charAt(e) + 'B'
   );
 };
+
+/** Tells if element is in view */
+export const isFullyVisible = (element?: HTMLElement): boolean => {
+  if (!element) {
+    return false;
+  }
+
+  const rect = element.getBoundingClientRect();
+
+  return rect?.top > headerHeight && rect?.bottom < window.innerHeight;
+};