style: gantt layout quick-add padding (#2272)

* fix: 'Last Drafted Issue' making sidebar look weird on collapsed

* feat: scroll to the bottom when issue is created

* fix: 'Add Issue' button overlapping issue card in spreadsheet view

* fix: wrong placement of quick-add in calender layout

* fix: spacing for issue card in spreadsheet view

* style: gantt layout quick-add padding

style: removed 'State group' from draft issue

* style: decrese shadow, quick-add position on calender layout, and 'add issue' sticky

* style: button color

web/components/gantt-chart/chart/index.tsx

@@ -1,4 +1,6 @@
 import { FC, useEffect, useState } from "react";
+// next
+import { useRouter } from "next/router";
 // icons
 import { ArrowsPointingInIcon, ArrowsPointingOutIcon } from "@heroicons/react/20/solid";
 // components
@@ -11,6 +13,8 @@ import { GanttSidebar } from "../sidebar";
 import { MonthChartView } from "./month";
 // import { QuarterChartView } from "./quarter";
 // import { YearChartView } from "./year";
+// icons
+import { PlusIcon } from "lucide-react";
 // views
 import {
   // generateHourChart,
@@ -25,6 +29,7 @@ import {
   getNumberOfDaysBetweenTwoDatesInYear,
   getMonthChartItemPositionWidthInMonth,
 } from "../views";
+import { GanttInlineCreateIssueForm } from "components/core/views/gantt-chart-view/inline-create-issue-form";
 // types
 import { ChartDataType, IBlockUpdateData, IGanttBlock, TGanttViews } from "../types";
 // data
@@ -64,12 +69,17 @@ export const ChartViewRoot: FC<ChartViewRootProps> = ({
   const [itemsContainerWidth, setItemsContainerWidth] = useState<number>(0);
   const [fullScreenMode, setFullScreenMode] = useState<boolean>(false);
 
+  const [isCreateIssueFormOpen, setIsCreateIssueFormOpen] = useState(false);
+
   // blocks state management starts
   const [chartBlocks, setChartBlocks] = useState<IGanttBlock[] | null>(null);
 
   const { currentView, currentViewData, renderView, dispatch, allViews, updateScrollLeft } =
     useChart();
 
+  const router = useRouter();
+  const { cycleId, moduleId } = router.query;
+
   const renderBlockStructure = (view: any, blocks: IGanttBlock[] | null) =>
     blocks && blocks.length > 0
       ? blocks.map((block: any) => ({
@@ -304,6 +314,44 @@ export const ChartViewRoot: FC<ChartViewRootProps> = ({
             SidebarBlockRender={SidebarBlockRender}
             enableReorder={enableReorder}
           />
+          {chartBlocks && (
+            <div className="pl-2.5">
+              <GanttInlineCreateIssueForm
+                isOpen={isCreateIssueFormOpen}
+                handleClose={() => setIsCreateIssueFormOpen(false)}
+                onSuccess={() => {
+                  const ganttSidebar = document.getElementById(`gantt-sidebar-${cycleId}`);
+
+                  const timeoutId = setTimeout(() => {
+                    if (ganttSidebar)
+                      ganttSidebar.scrollBy({
+                        top: ganttSidebar.scrollHeight,
+                        left: 0,
+                        behavior: "smooth",
+                      });
+                    clearTimeout(timeoutId);
+                  }, 10);
+                }}
+                prePopulatedData={{
+                  start_date: new Date(Date.now()).toISOString().split("T")[0],
+                  target_date: new Date(Date.now() + 86400000).toISOString().split("T")[0],
+                  ...(cycleId && { cycle: cycleId.toString() }),
+                  ...(moduleId && { module: moduleId.toString() }),
+                }}
+              />
+
+              {!isCreateIssueFormOpen && (
+                <button
+                  type="button"
+                  onClick={() => setIsCreateIssueFormOpen(true)}
+                  className="flex items-center gap-x-[6px] text-custom-primary-100 px-2 py-1 rounded-md"
+                >
+                  <PlusIcon className="h-4 w-4" />
+                  <span className="text-sm font-medium text-custom-primary-100">New Issue</span>
+                </button>
+              )}
+            </div>
+          )}
         </div>
         <div
           className="relative flex h-full w-full flex-1 flex-col overflow-hidden overflow-x-auto horizontal-scroll-enable"

web/components/gantt-chart/sidebar.tsx

@@ -1,5 +1,3 @@
-import { useState } from "react";
-// next
 import { useRouter } from "next/router";
 // react-beautiful-dnd
 import { DragDropContext, Draggable, DropResult } from "react-beautiful-dnd";
@@ -10,9 +8,6 @@ import { useChart } from "./hooks";
 import { Loader } from "components/ui";
 // icons
 import { EllipsisVerticalIcon } from "@heroicons/react/24/outline";
-import { PlusIcon } from "lucide-react";
-// components
-import { GanttInlineCreateIssueForm } from "components/core/views/gantt-chart-view/inline-create-issue-form";
 // types
 import { IBlockUpdateData, IGanttBlock } from "./types";
 
@@ -28,12 +23,10 @@ export const GanttSidebar: React.FC<Props> = (props) => {
   const { title, blockUpdateHandler, blocks, SidebarBlockRender, enableReorder } = props;
 
   const router = useRouter();
-  const { cycleId, moduleId } = router.query;
+  const { cycleId } = router.query;
 
   const { activeBlock, dispatch } = useChart();
 
-  const [isCreateIssueFormOpen, setIsCreateIssueFormOpen] = useState(false);
-
   // update the active block on hover
   const updateActiveBlock = (block: IGanttBlock | null) => {
     dispatch({
@@ -93,7 +86,7 @@ export const GanttSidebar: React.FC<Props> = (props) => {
         {(droppableProvided) => (
           <div
             id={`gantt-sidebar-${cycleId}`}
-            className="h-full overflow-y-auto pl-2.5"
+            className="max-h-full overflow-y-auto pl-2.5"
             ref={droppableProvided.innerRef}
             {...droppableProvided.droppableProps}
           >
@@ -159,42 +152,6 @@ export const GanttSidebar: React.FC<Props> = (props) => {
           </div>
         )}
       </StrictModeDroppable>
-      <div className="pl-2.5">
-        <GanttInlineCreateIssueForm
-          isOpen={isCreateIssueFormOpen}
-          handleClose={() => setIsCreateIssueFormOpen(false)}
-          onSuccess={() => {
-            const ganttSidebar = document.getElementById(`gantt-sidebar-${cycleId}`);
-
-            const timeoutId = setTimeout(() => {
-              if (ganttSidebar)
-                ganttSidebar.scrollBy({
-                  top: ganttSidebar.scrollHeight,
-                  left: 0,
-                  behavior: "smooth",
-                });
-              clearTimeout(timeoutId);
-            }, 10);
-          }}
-          prePopulatedData={{
-            start_date: new Date(Date.now()).toISOString().split("T")[0],
-            target_date: new Date(Date.now() + 86400000).toISOString().split("T")[0],
-            ...(cycleId && { cycle: cycleId.toString() }),
-            ...(moduleId && { module: moduleId.toString() }),
-          }}
-        />
-
-        {!isCreateIssueFormOpen && (
-          <button
-            type="button"
-            onClick={() => setIsCreateIssueFormOpen(true)}
-            className="flex items-center gap-x-[6px] text-custom-primary-100 px-2 py-1 rounded-md mt-3"
-          >
-            <PlusIcon className="h-4 w-4" />
-            <span className="text-sm font-medium text-custom-primary-100">New Issue</span>
-          </button>
-        )}
-      </div>
     </DragDropContext>
   );
 };