style: calender quick-add same width as single date (#2280)

* style: calender quick-add same width as single date

* style: margin bottom in quick-add in spreadsheet view

* fix: quick add opening in list-layout

* style: reduced margin left

web/components/core/views/board-view/single-board.tsx

@@ -75,9 +75,7 @@ export const SingleBoard: React.FC<Props> = (props) => {
 
   const isNotAllowed = userAuth.isGuest || userAuth.isViewer || disableUserActions;
 
-  const onCreateClick = () => {
+  const scrollToBottom = () => {
-    setIsInlineCreateIssueFormOpen(true);
-
     const boardListElement = document.getElementById(`board-list-${groupTitle}`);
 
     // timeout is needed because the animation
@@ -93,6 +91,11 @@ export const SingleBoard: React.FC<Props> = (props) => {
     }, 10);
   };
 
+  const onCreateClick = () => {
+    setIsInlineCreateIssueFormOpen(true);
+    scrollToBottom();
+  };
+
   return (
     <div className={`flex-shrink-0 ${!isCollapsed ? "" : "flex h-full flex-col w-96"}`}>
       <BoardHeader
@@ -201,6 +204,7 @@ export const SingleBoard: React.FC<Props> = (props) => {
                 <BoardInlineCreateIssueForm
                   isOpen={isInlineCreateIssueFormOpen}
                   handleClose={() => setIsInlineCreateIssueFormOpen(false)}
+                  onSuccess={() => scrollToBottom()}
                   prePopulatedData={{
                     ...(cycleId && { cycle: cycleId.toString() }),
                     ...(moduleId && { module: moduleId.toString() }),

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

@@ -67,7 +67,7 @@ const InlineInput = () => {
         {...register("name", {
           required: "Issue title is required.",
         })}
-        className="w-full px-2 py-1.5 rounded-md bg-transparent text-sm font-medium leading-5 text-custom-text-200 outline-none"
+        className="w-full pr-2 py-1.5 rounded-md bg-transparent text-sm font-medium leading-5 text-custom-text-200 outline-none"
       />
     </>
   );
@@ -84,13 +84,13 @@ export const CalendarInlineCreateIssueForm: React.FC<Props> = (props) => {
     <>
       <div
         ref={ref}
-        className={`absolute w-60 top-5 transition-all z-20 ${
+        className={`absolute top-10 transition-all z-20 w-full max-w-[calc(100%-1.25rem)] ${
           isOpen ? "opacity-100 scale-100" : "opacity-0 pointer-events-none scale-95"
-        } right-0`}
+        } right-2.5`}
       >
         <InlineCreateIssueFormWrapper
           {...props}
-          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"
+          className="flex w-full p-1 px-1.5 rounded z-50 items-center gap-x-2 bg-custom-background-100 shadow-custom-shadow-sm transition-opacity"
         >
           <InlineInput />
         </InlineCreateIssueFormWrapper>

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

@@ -80,12 +80,7 @@ export const SingleCalendarDate: React.FC<Props> = (props) => {
                   )}
                 </Draggable>
               ))}
-            <div
+
-              className="fixed top-0 left-0 z-50"
-              style={{
-                transform: `translate(${formPosition.x}px, ${formPosition.y}px)`,
-              }}
-            >
             <CalendarInlineCreateIssueForm
               isOpen={isCreateIssueFormOpen}
               dependencies={[showWeekEnds]}
@@ -96,7 +91,6 @@ export const SingleCalendarDate: React.FC<Props> = (props) => {
                 ...(moduleId && { module: moduleId.toString() }),
               }}
             />
-            </div>
 
             {totalIssues > 4 && (
               <button

web/components/core/views/inline-issue-create-wrapper.tsx

@@ -197,7 +197,7 @@ export const InlineCreateIssueFormWrapper: React.FC<Props> = (props) => {
         )
     )
       .then(async (res) => {
-        mutate(PROJECT_ISSUES_LIST_WITH_PARAMS(projectId.toString(), params));
+        await mutate(PROJECT_ISSUES_LIST_WITH_PARAMS(projectId.toString(), params));
         if (formData.cycle && formData.cycle !== "")
           await addIssueToCycle(
             workspaceSlug.toString(),

web/components/core/views/list-view/single-list.tsx

@@ -240,7 +240,11 @@ export const SingleList: React.FC<Props> = (props) => {
                 <button
                   type="button"
                   className="p-1  text-custom-text-200 hover:bg-custom-background-80"
-                  onClick={() => setIsCreateIssueFormOpen(true)}
+                  onClick={() => {
+                    if (isDraftIssuesPage || isMyIssuesPage || isProfileIssuesPage) {
+                      addIssueToGroup();
+                    } else setIsCreateIssueFormOpen(true);
+                  }}
                 >
                   <PlusIcon className="h-4 w-4" />
                 </button>

web/components/core/views/spreadsheet-view/spreadsheet-view.tsx

@@ -288,6 +288,7 @@ export const SpreadsheetView: React.FC<Props> = ({
           </div>
 
           <div>
+            <div className="mb-3 z-50 sticky bottom-0 left-0">
               <ListInlineCreateIssueForm
                 isOpen={isInlineCreateIssueFormOpen}
                 handleClose={() => setIsInlineCreateIssueFormOpen(false)}
@@ -296,6 +297,7 @@ export const SpreadsheetView: React.FC<Props> = ({
                   ...(moduleId && { module: moduleId.toString() }),
                 }}
               />
+            </div>
 
             {type === "issue"
               ? !disableUserActions &&