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/core/views/calendar-view/calendar.tsx

@@ -184,7 +184,7 @@ export const CalendarView: React.FC<Props> = ({
         <div className="h-full overflow-y-auto">
           <DragDropContext onDragEnd={onDragEnd}>
             <div
-              id={`calendar-view-${cycleId ?? moduleId ?? viewId}`}
+              id={`calendar-view-${cycleId ?? moduleId ?? viewId ?? ""}`}
               className="h-full rounded-lg p-8 text-custom-text-200"
             >
               <CalendarHeader

web/components/core/views/calendar-view/inline-create-issue-form.tsx

@@ -84,13 +84,13 @@ export const CalendarInlineCreateIssueForm: React.FC<Props> = (props) => {
     <>
       <div
         ref={ref}
-        className={`absolute -translate-x-1 top-5 transition-all z-20 ${
+        className={`absolute w-60 top-5 transition-all z-20 ${
           isOpen ? "opacity-100 scale-100" : "opacity-0 pointer-events-none scale-95"
-        } ${isSpaceOnRight ? "left-full" : "right-0"}`}
+        } right-0`}
       >
         <InlineCreateIssueFormWrapper
           {...props}
-          className="flex w-60 p-1 px-1.5 rounded items-center gap-x-3 bg-custom-background-100 shadow-custom-shadow-md transition-opacity"
+          className="flex w-full p-1 px-1.5 rounded z-50 items-center gap-x-3 bg-custom-background-100 shadow-custom-shadow-sm transition-opacity"
         >
           <InlineInput />
         </InlineCreateIssueFormWrapper>

web/components/core/views/calendar-view/single-date.tsx

@@ -39,6 +39,8 @@ export const SingleCalendarDate: React.FC<Props> = (props) => {
   const [showAllIssues, setShowAllIssues] = useState(false);
   const [isCreateIssueFormOpen, setIsCreateIssueFormOpen] = useState(false);
 
+  const [formPosition, setFormPosition] = useState({ x: 0, y: 0 });
+
   const totalIssues = date.issues.length;
 
   return (
@@ -81,16 +83,23 @@ export const SingleCalendarDate: React.FC<Props> = (props) => {
               </Draggable>
             ))}
 
-          <CalendarInlineCreateIssueForm
-            isOpen={isCreateIssueFormOpen}
-            dependencies={[showWeekEnds]}
-            handleClose={() => setIsCreateIssueFormOpen(false)}
-            prePopulatedData={{
-              target_date: date.date,
-              ...(cycleId && { cycle: cycleId.toString() }),
-              ...(moduleId && { module: moduleId.toString() }),
+          <div
+            className="fixed top-0 left-0 z-50"
+            style={{
+              transform: `translate(${formPosition.x}px, ${formPosition.y}px)`,
             }}
-          />
+          >
+            <CalendarInlineCreateIssueForm
+              isOpen={isCreateIssueFormOpen}
+              dependencies={[showWeekEnds]}
+              handleClose={() => setIsCreateIssueFormOpen(false)}
+              prePopulatedData={{
+                target_date: date.date,
+                ...(cycleId && { cycle: cycleId.toString() }),
+                ...(moduleId && { module: moduleId.toString() }),
+              }}
+            />
+          </div>
 
           {totalIssues > 4 && (
             <button
@@ -106,8 +115,11 @@ export const SingleCalendarDate: React.FC<Props> = (props) => {
             className={`absolute top-2 right-2 flex items-center justify-center rounded-md bg-custom-background-80 p-1 text-xs text-custom-text-200 opacity-0 group-hover:opacity-100`}
           >
             <button
+              onClick={(e) => {
+                setIsCreateIssueFormOpen(true);
+                setFormPosition({ x: e.clientX, y: e.clientY });
+              }}
               className="flex items-center justify-center gap-1 text-center"
-              onClick={() => setIsCreateIssueFormOpen(true)}
             >
               <PlusSmallIcon className="h-4 w-4 text-custom-text-200" />
               Add issue