Fix list items height calculation to prevent crashes (infinite re-renders) (#8254)

Fix #5933 
Fix #6189

Author: ClementPasteau

newIDE/app/src/AssetStore/BehaviorStore/BehaviorListItem.js

@@ -89,7 +89,9 @@ export const BehaviorListItem = ({
   const containerRef = React.useRef<?HTMLDivElement>(null);
   React.useLayoutEffect(() => {
     if (containerRef.current)
-      onHeightComputed(containerRef.current.getBoundingClientRect().height);
+      onHeightComputed(
+        Math.ceil(containerRef.current.getBoundingClientRect().height)
+      );
   });
 
   const renderField = (field: 'description' | 'fullName') => {

newIDE/app/src/AssetStore/ExtensionStore/ExtensionListItem.js

@@ -60,7 +60,9 @@ export const ExtensionListItem = ({
   const containerRef = React.useRef<?HTMLDivElement>(null);
   React.useLayoutEffect(() => {
     if (containerRef.current)
-      onHeightComputed(containerRef.current.getBoundingClientRect().height);
+      onHeightComputed(
+        Math.ceil(containerRef.current.getBoundingClientRect().height)
+      );
   });
 
   const renderExtensionField = (field: 'shortDescription' | 'fullName') => {

newIDE/app/src/AssetStore/NewObjectFromScratch.js

@@ -99,7 +99,9 @@ const TitleListItem = ({ value, onHeightComputed }: TitleListItemProps) => {
   const containerRef = React.useRef<?HTMLDivElement>(null);
   React.useLayoutEffect(() => {
     if (containerRef.current)
-      onHeightComputed(containerRef.current.getBoundingClientRect().height);
+      onHeightComputed(
+        Math.ceil(containerRef.current.getBoundingClientRect().height)
+      );
   });
 
   return (

newIDE/app/src/AssetStore/ObjectListItem.js

@@ -59,7 +59,9 @@ export const ObjectListItem = ({
   const containerRef = React.useRef<?HTMLDivElement>(null);
   React.useLayoutEffect(() => {
     if (containerRef.current)
-      onHeightComputed(containerRef.current.getBoundingClientRect().height);
+      onHeightComputed(
+        Math.ceil(containerRef.current.getBoundingClientRect().height)
+      );
   });
 
   const renderField = (field: 'description' | 'fullName') => {

newIDE/app/src/UI/Search/ListSearchResults.js

@@ -84,7 +84,7 @@ export const ListSearchResults = <SearchItem>({
           {renderSearchItem(searchItem, height => {
             const heightWasUpdated = onItemHeightComputed(searchItem, height);
             if (heightWasUpdated && grid.current) {
-              grid.current.recomputeGridSize(0, rowIndex);
+              grid.current.recomputeGridSize({ rowIndex });
             }
           })}
         </div>
@@ -138,7 +138,7 @@ export const ListSearchResults = <SearchItem>({
                 ref={el => {
                   if (el) {
                     // Ensure the grid is recomputed for heights once it is rendered.
-                    el.recomputeGridSize(0, 0);
+                    el.recomputeGridSize();
                   }
                   grid.current = el;
                 }}