Add sticky block name to enable it to be read throughout the block regardless of scroll position

web/core/components/gantt-chart/blocks/block.tsx

@@ -63,7 +63,7 @@ export const GanttChartBlock: React.FC<Props> = observer((props) => {
       ref={resizableRef}
       style={{
         height: `${BLOCK_HEIGHT}px`,
-        transform: `translateX(${block.position?.marginLeft}px)`,
+        marginLeft: `${block.position?.marginLeft}px`,
         width: `${block.position?.width}px`,
       }}
     >

web/core/components/gantt-chart/helpers/blockResizables/use-gantt-resizable.ts

@@ -71,7 +71,7 @@ export const useGanttResizable = (
         // calculate new marginLeft and update the initial marginLeft to the newly calculated one
         marginLeft = Math.round(mouseX / dayWidth) * dayWidth;
         // get Dimensions from dom's style
-        const prevMarginLeft = parseFloat(resizableDiv.style.transform.slice(11, -3));
+        const prevMarginLeft = parseFloat(resizableDiv.style.marginLeft.slice(0, -2));
         const prevWidth = parseFloat(resizableDiv.style.width.slice(0, -2));
         // calculate new width
         const marginDelta = prevMarginLeft - marginLeft;
@@ -88,7 +88,7 @@ export const useGanttResizable = (
       if (width < dayWidth) return;
 
       resizableDiv.style.width = `${width}px`;
-      resizableDiv.style.transform = `translateX(${marginLeft}px)`;
+      resizableDiv.style.marginLeft = `${marginLeft}px`;
 
       const deltaLeft = Math.round((marginLeft - (block.position?.marginLeft ?? 0)) / dayWidth) * dayWidth;
       const deltaWidth = Math.round((width - (block.position?.width ?? 0)) / dayWidth) * dayWidth;

web/core/components/issues/issue-layouts/gantt/blocks.tsx

@@ -4,6 +4,8 @@ import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 // ui
 import { Tooltip, ControlLink } from "@plane/ui";
+// components
+import { SIDEBAR_WIDTH } from "@/components/gantt-chart/constants";
 // helpers
 import { renderFormattedDate } from "@/helpers/date-time.helper";
 // hooks
@@ -42,33 +44,34 @@ export const IssueGanttBlock: React.FC<Props> = observer((props) => {
   const handleIssuePeekOverview = () => handleRedirection(workspaceSlug, issueDetails, isMobile);
 
   return (
-    <div
-      id={`issue-${issueId}`}
-      className="relative flex h-full w-full cursor-pointer items-center rounded"
-      style={{
-        backgroundColor: stateDetails?.color,
-      }}
-      onClick={handleIssuePeekOverview}
-    >
-      <div className="absolute left-0 top-0 h-full w-full bg-custom-background-100/50" />
-      <Tooltip
-        isMobile={isMobile}
-        tooltipContent={
-          <div className="space-y-1">
-            <h5>{issueDetails?.name}</h5>
-            <div>
-              {renderFormattedDate(issueDetails?.start_date ?? "")} to{" "}
-              {renderFormattedDate(issueDetails?.target_date ?? "")}
-            </div>
+    <Tooltip
+      isMobile={isMobile}
+      tooltipContent={
+        <div className="space-y-1">
+          <h5>{issueDetails?.name}</h5>
+          <div>
+            {renderFormattedDate(issueDetails?.start_date ?? "")} to{" "}
+            {renderFormattedDate(issueDetails?.target_date ?? "")}
           </div>
-        }
-        position="top-left"
+        </div>
+      }
+      position="top-left"
+    >
+      <div
+        id={`issue-${issueId}`}
+        className="relative flex h-full w-full cursor-pointer items-center rounded"
+        style={{ backgroundColor: stateDetails?.color }}
+        onClick={handleIssuePeekOverview}
       >
-        <div className="relative w-full overflow-hidden truncate px-2.5 py-1 text-sm text-custom-text-100">
+        <div className="absolute left-0 top-0 h-full w-full bg-custom-background-100/50" />
+        <div
+          className="sticky w-auto overflow-hidden truncate px-2.5 py-1 text-sm text-custom-text-100"
+          style={{ left: `${SIDEBAR_WIDTH}px` }}
+        >
           {issueDetails?.name}
         </div>
-      </Tooltip>
-    </div>
+      </div>
+    </Tooltip>
   );
 });
 

web/core/components/modules/gantt-chart/blocks.tsx

@@ -3,13 +3,15 @@
 import { observer } from "mobx-react";
 import Link from "next/link";
 import { useParams } from "next/navigation";
-// hooks
 // ui
 import { Tooltip, ModuleStatusIcon } from "@plane/ui";
-// helpers
-import { MODULE_STATUS } from "@/constants/module";
-import { renderFormattedDate } from "@/helpers/date-time.helper";
+// components
+import { SIDEBAR_WIDTH } from "@/components/gantt-chart/constants";
 // constants
+import { MODULE_STATUS } from "@/constants/module";
+// helpers
+import { renderFormattedDate } from "@/helpers/date-time.helper";
+// hooks
 import { useModule } from "@/hooks/store";
 import { useAppRouter } from "@/hooks/use-app-router";
 import { usePlatformOS } from "@/hooks/use-platform-os";
@@ -31,30 +33,37 @@ export const ModuleGanttBlock: React.FC<Props> = observer((props) => {
   const { isMobile } = usePlatformOS();
 
   return (
-    <div
-      className="relative flex h-full w-full items-center rounded"
-      style={{ backgroundColor: MODULE_STATUS.find((s) => s.value === moduleDetails?.status)?.color }}
-      onClick={() =>
-        router.push(`/${workspaceSlug?.toString()}/projects/${moduleDetails?.project_id}/modules/${moduleDetails?.id}`)
-      }
-    >
-      <div className="absolute left-0 top-0 h-full w-full bg-custom-background-100/50" />
-      <Tooltip
-        isMobile={isMobile}
-        tooltipContent={
-          <div className="space-y-1">
-            <h5>{moduleDetails?.name}</h5>
-            <div>
-              {renderFormattedDate(moduleDetails?.start_date ?? "")} to{" "}
-              {renderFormattedDate(moduleDetails?.target_date ?? "")}
-            </div>
+    <Tooltip
+      isMobile={isMobile}
+      tooltipContent={
+        <div className="space-y-1">
+          <h5>{moduleDetails?.name}</h5>
+          <div>
+            {renderFormattedDate(moduleDetails?.start_date ?? "")} to{" "}
+            {renderFormattedDate(moduleDetails?.target_date ?? "")}
           </div>
+        </div>
+      }
+      position="top-left"
+    >
+      <div
+        className="relative flex h-full w-full cursor-pointer items-center rounded"
+        style={{ backgroundColor: MODULE_STATUS.find((s) => s.value === moduleDetails?.status)?.color }}
+        onClick={() =>
+          router.push(
+            `/${workspaceSlug?.toString()}/projects/${moduleDetails?.project_id}/modules/${moduleDetails?.id}`
+          )
         }
-        position="top-left"
       >
-        <div className="relative w-full truncate px-2.5 py-1 text-sm text-custom-text-100">{moduleDetails?.name}</div>
-      </Tooltip>
-    </div>
+        <div className="absolute left-0 top-0 h-full w-full bg-custom-background-100/50" />
+        <div
+          className="sticky w-auto overflow-hidden truncate px-2.5 py-1 text-sm text-custom-text-100"
+          style={{ left: `${SIDEBAR_WIDTH}px` }}
+        >
+          {moduleDetails?.name}
+        </div>
+      </div>
+    </Tooltip>
   );
 });