[WEB-759] style: added calendar layout responsiveness (#3969)

* style: added calendar layout responsiveness

* fix: quick-add-form

* fix: popover menu close on item select

* fix: class conditiion

* code review

web/components/issues/issue-layouts/calendar/calendar.tsx

@@ -1,9 +1,11 @@
+import { useState } from "react";
 import { observer } from "mobx-react-lite";
 // hooks
+import useSize from "hooks/use-window-size";
 // components
 // ui
 import { Spinner } from "@plane/ui";
-import { CalendarHeader, CalendarWeekDays, CalendarWeekHeader } from "components/issues";
+import { CalendarHeader, CalendarIssueBlocks, CalendarWeekDays, CalendarWeekHeader } from "components/issues";
 // types
 import {
   IIssueDisplayFilterOptions,
@@ -15,6 +17,9 @@ import {
   TIssueMap,
 } from "@plane/types";
 import { ICalendarWeek } from "./types";
+// helpers
+import { renderFormattedPayloadDate } from "helpers/date-time.helper";
+import { cn } from "helpers/common.helper";
 // constants
 import { EIssueFilterType, EIssuesStoreType } from "constants/issue";
 import { EUserProjectRoles } from "constants/project";
@@ -24,6 +29,7 @@ import { ICycleIssuesFilter } from "store/issue/cycle";
 import { IModuleIssuesFilter } from "store/issue/module";
 import { IProjectIssuesFilter } from "store/issue/project";
 import { IProjectViewIssuesFilter } from "store/issue/project-views";
+import { MONTHS_LIST } from "constants/calendar";
 
 type Props = {
   issuesFilterStore: IProjectIssuesFilter | IModuleIssuesFilter | ICycleIssuesFilter | IProjectViewIssuesFilter;
@@ -62,6 +68,8 @@ export const CalendarChart: React.FC<Props> = observer((props) => {
     updateFilters,
     readOnly = false,
   } = props;
+  // states
+  const [selectedDate, setSelectedDate] = useState<Date>(new Date());
   // store hooks
   const {
     issues: { viewFlags },
@@ -70,6 +78,7 @@ export const CalendarChart: React.FC<Props> = observer((props) => {
   const {
     membership: { currentProjectRole },
   } = useUser();
+  const [windowWidth] = useSize();
 
   const { enableIssueCreation } = viewFlags || {};
   const isEditingAllowed = !!currentProjectRole && currentProjectRole >= EUserProjectRoles.MEMBER;
@@ -78,18 +87,30 @@ export const CalendarChart: React.FC<Props> = observer((props) => {
 
   const allWeeksOfActiveMonth = issueCalendarView.allWeeksOfActiveMonth;
 
-  if (!calendarPayload)
+  const formattedDatePayload = renderFormattedPayloadDate(selectedDate) ?? undefined;
+
+  if (!calendarPayload || !formattedDatePayload)
     return (
       <div className="grid h-full w-full place-items-center">
         <Spinner />
       </div>
     );
 
+  const issueIdList = groupedIssueIds ? groupedIssueIds[formattedDatePayload] : null;
+
   return (
     <>
       <div className="flex h-full w-full flex-col overflow-hidden">
-        <CalendarHeader issuesFilterStore={issuesFilterStore} updateFilters={updateFilters} />
+        <CalendarHeader
-        <div className="flex h-full w-full vertical-scrollbar scrollbar-lg flex-col">
+          setSelectedDate={setSelectedDate}
+          issuesFilterStore={issuesFilterStore}
+          updateFilters={updateFilters}
+        />
+        <div
+          className={cn("flex md:h-full w-full flex-col overflow-y-auto", {
+            "vertical-scrollbar scrollbar-lg": windowWidth > 768,
+          })}
+        >
           <CalendarWeekHeader isLoading={!issues} showWeekends={showWeekends} />
           <div className="h-full w-full">
             {layout === "month" && (
@@ -97,6 +118,8 @@ export const CalendarChart: React.FC<Props> = observer((props) => {
                 {allWeeksOfActiveMonth &&
                   Object.values(allWeeksOfActiveMonth).map((week: ICalendarWeek, weekIndex) => (
                     <CalendarWeekDays
+                      selectedDate={selectedDate}
+                      setSelectedDate={setSelectedDate}
                       issuesFilterStore={issuesFilterStore}
                       key={weekIndex}
                       week={week}
@@ -115,6 +138,8 @@ export const CalendarChart: React.FC<Props> = observer((props) => {
             )}
             {layout === "week" && (
               <CalendarWeekDays
+                selectedDate={selectedDate}
+                setSelectedDate={setSelectedDate}
                 issuesFilterStore={issuesFilterStore}
                 week={issueCalendarView.allDaysOfActiveWeek}
                 issues={issues}
@@ -129,6 +154,28 @@ export const CalendarChart: React.FC<Props> = observer((props) => {
               />
             )}
           </div>
+
+          {/* mobile view */}
+          <div className="md:hidden">
+            <p className="p-4 text-xl font-semibold">
+              {`${selectedDate.getDate()} ${
+                MONTHS_LIST[selectedDate.getMonth() + 1].title
+              }, ${selectedDate.getFullYear()}`}
+            </p>
+            <CalendarIssueBlocks
+              date={selectedDate}
+              issues={issues}
+              issueIdList={issueIdList}
+              quickActions={quickActions}
+              enableQuickIssueCreate
+              disableIssueCreation={!enableIssueCreation || !isEditingAllowed}
+              quickAddCallback={quickAddCallback}
+              addIssuesToView={addIssuesToView}
+              viewId={viewId}
+              readOnly={readOnly}
+              isDragDisabled
+            />
+          </div>
         </div>
       </div>
     </>

web/components/issues/issue-layouts/calendar/day-tile.tsx

@@ -1,10 +1,10 @@
-import { useState } from "react";
 import { Droppable } from "@hello-pangea/dnd";
 import { observer } from "mobx-react-lite";
 // components
-import { CalendarIssueBlocks, ICalendarDate, CalendarQuickAddIssueForm } from "components/issues";
+import { CalendarIssueBlocks, ICalendarDate } from "components/issues";
 // helpers
 import { renderFormattedPayloadDate } from "helpers/date-time.helper";
+import { cn } from "helpers/common.helper";
 // constants
 import { MONTHS_LIST } from "constants/calendar";
 // types
@@ -31,6 +31,8 @@ type Props = {
   addIssuesToView?: (issueIds: string[]) => Promise<any>;
   viewId?: string;
   readOnly?: boolean;
+  selectedDate: Date;
+  setSelectedDate: (date: Date) => void;
 };
 
 export const CalendarDayTile: React.FC<Props> = observer((props) => {
@@ -46,8 +48,10 @@ export const CalendarDayTile: React.FC<Props> = observer((props) => {
     addIssuesToView,
     viewId,
     readOnly = false,
+    selectedDate,
+    setSelectedDate,
   } = props;
-  const [showAllIssues, setShowAllIssues] = useState(false);
+
   const calendarLayout = issuesFilterStore?.issueFilters?.displayFilters?.calendar?.layout ?? "month";
 
   const formattedDatePayload = renderFormattedPayloadDate(date.date);
@@ -57,13 +61,14 @@ export const CalendarDayTile: React.FC<Props> = observer((props) => {
   const totalIssues = issueIdList?.length ?? 0;
 
   const isToday = date.date.toDateString() === new Date().toDateString();
+  const isSelectedDate = date.date.toDateString() == selectedDate.toDateString();
 
   return (
     <>
       <div className="group relative flex h-full w-full flex-col bg-custom-background-90">
         {/* header */}
         <div
-          className={`flex items-center justify-end flex-shrink-0 px-2 py-1.5 text-right text-xs ${
+          className={`hidden md:flex items-center justify-end flex-shrink-0 px-2 py-1.5 text-right text-xs ${
             calendarLayout === "month" // if month layout, highlight current month days
               ? date.is_current_month
                 ? "font-medium"
@@ -86,7 +91,7 @@ export const CalendarDayTile: React.FC<Props> = observer((props) => {
         </div>
 
         {/* content */}
-        <div className="h-full w-full">
+        <div className="h-full w-full hidden md:block">
           <Droppable droppableId={formattedDatePayload} isDropDisabled={readOnly}>
             {(provided, snapshot) => (
               <div
@@ -99,46 +104,45 @@ export const CalendarDayTile: React.FC<Props> = observer((props) => {
                 ref={provided.innerRef}
               >
                 <CalendarIssueBlocks
+                  date={date.date}
                   issues={issues}
                   issueIdList={issueIdList}
                   quickActions={quickActions}
-                  showAllIssues={showAllIssues}
                   isDragDisabled={readOnly}
+                  addIssuesToView={addIssuesToView}
+                  disableIssueCreation={disableIssueCreation}
+                  enableQuickIssueCreate={enableQuickIssueCreate}
+                  quickAddCallback={quickAddCallback}
+                  viewId={viewId}
+                  readOnly={readOnly}
                 />
-
-                {enableQuickIssueCreate && !disableIssueCreation && !readOnly && (
-                  <div className="px-2 py-1">
-                    <CalendarQuickAddIssueForm
-                      formKey="target_date"
-                      groupId={formattedDatePayload}
-                      prePopulatedData={{
-                        target_date: renderFormattedPayloadDate(date.date) ?? undefined,
-                      }}
-                      quickAddCallback={quickAddCallback}
-                      addIssuesToView={addIssuesToView}
-                      viewId={viewId}
-                      onOpen={() => setShowAllIssues(true)}
-                    />
-                  </div>
-                )}
-
-                {totalIssues > 4 && (
-                  <div className="flex items-center px-2.5 py-1">
-                    <button
-                      type="button"
-                      className="w-min whitespace-nowrap rounded text-xs px-1.5 py-1 text-custom-text-400 font-medium  hover:bg-custom-background-80 hover:text-custom-text-300"
-                      onClick={() => setShowAllIssues((prevData) => !prevData)}
-                    >
-                      {showAllIssues ? "Hide" : totalIssues - 4 + " more"}
-                    </button>
-                  </div>
-                )}
-
                 {provided.placeholder}
               </div>
             )}
           </Droppable>
         </div>
+
+        {/* Mobile view content */}
+        <div
+          onClick={() => setSelectedDate(date.date)}
+          className={cn(
+            "text-sm py-2.5 h-full w-full font-medium mx-auto flex flex-col justify-start items-center md:hidden cursor-pointer",
+            {
+              "bg-custom-background-100": date.date.getDay() !== 0 && date.date.getDay() !== 6,
+            }
+          )}
+        >
+          <div
+            className={cn("h-6 w-6  rounded-full flex items-center justify-center ", {
+              "bg-custom-primary-100 text-white": isSelectedDate,
+              "bg-custom-primary-100/10 text-custom-primary-100 ": isToday && !isSelectedDate,
+            })}
+          >
+            {date.date.getDate()}
+          </div>
+
+          {totalIssues > 0 && <div className="flex flex-shrink-0 h-1.5 w-1.5 bg-custom-primary-100 rounded mt-1" />}
+        </div>
       </div>
     </>
   );

web/components/issues/issue-layouts/calendar/dropdowns/options-dropdown.tsx

@@ -4,9 +4,10 @@ import { useRouter } from "next/router";
 import { usePopper } from "react-popper";
 import { Popover, Transition } from "@headlessui/react";
 // hooks
+import useSize from "hooks/use-window-size";
 // ui
 // icons
-import { Check, ChevronUp } from "lucide-react";
+import { Check, ChevronUp, MoreVerticalIcon } from "lucide-react";
 import { ToggleSwitch } from "@plane/ui";
 // types
 import {
@@ -41,6 +42,7 @@ export const CalendarOptionsDropdown: React.FC<ICalendarHeader> = observer((prop
   const { projectId } = router.query;
 
   const issueCalendarView = useCalendarView();
+  const [windowWidth] = useSize();
 
   const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null);
   const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
@@ -60,7 +62,7 @@ export const CalendarOptionsDropdown: React.FC<ICalendarHeader> = observer((prop
   const calendarLayout = issuesFilterStore.issueFilters?.displayFilters?.calendar?.layout ?? "month";
   const showWeekends = issuesFilterStore.issueFilters?.displayFilters?.calendar?.show_weekends ?? false;
 
-  const handleLayoutChange = (layout: TCalendarLayouts) => {
+  const handleLayoutChange = (layout: TCalendarLayouts, closePopover: any) => {
     if (!projectId || !updateFilters) return;
 
     updateFilters(projectId.toString(), EIssueFilterType.DISPLAY_FILTERS, {
@@ -75,6 +77,7 @@ export const CalendarOptionsDropdown: React.FC<ICalendarHeader> = observer((prop
         ? issueCalendarView.calendarFilters.activeMonthDate
         : issueCalendarView.calendarFilters.activeWeekDate
     );
+    if (windowWidth <= 768) closePopover(); // close the popover on mobile
   };
 
   const handleToggleWeekends = () => {
@@ -92,21 +95,24 @@ export const CalendarOptionsDropdown: React.FC<ICalendarHeader> = observer((prop
 
   return (
     <Popover className="relative">
-      {({ open }) => (
+      {({ open, close: closePopover }) => (
         <>
           <Popover.Button as={React.Fragment}>
-            <button
+            <button type="button" ref={setReferenceElement}>
-              type="button"
-              ref={setReferenceElement}
-              className={`flex items-center gap-1.5 rounded bg-custom-background-80 px-2.5 py-1 text-xs outline-none hover:bg-custom-background-80 ${
-                open ? "text-custom-text-100" : "text-custom-text-200"
-              }`}
-            >
-              <div className="font-medium">Options</div>
               <div
-                className={`flex h-3.5 w-3.5 items-center justify-center transition-all ${open ? "" : "rotate-180"}`}
+                className={`hidden md:flex items-center gap-1.5 rounded bg-custom-background-80 px-2.5 py-1 text-xs outline-none hover:bg-custom-background-80 ${
+                  open ? "text-custom-text-100" : "text-custom-text-200"
+                }`}
               >
-                <ChevronUp width={12} strokeWidth={2} />
+                <div className="font-medium">Options</div>
+                <div
+                  className={`flex h-3.5 w-3.5 items-center justify-center transition-all ${open ? "" : "rotate-180"}`}
+                >
+                  <ChevronUp width={12} strokeWidth={2} />
+                </div>
+              </div>
+              <div className="md:hidden">
+                <MoreVerticalIcon className="h-4 text-custom-text-200" strokeWidth={2} />
               </div>
             </button>
           </Popover.Button>
@@ -132,7 +138,7 @@ export const CalendarOptionsDropdown: React.FC<ICalendarHeader> = observer((prop
                       key={layout}
                       type="button"
                       className="flex w-full items-center justify-between gap-2 rounded px-1 py-1.5 text-left text-xs hover:bg-custom-background-80"
-                      onClick={() => handleLayoutChange(layoutDetails.key)}
+                      onClick={() => handleLayoutChange(layoutDetails.key, closePopover)}
                     >
                       {layoutDetails.title}
                       {calendarLayout === layout && <Check size={12} strokeWidth={2} />}
@@ -144,7 +150,12 @@ export const CalendarOptionsDropdown: React.FC<ICalendarHeader> = observer((prop
                     onClick={handleToggleWeekends}
                   >
                     Show weekends
-                    <ToggleSwitch value={showWeekends} onChange={() => {}} />
+                    <ToggleSwitch
+                      value={showWeekends}
+                      onChange={() => {
+                        if (windowWidth <= 768) closePopover(); // close the popover on mobile
+                      }}
+                    />
                   </button>
                 </div>
               </div>

web/components/issues/issue-layouts/calendar/header.tsx

@@ -24,10 +24,11 @@ interface ICalendarHeader {
     filterType: EIssueFilterType,
     filters: IIssueFilterOptions | IIssueDisplayFilterOptions | IIssueDisplayProperties | TIssueKanbanFilters
   ) => Promise<void>;
+  setSelectedDate: (date: Date) => void;
 }
 
 export const CalendarHeader: React.FC<ICalendarHeader> = observer((props) => {
-  const { issuesFilterStore, updateFilters } = props;
+  const { issuesFilterStore, updateFilters, setSelectedDate } = props;
 
   const issueCalendarView = useCalendarView();
 
@@ -91,6 +92,7 @@ export const CalendarHeader: React.FC<ICalendarHeader> = observer((props) => {
       activeMonthDate: firstDayOfCurrentMonth,
       activeWeekDate: today,
     });
+    setSelectedDate(today);
   };
 
   return (

web/components/issues/issue-layouts/calendar/index.ts

@@ -5,6 +5,8 @@ export * from "./types.d";
 export * from "./day-tile";
 export * from "./header";
 export * from "./issue-blocks";
+export * from "./issue-block-root";
+export * from "./issue-block";
 export * from "./week-days";
 export * from "./week-header";
 export * from "./quick-add-issue-form";

web/components/issues/issue-layouts/calendar/issue-block-root.tsx

@@ -0,0 +1,22 @@
+import React from "react";
+// components
+import { CalendarIssueBlock } from "components/issues";
+// types
+import { TIssue, TIssueMap } from "@plane/types";
+
+type Props = {
+  issues: TIssueMap | undefined;
+  issueId: string;
+  quickActions: (issue: TIssue, customActionButton?: React.ReactElement) => React.ReactNode;
+  isDragging?: boolean;
+};
+
+export const CalendarIssueBlockRoot: React.FC<Props> = (props) => {
+  const { issues, issueId, quickActions, isDragging } = props;
+
+  if (!issues?.[issueId]) return null;
+
+  const issue = issues?.[issueId];
+
+  return <CalendarIssueBlock isDragging={isDragging} issue={issue} quickActions={quickActions} />;
+};

web/components/issues/issue-layouts/calendar/issue-block.tsx

@@ -0,0 +1,113 @@
+import { useState, useRef } from "react";
+import { MoreHorizontal } from "lucide-react";
+import { observer } from "mobx-react";
+// components
+import { Tooltip, ControlLink } from "@plane/ui";
+// hooks
+import useOutsideClickDetector from "hooks/use-outside-click-detector";
+import { useApplication, useIssueDetail, useProject, useProjectState } from "hooks/store";
+// helpers
+import { cn } from "helpers/common.helper";
+// types
+import { TIssue } from "@plane/types";
+import { usePlatformOS } from "hooks/use-platform-os";
+
+type Props = {
+  issue: TIssue;
+  quickActions: (issue: TIssue, customActionButton?: React.ReactElement) => React.ReactNode;
+  isDragging?: boolean;
+};
+
+export const CalendarIssueBlock: React.FC<Props> = observer((props) => {
+  const { issue, quickActions, isDragging = false } = props;
+  // hooks
+  const {
+    router: { workspaceSlug, projectId },
+  } = useApplication();
+  const { getProjectIdentifierById } = useProject();
+  const { getProjectStates } = useProjectState();
+  const { peekIssue, setPeekIssue } = useIssueDetail();
+  const { isMobile } = usePlatformOS();
+  // states
+  const [isMenuActive, setIsMenuActive] = useState(false);
+
+  const menuActionRef = useRef<HTMLDivElement | null>(null);
+
+  const stateColor = getProjectStates(issue?.project_id)?.find((state) => state?.id == issue?.state_id)?.color || "";
+
+  const handleIssuePeekOverview = (issue: TIssue) =>
+    workspaceSlug &&
+    issue &&
+    issue.project_id &&
+    issue.id &&
+    setPeekIssue({ workspaceSlug, projectId: issue.project_id, issueId: issue.id });
+
+  useOutsideClickDetector(menuActionRef, () => setIsMenuActive(false));
+
+  const customActionButton = (
+    <div
+      ref={menuActionRef}
+      className={`w-full cursor-pointer rounded p-1 text-custom-sidebar-text-400 hover:bg-custom-background-80 ${
+        isMenuActive ? "bg-custom-background-80 text-custom-text-100" : "text-custom-text-200"
+      }`}
+      onClick={() => setIsMenuActive(!isMenuActive)}
+    >
+      <MoreHorizontal className="h-3.5 w-3.5" />
+    </div>
+  );
+
+  return (
+    <ControlLink
+      href={`/${workspaceSlug}/projects/${projectId}/issues/${issue.id}`}
+      target="_blank"
+      onClick={() => handleIssuePeekOverview(issue)}
+      className="w-full cursor-pointer text-sm text-custom-text-100"
+      disabled={!!issue?.tempId}
+    >
+      <>
+        {issue?.tempId !== undefined && (
+          <div className="absolute left-0 top-0 z-[99999] h-full w-full animate-pulse bg-custom-background-100/20" />
+        )}
+
+        <div
+          className={cn(
+            "group/calendar-block flex h-10 md:h-8 w-full items-center justify-between gap-1.5 rounded border-b md:border-[0.5px] border-custom-border-200 hover:border-custom-border-400 md:px-1 px-4 py-1.5 ",
+            {
+              "bg-custom-background-90 shadow-custom-shadow-rg border-custom-primary-100": isDragging,
+            },
+            { "bg-custom-background-100 hover:bg-custom-background-90": !isDragging },
+            {
+              "border border-custom-primary-70 hover:border-custom-primary-70": peekIssue?.issueId === issue.id,
+            }
+          )}
+        >
+          <div className="flex h-full items-center gap-1.5 truncate">
+            <span
+              className="h-full w-0.5 flex-shrink-0 rounded"
+              style={{
+                backgroundColor: stateColor,
+              }}
+            />
+            <div className="flex-shrink-0 text-sm md:text-xs text-custom-text-300">
+              {getProjectIdentifierById(issue?.project_id)}-{issue.sequence_id}
+            </div>
+            <Tooltip tooltipContent={issue.name} isMobile={isMobile}>
+              <div className="truncate text-sm font-medium md:font-normal md:text-xs">{issue.name}</div>
+            </Tooltip>
+          </div>
+          <div
+            className={`flex-shrink-0 md:hidden h-5 w-5 group-hover/calendar-block:block ${
+              isMenuActive ? "!block" : ""
+            }`}
+            onClick={(e) => {
+              e.preventDefault();
+              e.stopPropagation();
+            }}
+          >
+            {quickActions(issue, customActionButton)}
+          </div>
+        </div>
+      </>
+    </ControlLink>
+  );
+});

web/components/issues/issue-layouts/calendar/issue-blocks.tsx

@@ -1,74 +1,62 @@
-import { useState, useRef } from "react";
+import { useState } from "react";
 import { Draggable } from "@hello-pangea/dnd";
 import { observer } from "mobx-react-lite";
-import { MoreHorizontal } from "lucide-react";
 // components
-import { Tooltip, ControlLink } from "@plane/ui";
+import { CalendarQuickAddIssueForm, CalendarIssueBlockRoot } from "components/issues";
-// hooks
-import { cn } from "helpers/common.helper";
-import { useApplication, useIssueDetail, useProject, useProjectState } from "hooks/store";
-import useOutsideClickDetector from "hooks/use-outside-click-detector";
-import { usePlatformOS } from "hooks/use-platform-os";
 // helpers
+import { renderFormattedPayloadDate } from "helpers/date-time.helper";
 // types
 import { TIssue, TIssueMap } from "@plane/types";
+import useSize from "hooks/use-window-size";
 
 type Props = {
+  date: Date;
   issues: TIssueMap | undefined;
   issueIdList: string[] | null;
   quickActions: (issue: TIssue, customActionButton?: React.ReactElement) => React.ReactNode;
-  showAllIssues?: boolean;
   isDragDisabled?: boolean;
+  enableQuickIssueCreate?: boolean;
+  disableIssueCreation?: boolean;
+  quickAddCallback?: (
+    workspaceSlug: string,
+    projectId: string,
+    data: TIssue,
+    viewId?: string
+  ) => Promise<TIssue | undefined>;
+  addIssuesToView?: (issueIds: string[]) => Promise<any>;
+  viewId?: string;
+  readOnly?: boolean;
 };
 
 export const CalendarIssueBlocks: React.FC<Props> = observer((props) => {
-  const { issues, issueIdList, quickActions, showAllIssues = false, isDragDisabled = false } = props;
-  // hooks
   const {
-    router: { workspaceSlug, projectId },
+    date,
-  } = useApplication();
+    issues,
-  const { getProjectIdentifierById } = useProject();
+    issueIdList,
-  const { getProjectStates } = useProjectState();
+    quickActions,
-  const { peekIssue, setPeekIssue } = useIssueDetail();
+    isDragDisabled = false,
-  const { isMobile } = usePlatformOS();
+    enableQuickIssueCreate,
+    disableIssueCreation,
+    quickAddCallback,
+    addIssuesToView,
+    viewId,
+    readOnly,
+  } = props;
   // states
-  const [isMenuActive, setIsMenuActive] = useState(false);
+  const [showAllIssues, setShowAllIssues] = useState(false);
+  // hooks
+  const [windowWidth] = useSize();
 
-  const menuActionRef = useRef<HTMLDivElement | null>(null);
+  const formattedDatePayload = renderFormattedPayloadDate(date);
+  const totalIssues = issueIdList?.length ?? 0;
 
-  const handleIssuePeekOverview = (issue: TIssue) =>
+  if (!formattedDatePayload) return null;
-    workspaceSlug &&
-    issue &&
-    issue.project_id &&
-    issue.id &&
-    setPeekIssue({ workspaceSlug, projectId: issue.project_id, issueId: issue.id });
-
-  useOutsideClickDetector(menuActionRef, () => setIsMenuActive(false));
-
-  const customActionButton = (
-    <div
-      ref={menuActionRef}
-      className={`w-full cursor-pointer rounded p-1 text-custom-sidebar-text-400 hover:bg-custom-background-80 ${
-        isMenuActive ? "bg-custom-background-80 text-custom-text-100" : "text-custom-text-200"
-      }`}
-      onClick={() => setIsMenuActive(!isMenuActive)}
-    >
-      <MoreHorizontal className="h-3.5 w-3.5" />
-    </div>
-  );
 
   return (
     <>
-      {issueIdList?.slice(0, showAllIssues ? issueIdList.length : 4).map((issueId, index) => {
+      {issueIdList?.slice(0, showAllIssues || windowWidth <= 768 ? issueIdList.length : 4).map((issueId, index) =>
-        if (!issues?.[issueId]) return null;
+        windowWidth > 768 ? (
-
+          <Draggable key={issueId} draggableId={issueId} index={index} isDragDisabled={isDragDisabled}>
-        const issue = issues?.[issueId];
-
-        const stateColor =
-          getProjectStates(issue?.project_id)?.find((state) => state?.id == issue?.state_id)?.color || "";
-
-        return (
-          <Draggable key={issue.id} draggableId={issue.id} index={index} isDragDisabled={isDragDisabled}>
             {(provided, snapshot) => (
               <div
                 className="relative cursor-pointer p-1 px-2"
@@ -76,63 +64,46 @@ export const CalendarIssueBlocks: React.FC<Props> = observer((props) => {
                 {...provided.dragHandleProps}
                 ref={provided.innerRef}
               >
-                <ControlLink
+                <CalendarIssueBlockRoot
-                  href={`/${workspaceSlug}/projects/${projectId}/issues/${issue.id}`}
+                  issues={issues}
-                  target="_blank"
+                  issueId={issueId}
-                  onClick={() => handleIssuePeekOverview(issue)}
+                  quickActions={quickActions}
-                  className="w-full line-clamp-1 cursor-pointer text-sm text-custom-text-100"
+                  isDragging={snapshot.isDragging}
-                  disabled={!!issue?.tempId}
+                />
-                >
-                  <>
-                    {issue?.tempId !== undefined && (
-                      <div className="absolute left-0 top-0 z-[99999] h-full w-full animate-pulse bg-custom-background-100/20" />
-                    )}
-
-                    <div
-                      className={cn(
-                        "group/calendar-block flex h-8 w-full items-center justify-between gap-1.5 rounded border-[0.5px] border-custom-border-200 hover:border-custom-border-400 px-1 py-1.5 ",
-                        {
-                          "bg-custom-background-90 shadow-custom-shadow-rg border-custom-primary-100":
-                            snapshot.isDragging,
-                        },
-                        { "bg-custom-background-100 hover:bg-custom-background-90": !snapshot.isDragging },
-                        {
-                          "border border-custom-primary-70 hover:border-custom-primary-70":
-                            peekIssue?.issueId === issue.id,
-                        }
-                      )}
-                    >
-                      <div className="flex h-full items-center gap-1.5">
-                        <span
-                          className="h-full w-0.5 flex-shrink-0 rounded"
-                          style={{
-                            backgroundColor: stateColor,
-                          }}
-                        />
-                        <div className="flex-shrink-0 text-xs text-custom-text-300">
-                          {getProjectIdentifierById(issue?.project_id)}-{issue.sequence_id}
-                        </div>
-                        <Tooltip tooltipContent={issue.name} isMobile={isMobile}>
-                          <div className="truncate text-xs">{issue.name}</div>
-                        </Tooltip>
-                      </div>
-                      <div
-                        className={`hidden h-5 w-5 group-hover/calendar-block:block ${isMenuActive ? "!block" : ""}`}
-                        onClick={(e) => {
-                          e.preventDefault();
-                          e.stopPropagation();
-                        }}
-                      >
-                        {quickActions(issue, customActionButton)}
-                      </div>
-                    </div>
-                  </>
-                </ControlLink>
               </div>
             )}
           </Draggable>
-        );
+        ) : (
-      })}
+          <CalendarIssueBlockRoot key={issueId} issues={issues} issueId={issueId} quickActions={quickActions} />
+        )
+      )}
+
+      {enableQuickIssueCreate && !disableIssueCreation && !readOnly && (
+        <div className="px-1 md:px-2 py-1 border-custom-border-200 border-b md:border-none">
+          <CalendarQuickAddIssueForm
+            formKey="target_date"
+            groupId={formattedDatePayload}
+            prePopulatedData={{
+              target_date: formattedDatePayload,
+            }}
+            quickAddCallback={quickAddCallback}
+            addIssuesToView={addIssuesToView}
+            viewId={viewId}
+            onOpen={() => setShowAllIssues(true)}
+          />
+        </div>
+      )}
+      {totalIssues > 4 && (
+        <div className="hidden md:flex items-center px-2.5 py-1">
+          <button
+            type="button"
+            className="w-min whitespace-nowrap rounded text-xs px-1.5 py-1 text-custom-text-400 font-medium  hover:bg-custom-background-80 hover:text-custom-text-300"
+            onClick={() => setShowAllIssues(!showAllIssues)}
+          >
+            {showAllIssues ? "Hide" : totalIssues - 4 + " more"}
+          </button>
+        </div>
+      )}
     </>
   );
 });

web/components/issues/issue-layouts/calendar/quick-add-issue-form.tsx

@@ -50,7 +50,7 @@ const Inputs = (props: any) => {
 
   return (
     <>
-      <h4 className="text-xs leading-5 text-custom-text-400">{projectDetails?.identifier ?? "..."}</h4>
+      <h4 className="text-sm md:text-xs leading-5 text-custom-text-400">{projectDetails?.identifier ?? "..."}</h4>
       <input
         type="text"
         autoComplete="off"
@@ -58,7 +58,7 @@ const Inputs = (props: any) => {
         {...register("name", {
           required: "Issue title is required.",
         })}
-        className="w-full rounded-md bg-transparent py-1.5 pr-2 text-xs font-medium leading-5 text-custom-text-200 outline-none"
+        className="w-full rounded-md bg-transparent py-1.5 pr-2 text-sm md:text-xs font-medium leading-5 text-custom-text-200 outline-none"
       />
     </>
   );
@@ -221,7 +221,7 @@ export const CalendarQuickAddIssueForm: React.FC<Props> = observer((props) => {
         >
           <form
             onSubmit={handleSubmit(onSubmitHandler)}
-            className="z-50 flex w-full items-center gap-x-2 rounded border-[0.5px] border-custom-border-200 bg-custom-background-100 px-2 shadow-custom-shadow-2xs transition-opacity"
+            className="z-50 flex w-full items-center gap-x-2 rounded md:border-[0.5px] border-custom-border-200 bg-custom-background-100 px-2 md:shadow-custom-shadow-2xs transition-opacity"
           >
             <Inputs formKey={formKey} register={register} setFocus={setFocus} projectDetails={projectDetail} />
           </form>
@@ -230,7 +230,7 @@ export const CalendarQuickAddIssueForm: React.FC<Props> = observer((props) => {
 
       {!isOpen && (
         <div
-          className={cn("hidden rounded border-[0.5px] border-custom-border-200 group-hover:block", {
+          className={cn("md:hidden rounded md:border-[0.5px] border-custom-border-200 md:group-hover:block", {
             block: isMenuOpen,
           })}
         >

web/components/issues/issue-layouts/calendar/week-days.tsx

@@ -28,6 +28,8 @@ type Props = {
   addIssuesToView?: (issueIds: string[]) => Promise<any>;
   viewId?: string;
   readOnly?: boolean;
+  selectedDate: Date;
+  setSelectedDate: (date: Date) => void;
 };
 
 export const CalendarWeekDays: React.FC<Props> = observer((props) => {
@@ -43,6 +45,8 @@ export const CalendarWeekDays: React.FC<Props> = observer((props) => {
     addIssuesToView,
     viewId,
     readOnly = false,
+    selectedDate,
+    setSelectedDate,
   } = props;
 
   const calendarLayout = issuesFilterStore?.issueFilters?.displayFilters?.calendar?.layout ?? "month";
@@ -52,7 +56,7 @@ export const CalendarWeekDays: React.FC<Props> = observer((props) => {
 
   return (
     <div
-      className={`grid divide-x-[0.5px] divide-custom-border-200 ${showWeekends ? "grid-cols-7" : "grid-cols-5"} ${
+      className={`grid md:divide-x-[0.5px] divide-custom-border-200 ${showWeekends ? "grid-cols-7" : "grid-cols-5"} ${
         calendarLayout === "month" ? "" : "h-full"
       }`}
     >
@@ -61,6 +65,8 @@ export const CalendarWeekDays: React.FC<Props> = observer((props) => {
 
         return (
           <CalendarDayTile
+            selectedDate={selectedDate}
+            setSelectedDate={setSelectedDate}
             issuesFilterStore={issuesFilterStore}
             key={renderFormattedPayloadDate(date.date)}
             date={date}

web/components/issues/issue-layouts/calendar/week-header.tsx

@@ -13,7 +13,7 @@ export const CalendarWeekHeader: React.FC<Props> = observer((props) => {
 
   return (
     <div
-      className={`relative sticky top-0 z-[1] grid divide-x-[0.5px] divide-custom-border-200 text-sm font-medium ${
+      className={`relative sticky top-0 z-[1] grid md:divide-x-[0.5px] divide-custom-border-200 text-sm font-medium ${
         showWeekends ? "grid-cols-7" : "grid-cols-5"
       }`}
     >
@@ -24,7 +24,7 @@ export const CalendarWeekHeader: React.FC<Props> = observer((props) => {
         if (!showWeekends && (day.shortTitle === "Sat" || day.shortTitle === "Sun")) return null;
 
         return (
-          <div key={day.shortTitle} className="flex h-11 items-center justify-end bg-custom-background-90 px-4">
+          <div key={day.shortTitle} className="flex h-11 items-center justify-center md:justify-end bg-custom-background-90 px-4">
             {day.shortTitle}
           </div>
         );