From 6755b2a1f373649333714fa2b637f75e4bba1419 Mon Sep 17 00:00:00 2001
From: rahulramesha <rahulramesham@gmail.com>
Date: Wed, 7 Feb 2024 16:13:10 +0530
Subject: [PATCH] fix height glitch while rendered rows adjust to default
 height

---
 web/components/core/render-if-visible-HOC.tsx             | 8 ++++----
 web/components/issues/issue-layouts/kanban/block.tsx      | 2 +-
 web/components/issues/issue-layouts/list/block.tsx        | 2 +-
 web/components/issues/issue-layouts/list/blocks-list.tsx  | 2 +-
 .../issue-layouts/spreadsheet/spreadsheet-table.tsx       | 2 +-
 5 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/web/components/core/render-if-visible-HOC.tsx b/web/components/core/render-if-visible-HOC.tsx
index b65fbbc36..626c76ad7 100644
--- a/web/components/core/render-if-visible-HOC.tsx
+++ b/web/components/core/render-if-visible-HOC.tsx
@@ -2,7 +2,7 @@ import { cn } from "helpers/common.helper";
 import React, { useState, useRef, useEffect, ReactNode, MutableRefObject } from "react";
 
 type Props = {
-  defaultHeight?: number;
+  defaultHeight?: string;
   verticalOffset?: number;
   horizonatlOffset?: number;
   root?: MutableRefObject<HTMLElement | null>;
@@ -19,7 +19,7 @@ type Props = {
 
 const RenderIfVisible: React.FC<Props> = (props) => {
   const {
-    defaultHeight = 300,
+    defaultHeight = "300px",
     root,
     verticalOffset = 50,
     horizonatlOffset = 0,
@@ -35,7 +35,7 @@ const RenderIfVisible: React.FC<Props> = (props) => {
   } = props;
   const defaultVisible = !!getShouldRender && getShouldRender(index);
   const [shouldVisible, setShouldVisible] = useState<boolean>(alwaysRender || defaultVisible);
-  const placeholderHeight = useRef<number>(defaultHeight);
+  const placeholderHeight = useRef<string>(defaultHeight);
   const intersectionRef = useRef<HTMLElement | null>(null);
 
   const isVisible = alwaysRender || shouldVisible;
@@ -78,7 +78,7 @@ const RenderIfVisible: React.FC<Props> = (props) => {
   // Set height after render
   useEffect(() => {
     if (intersectionRef.current && isVisible) {
-      placeholderHeight.current = intersectionRef.current.offsetHeight;
+      placeholderHeight.current = `${intersectionRef.current.offsetHeight}px`;
     }
   }, [isVisible, intersectionRef, alwaysRender, pauseHeightUpdateWhileRendering]);
 
diff --git a/web/components/issues/issue-layouts/kanban/block.tsx b/web/components/issues/issue-layouts/kanban/block.tsx
index ed819c7a0..7939f6662 100644
--- a/web/components/issues/issue-layouts/kanban/block.tsx
+++ b/web/components/issues/issue-layouts/kanban/block.tsx
@@ -138,7 +138,7 @@ export const KanbanIssueBlock: React.FC<IssueBlockProps> = memo((props) => {
             <RenderIfVisible
               classNames="space-y-2"
               root={scrollableContainerRef}
-              defaultHeight={100}
+              defaultHeight="100px"
               horizonatlOffset={50}
               alwaysRender={snapshot.isDragging}
               index={index}
diff --git a/web/components/issues/issue-layouts/list/block.tsx b/web/components/issues/issue-layouts/list/block.tsx
index 04e7c4052..a3c30f28c 100644
--- a/web/components/issues/issue-layouts/list/block.tsx
+++ b/web/components/issues/issue-layouts/list/block.tsx
@@ -49,7 +49,7 @@ export const IssueBlock: React.FC<IssueBlockProps> = observer((props: IssueBlock
 
   return (
     <div
-      className={cn("relative flex items-center gap-3 bg-custom-background-100 p-3 text-sm", {
+      className={cn("min-h-12 relative flex items-center gap-3 bg-custom-background-100 p-3 text-sm", {
         "border border-custom-primary-70 hover:border-custom-primary-70": peekIssue && peekIssue.issueId === issue.id,
       })}
     >
diff --git a/web/components/issues/issue-layouts/list/blocks-list.tsx b/web/components/issues/issue-layouts/list/blocks-list.tsx
index 1e1126e3f..8e7386257 100644
--- a/web/components/issues/issue-layouts/list/blocks-list.tsx
+++ b/web/components/issues/issue-layouts/list/blocks-list.tsx
@@ -27,7 +27,7 @@ export const IssueBlocksList: FC<Props> = (props) => {
           return (
             <RenderIfVisible
               key={`${issueId}`}
-              defaultHeight={45}
+              defaultHeight="3rem"
               root={containerRef}
               classNames={"relative border border-transparent border-b-custom-border-200 last:border-b-transparent"}
               index={index}
diff --git a/web/components/issues/issue-layouts/spreadsheet/spreadsheet-table.tsx b/web/components/issues/issue-layouts/spreadsheet/spreadsheet-table.tsx
index 330b8f572..a1788c0f0 100644
--- a/web/components/issues/issue-layouts/spreadsheet/spreadsheet-table.tsx
+++ b/web/components/issues/issue-layouts/spreadsheet/spreadsheet-table.tsx
@@ -88,7 +88,7 @@ export const SpreadsheetTable = observer((props: Props) => {
           <RenderIfVisible
             key={id}
             as="tr"
-            defaultHeight={44.5}
+            defaultHeight="2.75rem"
             root={containerRef}
             placeholderChildren={<td colSpan={100} className="border-b-[0.5px]" />}
             index={index}