Client:TilesView Fixed resize

packages/client/src/pages/Home/Section/Body/TilesView/FilesTileContainer.js

@@ -30,9 +30,12 @@ import React, {
   useCallback,
   useState,
   useMemo,
+  useContext,
 } from "react";
 import { inject, observer } from "mobx-react";
 
+import { Context } from "@docspace/shared/utils";
+
 import FileTile from "./FileTile";
 import { FileTileProvider } from "./FileTile.provider";
 import { elementResizeDetector, getThumbSize } from "./FileTile.utils";
@@ -51,6 +54,8 @@ const FilesTileContainer = ({
   const [thumbSize, setThumbSize] = useState("");
   const [columnCount, setColumnCount] = useState(null);
 
+  const { sectionWidth } = useContext(Context);
+
   useEffect(() => {
     return () => {
       isMountedRef.current = false;
@@ -126,7 +131,7 @@ const FilesTileContainer = ({
         />
       );
     });
-  }, [filesList, onSetTileRef]);
+  }, [filesList, onSetTileRef, sectionWidth]);
 
   return (
     <FileTileProvider columnCount={columnCount} thumbSize={thumbSize}>

packages/shared/components/section/index.tsx

@@ -25,7 +25,7 @@
 // International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
 
 /* eslint-disable @typescript-eslint/no-unused-vars */
-import React from "react";
+import React, { useEffect, useMemo } from "react";
 
 import { Provider } from "../../utils";
 import { DeviceType } from "../../enums";
@@ -153,6 +153,16 @@ const Section = (props: SectionProps) => {
     isSectionBodyAvailable ||
     isSectionPagingAvailable;
 
+  useEffect(() => {
+    if (!containerRef.current) return;
+
+    const computedStyles = window.getComputedStyle(containerRef.current, null);
+    const width = +computedStyles.getPropertyValue("width").replace("px", "");
+    const height = +computedStyles.getPropertyValue("height").replace("px", "");
+
+    setSectionSize(() => ({ width, height }));
+  }, [isInfoPanelVisible]);
+
   const onResize = React.useCallback(() => {
     if (timerRef.current) clearTimeout(timerRef.current);
 
@@ -188,14 +198,17 @@ const Section = (props: SectionProps) => {
 
   const showTwoProgress = showPrimaryProgressBar && showSecondaryProgressBar;
 
+  const providerValue = useMemo(
+    () => ({
+      sectionWidth: sectionSize.width,
+      sectionHeight: sectionSize.height,
+    }),
+    [sectionSize.width, sectionSize.height],
+  );
+
   return (
     isSectionAvailable && (
-      <Provider
-        value={{
-          sectionWidth: sectionSize.width,
-          sectionHeight: sectionSize.height,
-        }}
-      >
+      <Provider value={providerValue}>
         <SectionContainer
           viewAs={viewAs}
           ref={containerRef}