fix: merge conflicts resolved

2024-02-12 17:09:22 +05:30 · 2024-02-12 17:09:22 +05:30 · 9cf5348019
commit 9cf5348019
parent 0fb43c6fc5 042ed04a03
22 changed files with 176 additions and 78 deletions
--- a/packages/editor/document-editor/src/ui/components/editor-header.tsx
+++ b/packages/editor/document-editor/src/ui/components/editor-header.tsx
@ -42,8 +42,8 @@ export const EditorHeader = (props: IEditorHeader) => {
  } = props;

  return (
-    <div className="flex items-center border-b border-custom-border-200 px-5 py-2">
-      <div className="w-56 flex-shrink-0 lg:w-72">
+    <div className="flex items-center border-b border-custom-border-200 md:px-5 px-3 py-2">
+      <div className="md:w-56 flex-shrink-0 lg:w-72 w-fit">
        <SummaryPopover
          editor={editor}
          markings={markings}
@ -52,7 +52,7 @@ export const EditorHeader = (props: IEditorHeader) => {
        />
      </div>

-      <div className="flex-shrink-0">
+      <div className="flex-shrink-0 hidden md:flex">
        {!readonly && uploadFile && (
          <FixedMenu editor={editor} uploadFile={uploadFile} setIsSubmitting={setIsSubmitting} />
        )}
--- a/packages/editor/document-editor/src/ui/components/page-renderer.tsx
+++ b/packages/editor/document-editor/src/ui/components/page-renderer.tsx
@ -152,7 +152,7 @@ export const PageRenderer = (props: IPageRenderer) => {
  );

  return (
-    <div className="w-full pb-64 pl-7 pt-5 page-renderer">
+    <div className="w-full pb-64 md:pl-7 pl-3 pt-5 page-renderer">
      {!readonly ? (
        <input
          onChange={(e) => handlePageTitleChange(e.target.value)}
--- a/packages/editor/document-editor/src/ui/components/summary-popover.tsx
+++ b/packages/editor/document-editor/src/ui/components/summary-popover.tsx
@ -40,6 +40,19 @@ export const SummaryPopover: React.FC<Props> = (props) => {
      >
        <List className="h-4 w-4" />
      </button>
+      <div className="md:hidden block">
+        {sidePeekVisible && (
+          <div
+            className="z-10 max-h-80 w-64 overflow-y-auto rounded border-[0.5px] border-custom-border-200 bg-custom-background-100 p-3 shadow-custom-shadow-rg"
+            ref={setPopperElement}
+            style={summaryPopoverStyles.popper}
+            {...summaryPopoverAttributes.popper}
+          >
+            <ContentBrowser editor={editor} markings={markings} />
+          </div>
+        )}
+      </div>
+      <div className="hidden md:block">
        {!sidePeekVisible && (
          <div
            className="z-10 hidden max-h-80 w-64 overflow-y-auto rounded border-[0.5px] border-custom-border-200 bg-custom-background-100 p-3 shadow-custom-shadow-rg group-hover/summary-popover:block"
@ -51,5 +64,6 @@ export const SummaryPopover: React.FC<Props> = (props) => {
          </div>
        )}
      </div>
+    </div>
  );
 };
--- a/packages/editor/document-editor/src/ui/index.tsx
+++ b/packages/editor/document-editor/src/ui/index.tsx
@ -10,6 +10,7 @@ import { DocumentDetails } from "src/types/editor-types";
 import { PageRenderer } from "src/ui/components/page-renderer";
 import { getMenuOptions } from "src/utils/menu-options";
 import { useRouter } from "next/router";
+import { FixedMenu } from "src";

 interface IDocumentEditor {
  // document info
@ -149,11 +150,14 @@ const DocumentEditor = ({
        documentDetails={documentDetails}
        isSubmitting={isSubmitting}
      />
+      <div className="flex-shrink-0 md:hidden border-b border-custom-border-200 pl-3 py-2">
+        {uploadFile && <FixedMenu editor={editor} uploadFile={uploadFile} setIsSubmitting={setIsSubmitting} />}
+      </div>
      <div className="flex h-full w-full overflow-y-auto frame-renderer">
-        <div className="sticky top-0 h-full w-56 flex-shrink-0 lg:w-72">
+        <div className="sticky top-0 h-full w-56 flex-shrink-0 lg:w-72 hidden md:block">
          <SummarySideBar editor={editor} markings={markings} sidePeekVisible={sidePeekVisible} />
        </div>
-        <div className="h-full w-[calc(100%-14rem)] lg:w-[calc(100%-18rem-18rem)] page-renderer">
+        <div className="h-full w-full md:w-[calc(100%-14rem)] lg:w-[calc(100%-18rem-18rem)] page-renderer">
          <PageRenderer
            onActionCompleteHandler={onActionCompleteHandler}
            hideDragHandle={hideDragHandleOnMouseLeave}
--- a/packages/editor/document-editor/src/ui/menu/fixed-menu.tsx
+++ b/packages/editor/document-editor/src/ui/menu/fixed-menu.tsx
@ -77,7 +77,7 @@ export const FixedMenu = (props: EditorBubbleMenuProps) => {
  }

  return (
-    <div className="flex items-center divide-x divide-custom-border-200">
+    <div className="flex flex-wrap items-center divide-x divide-custom-border-200">
      <div className="flex items-center gap-0.5 pr-2">
        {basicMarkItems.map((item) => (
          <button
--- a/web/components/core/sidebar/sidebar-menu-hamburger-toggle.tsx
+++ b/web/components/core/sidebar/sidebar-menu-hamburger-toggle.tsx
@ -7,7 +7,7 @@ export const SidebarHamburgerToggle: FC = observer(() => {
  const { theme: themStore } = useApplication();
  return (
    <div
-      className="w-7 h-7 rounded flex justify-center items-center bg-custom-background-80 transition-all hover:bg-custom-background-90 cursor-pointer group md:hidden"
+      className="w-7 h-7 flex-shrink-0 rounded flex justify-center items-center bg-custom-background-80 transition-all hover:bg-custom-background-90 cursor-pointer group md:hidden"
      onClick={() => themStore.toggleSidebar()}
    >
      <Menu size={14} className="text-custom-text-200 group-hover:text-custom-text-100 transition-all" />
--- a/web/components/empty-state/empty-state.tsx
+++ b/web/components/empty-state/empty-state.tsx
@ -65,14 +65,14 @@ export const EmptyState: React.FC<Props> = ({
  );

  return (
-    <div className="flex items-center justify-center min-h-full min-w-full overflow-y-auto py-10 px-20">
+    <div className="flex items-center justify-center min-h-full min-w-full overflow-y-auto py-10 md:px-20 px-5">
      <div
        className={cn("flex flex-col gap-5", {
-          "min-w-[24rem] max-w-[45rem]": size === "sm",
-          "min-w-[30rem] max-w-[60rem]": size === "lg",
+          "md:min-w-[24rem] max-w-[45rem]": size === "sm",
+          "md:min-w-[30rem] max-w-[60rem]": size === "lg",
        })}
      >
-        <div className="flex flex-col gap-1.5 flex-shrink-0">{emptyStateHeader}</div>
+        <div className="flex flex-col gap-1.5 flex-shrink">{emptyStateHeader}</div>

        <Image
          src={image}
--- a/web/components/headers/page-details.tsx
+++ b/web/components/headers/page-details.tsx
@ -36,6 +36,8 @@ export const PageDetailsHeader: FC<IPagesHeaderProps> = observer((props) => {
            <Breadcrumbs.BreadcrumbItem
              type="text"
              link={
+                <span>
+                  <span className="hidden md:block">
                    <BreadcrumbLink
                      href={`/${workspaceSlug}/projects/${currentProjectDetails?.id}/issues`}
                      label={currentProjectDetails?.name ?? "Project"}
@ -51,8 +53,17 @@ export const PageDetailsHeader: FC<IPagesHeaderProps> = observer((props) => {
                        )
                      }
                    />
+                  </span>
+                  <span className="md:hidden">
+                    <BreadcrumbLink
+                      href={`/${workspaceSlug}/projects/${currentProjectDetails?.id}/issues`}
+                      label={"..."}
+                    />
+                  </span>
+                </span>
              }
            />
+
            <Breadcrumbs.BreadcrumbItem
              type="text"
              link={
--- a/web/components/headers/project-issue-details.tsx
+++ b/web/components/headers/project-issue-details.tsx
@ -3,7 +3,7 @@ import useSWR from "swr";
 import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
 // hooks
-import { useProject } from "hooks/store";
+import { useApplication, useProject } from "hooks/store";
 // ui
 import { Breadcrumbs, LayersIcon } from "@plane/ui";
 // helpers
@ -15,6 +15,8 @@ import { ISSUE_DETAILS } from "constants/fetch-keys";
 // components
 import { SidebarHamburgerToggle } from "components/core/sidebar/sidebar-menu-hamburger-toggle";
 import { BreadcrumbLink } from "components/common";
+import { PanelRight } from "lucide-react";
+import { cn } from "helpers/common.helper";

 // services
 const issueService = new IssueService();
@ -25,6 +27,7 @@ export const ProjectIssueDetailsHeader: FC = observer(() => {
  const { workspaceSlug, projectId, issueId } = router.query;
  // store hooks
  const { currentProjectDetails, getProjectById } = useProject();
+  const { theme: themeStore } = useApplication();

  const { data: issueDetails } = useSWR(
    workspaceSlug && projectId && issueId ? ISSUE_DETAILS(issueId as string) : null,
@ -33,12 +36,14 @@ export const ProjectIssueDetailsHeader: FC = observer(() => {
      : null
  );

+  const isSidebarCollapsed = themeStore.issueDetailSidebarCollapsed;
+
  return (
    <div className="relative z-10 flex h-[3.75rem] w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4">
      <div className="flex w-full flex-grow items-center gap-2 overflow-ellipsis whitespace-nowrap">
        <SidebarHamburgerToggle />
        <div>
-          <Breadcrumbs>
+          <Breadcrumbs onBack={router.back}>
            <Breadcrumbs.BreadcrumbItem
              type="text"
              link={
@ -85,6 +90,9 @@ export const ProjectIssueDetailsHeader: FC = observer(() => {
          </Breadcrumbs>
        </div>
      </div>
+      <button className="block md:hidden" onClick={() => themeStore.toggleIssueDetailSidebar()}>
+        <PanelRight className={cn("w-4 h-4 ", !isSidebarCollapsed ? "text-custom-primary-100" : " text-custom-text-200")} />
+      </button>
    </div>
  );
 });
--- a/web/components/headers/project-issues.tsx
+++ b/web/components/headers/project-issues.tsx
@ -213,7 +213,7 @@ export const ProjectIssuesHeader: React.FC = observer(() => {
                  )}
                </Button>
              </span>
-              <Inbox className="w-4 h-4 mr-2 text-custom-text-200" />
+              <Inbox className="w-4 h-4 mr-2 text-custom-text-200 block md:hidden" />
            </Link>
          )}
          {canUserCreateIssue && (
--- a/web/components/issues/issue-detail/issue-activity/activity/actions/helpers/activity-block.tsx
+++ b/web/components/issues/issue-detail/issue-activity/activity/actions/helpers/activity-block.tsx
@ -33,7 +33,7 @@ export const IssueActivityBlockComponent: FC<TIssueActivityBlockComponent> = (pr
      }`}
    >
      <div className="absolute left-[13px] top-0 bottom-0 w-0.5 bg-custom-background-80" aria-hidden={true} />
-      <div className="flex-shrink-0 ring-6 w-7 h-7 rounded-full overflow-hidden flex justify-center items-center z-10 bg-custom-background-80 text-custom-text-200">
+      <div className="flex-shrink-0 ring-6 w-7 h-7 rounded-full overflow-hidden flex justify-center items-center z-[4] bg-custom-background-80 text-custom-text-200">
        {icon ? icon : <Network className="w-3.5 h-3.5" />}
      </div>
      <div className="w-full text-custom-text-200">
--- a/web/components/issues/issue-detail/root.tsx
+++ b/web/components/issues/issue-detail/root.tsx
@ -9,7 +9,7 @@ import { EmptyState } from "components/common";
 // images
 import emptyIssue from "public/empty-state/issue.svg";
 // hooks
-import { useEventTracker, useIssueDetail, useIssues, useUser } from "hooks/store";
+import { useApplication, useEventTracker, useIssueDetail, useIssues, useUser } from "hooks/store";
 import useToast from "hooks/use-toast";
 // types
 import { TIssue } from "@plane/types";
@ -17,6 +17,7 @@ import { TIssue } from "@plane/types";
 import { EUserProjectRoles } from "constants/project";
 import { EIssuesStoreType } from "constants/issue";
 import { ISSUE_UPDATED, ISSUE_DELETED } from "constants/event-tracker";
+import { observer } from "mobx-react";

 export type TIssueOperations = {
  fetch: (workspaceSlug: string, projectId: string, issueId: string) => Promise<void>;
@ -52,7 +53,7 @@ export type TIssueDetailRoot = {
  is_archived?: boolean;
 };

-export const IssueDetailRoot: FC<TIssueDetailRoot> = (props) => {
+export const IssueDetailRoot: FC<TIssueDetailRoot> = observer((props) => {
  const { workspaceSlug, projectId, issueId, is_archived = false } = props;
  // router
  const router = useRouter();
@ -76,6 +77,7 @@ export const IssueDetailRoot: FC<TIssueDetailRoot> = (props) => {
  const {
    membership: { currentProjectRole },
  } = useUser();
+  const { theme: themeStore } = useApplication();

  const issueOperations: TIssueOperations = useMemo(
    () => ({
@ -347,8 +349,8 @@ export const IssueDetailRoot: FC<TIssueDetailRoot> = (props) => {
          }}
        />
      ) : (
-        <div className="flex h-full overflow-hidden">
-          <div className="h-full w-2/3 space-y-5 divide-y-2 divide-custom-border-300 overflow-y-auto p-5">
+        <div className="flex w-full h-full overflow-hidden">
+          <div className="h-full w-full max-w-2/3 space-y-5 divide-y-2 divide-custom-border-300 overflow-y-auto p-5">
            <IssueMainContent
              workspaceSlug={workspaceSlug}
              projectId={projectId}
@ -357,7 +359,10 @@ export const IssueDetailRoot: FC<TIssueDetailRoot> = (props) => {
              is_editable={!is_archived && is_editable}
            />
          </div>
-          <div className="h-full w-1/3 space-y-5 overflow-hidden border-l border-custom-border-300 py-5">
+          <div
+            className="h-full w-full sm:w-1/2 md:w-1/3 space-y-5 overflow-hidden border-l border-custom-border-300 py-5 fixed md:relative bg-custom-sidebar-background-100 right-0 z-[5]"
+            style={themeStore.issueDetailSidebarCollapsed ? { right: `-${window?.innerWidth || 0}px` } : {}}
+          >
            <IssueDetailsSidebar
              workspaceSlug={workspaceSlug}
              projectId={projectId}
@ -374,4 +379,4 @@ export const IssueDetailRoot: FC<TIssueDetailRoot> = (props) => {
      <IssuePeekOverview />
    </>
  );
-};
+});
--- a/web/components/issues/issue-detail/sidebar.tsx
+++ b/web/components/issues/issue-detail/sidebar.tsx
@ -187,8 +187,7 @@ export const IssueDetailsSidebar: React.FC<Props> = observer((props) => {
                buttonVariant={issue?.assignee_ids?.length > 1 ? "transparent-without-text" : "transparent-with-text"}
                className="w-3/5 flex-grow group"
                buttonContainerClassName="w-full text-left"
-                buttonClassName={`text-sm justify-between ${
-                  issue?.assignee_ids.length > 0 ? "" : "text-custom-text-400"
+                buttonClassName={`text-sm justify-between ${issue?.assignee_ids.length > 0 ? "" : "text-custom-text-400"
                  }`}
                hideIcon={issue.assignee_ids?.length === 0}
                dropdownArrow
--- a/web/components/issues/issue-detail/subscription.tsx
+++ b/web/components/issues/issue-detail/subscription.tsx
@ -1,5 +1,5 @@
 import { FC, useState } from "react";
-import { Bell } from "lucide-react";
+import { Bell, BellOff } from "lucide-react";
 import { observer } from "mobx-react-lite";
 // UI
 import { Button } from "@plane/ui";
@ -52,12 +52,20 @@ export const IssueSubscription: FC<TIssueSubscription> = observer((props) => {
    <div>
      <Button
        size="sm"
-        prependIcon={<Bell className="h-3 w-3" />}
+        prependIcon={subscription?.subscribed ? <BellOff /> : <Bell className="h-3 w-3" />}
        variant="outline-primary"
        className="hover:!bg-custom-primary-100/20"
        onClick={handleSubscription}
      >
-        {loading ? "Loading..." : subscription?.subscribed ? "Unsubscribe" : "Subscribe"}
+        {loading ? (
+          <span>
+            <span className="hidden sm:block">Loading</span>...
+          </span>
+        ) : subscription?.subscribed ? (
+          <div className="hidden sm:block">Unsubscribe</div>
+        ) : (
+          <div className="hidden sm:block">Subscribe</div>
+        )}
      </Button>
    </div>
  );
--- a/web/components/issues/issue-layouts/spreadsheet/columns/header-column.tsx
+++ b/web/components/issues/issue-layouts/spreadsheet/columns/header-column.tsx
@ -66,11 +66,11 @@ export const HeaderColumn = (props: Props) => {
      }
      onMenuClose={onClose}
      placement="bottom-end"
+      closeOnSelect
    >
      <CustomMenu.MenuItem onClick={() => handleOrderBy(propertyDetails.ascendingOrderKey, property)}>
        <div
-          className={`flex items-center justify-between gap-1.5 px-1 ${
-            selectedMenuItem === `${propertyDetails.ascendingOrderKey}_${property}`
+          className={`flex items-center justify-between gap-1.5 px-1 ${selectedMenuItem === `${propertyDetails.ascendingOrderKey}_${property}`
            ? "text-custom-text-100"
            : "text-custom-text-200 hover:text-custom-text-100"
            }`}
@ -87,8 +87,7 @@ export const HeaderColumn = (props: Props) => {
      </CustomMenu.MenuItem>
      <CustomMenu.MenuItem onClick={() => handleOrderBy(propertyDetails.descendingOrderKey, property)}>
        <div
-          className={`flex items-center justify-between gap-1.5 px-1 ${
-            selectedMenuItem === `${propertyDetails.descendingOrderKey}_${property}`
+          className={`flex items-center justify-between gap-1.5 px-1 ${selectedMenuItem === `${propertyDetails.descendingOrderKey}_${property}`
            ? "text-custom-text-100"
            : "text-custom-text-200 hover:text-custom-text-100"
            }`}
--- a/web/components/pages/create-update-page-modal.tsx
+++ b/web/components/pages/create-update-page-modal.tsx
@ -104,7 +104,7 @@ export const CreateUpdatePageModal: FC<Props> = (props) => {
              leaveFrom="opacity-100 translate-y-0 sm:scale-100"
              leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
            >
-              <Dialog.Panel className="relative transform rounded-lg bg-custom-background-100 p-5 px-4 text-left shadow-custom-shadow-md transition-all sm:w-full sm:max-w-2xl">
+              <Dialog.Panel className="relative transform rounded-lg bg-custom-background-100 p-5 px-4 text-left shadow-custom-shadow-md transition-all w-full sm:max-w-2xl">
                <PageForm handleFormSubmit={handleFormSubmit} handleClose={handleClose} pageStore={pageStore} />
              </Dialog.Panel>
            </Transition.Child>
--- a/web/components/pages/page-form.tsx
+++ b/web/components/pages/page-form.tsx
@ -67,7 +67,7 @@ export const PageForm: React.FC<Props> = (props) => {
          </div>
        </div>
      </div>
-      <div className="mt-5 flex items-center justify-between gap-2">
+      <div className="mt-5 md:flex items-center justify-between gap-2">
        <Controller
          control={control}
          name="access"
@ -100,7 +100,7 @@ export const PageForm: React.FC<Props> = (props) => {
            </div>
          )}
        />
-        <div className="flex items-center gap-2">
+        <div className="flex items-center gap-2 justify-end mt-5 md:mt-0">
          <Button variant="neutral-primary" size="sm" onClick={handleClose} tabIndex={4}>
            Cancel
          </Button>
--- a/web/components/pages/pages-list/list-item.tsx
+++ b/web/components/pages/pages-list/list-item.tsx
@ -155,7 +155,7 @@ export const PagesListItem: FC<IPagesListItem> = observer(({ pageId, projectId }
      <DeletePageModal isOpen={deletePageModal} onClose={() => setDeletePageModal(false)} pageId={pageId} />
      <li>
        <Link href={`/${workspaceSlug}/projects/${projectId}/pages/${pageId}`}>
-          <div className="relative rounded p-4 text-custom-text-200 hover:bg-custom-background-80">
+          <div className="relative rounded p-3 md:p-4 text-custom-text-200 hover:bg-custom-background-80">
            <div className="flex items-center justify-between">
              <div className="flex items-center gap-2 overflow-hidden">
                <FileText className="h-4 w-4 shrink-0" />
--- a/web/components/pages/pages-list/recent-pages-list.tsx
+++ b/web/components/pages/pages-list/recent-pages-list.tsx
@ -52,7 +52,7 @@ export const RecentPagesList: FC = observer(() => {

            return (
              <div key={key}>
-                <h2 className="sticky top-0 z-[1] mb-2 bg-custom-background-100 text-xl font-semibold capitalize">
+                <h2 className="sticky top-0 z-[1] mb-2 bg-custom-background-100 text-xl font-semibold capitalize px-3 md:p-0">
                  {replaceUnderscoreIfSnakeCase(key)}
                </h2>
                <PagesListView pageIds={recentProjectPages[key]} />
--- a/web/pages/[workspaceSlug]/projects/[projectId]/issues/[issueId].tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/issues/[issueId].tsx
@ -1,4 +1,4 @@
-import React, { ReactElement } from "react";
+import React, { ReactElement, useEffect } from "react";
 import { useRouter } from "next/router";
 import useSWR from "swr";
 import { observer } from "mobx-react-lite";
@ -12,7 +12,7 @@ import { Loader } from "@plane/ui";
 // types
 import { NextPageWithLayout } from "lib/types";
 // fetch-keys
-import { useIssueDetail } from "hooks/store";
+import { useApplication, useIssueDetail } from "hooks/store";

 const IssueDetailsPage: NextPageWithLayout = observer(() => {
  // router
@ -23,6 +23,7 @@ const IssueDetailsPage: NextPageWithLayout = observer(() => {
    fetchIssue,
    issue: { getIssueById },
  } = useIssueDetail();
+  const { theme: themeStore } = useApplication();

  const { isLoading } = useSWR(
    workspaceSlug && projectId && issueId ? `ISSUE_DETAIL_${workspaceSlug}_${projectId}_${issueId}` : null,
@ -34,6 +35,21 @@ const IssueDetailsPage: NextPageWithLayout = observer(() => {
  const issue = getIssueById(issueId?.toString() || "") || undefined;
  const issueLoader = !issue || isLoading ? true : false;

+  useEffect(() => {
+    const handleToggleIssueDetailSidebar = () => {
+      if (window && window.innerWidth < 768) {
+        themeStore.toggleIssueDetailSidebar(true);
+      }
+      if (window && themeStore.issueDetailSidebarCollapsed && window.innerWidth >= 768) {
+        themeStore.toggleIssueDetailSidebar(false);
+      }
+    };
+
+    window.addEventListener("resize", handleToggleIssueDetailSidebar);
+    handleToggleIssueDetailSidebar();
+    return () => window.removeEventListener("resize", handleToggleIssueDetailSidebar);
+  }, [themeStore]);
+
  return (
    <>
      {issueLoader ? (
--- a/web/pages/[workspaceSlug]/projects/[projectId]/pages/index.tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/pages/index.tsx
@ -103,6 +103,25 @@ const ProjectPagesPage: NextPageWithLayout = observer(() => {

  const isEditingAllowed = !!currentProjectRole && currentProjectRole >= EUserWorkspaceRoles.MEMBER;

+  const mobileTabList = (
+    <Tab.List as="div" className="flex items-center justify-between border-b border-custom-border-200 px-3 pt-3 mb-4">
+      <div className="flex flex-wrap items-center gap-4">
+        {PAGE_TABS_LIST.map((tab) => (
+          <Tab
+            key={tab.key}
+            className={({ selected }) =>
+              `text-sm outline-none pb-3 ${
+                selected ? "border-custom-primary-100 text-custom-primary-100 border-b" : ""
+              }`
+            }
+          >
+            {tab.title}
+          </Tab>
+        ))}
+      </div>
+    </Tab.List>
+  );
+
  if (loader || archivedPageLoader)
    return (
      <div className="flex items-center justify-center h-full w-full">
@ -121,8 +140,8 @@ const ProjectPagesPage: NextPageWithLayout = observer(() => {
              projectId={projectId.toString()}
            />
          )}
-          <div className="flex h-full flex-col space-y-5 overflow-hidden p-6">
-            <div className="flex justify-between gap-4">
+          <div className="flex h-full flex-col md:space-y-5 overflow-hidden md:p-6">
+            <div className="justify-between gap-4 hidden md:flex">
              <h3 className="text-2xl font-semibold text-custom-text-100">Pages</h3>
            </div>
            <Tab.Group
@ -147,7 +166,8 @@ const ProjectPagesPage: NextPageWithLayout = observer(() => {
                }
              }}
            >
-              <Tab.List as="div" className="mb-6 flex items-center justify-between">
+              <div className="md:hidden">{mobileTabList}</div>
+              <Tab.List as="div" className="mb-6 items-center justify-between hidden md:flex">
                <div className="flex flex-wrap items-center gap-4">
                  {PAGE_TABS_LIST.map((tab) => (
                    <Tab
--- a/web/store/application/theme.store.ts
+++ b/web/store/application/theme.store.ts
@ -9,11 +9,13 @@ export interface IThemeStore {
  sidebarCollapsed: boolean | undefined;
  profileSidebarCollapsed: boolean | undefined;
  workspaceAnalyticsSidebarCollapsed: boolean | undefined;
+  issueDetailSidebarCollapsed: boolean | undefined;
  // actions
  toggleSidebar: (collapsed?: boolean) => void;
  setTheme: (theme: any) => void;
  toggleProfileSidebar: (collapsed?: boolean) => void;
  toggleWorkspaceAnalyticsSidebar: (collapsed?: boolean) => void;
+  toggleIssueDetailSidebar: (collapsed?: boolean) => void;
 }

 export class ThemeStore implements IThemeStore {
@ -22,6 +24,7 @@ export class ThemeStore implements IThemeStore {
  theme: string | null = null;
  profileSidebarCollapsed: boolean | undefined = undefined;
  workspaceAnalyticsSidebarCollapsed: boolean | undefined = undefined;
+  issueDetailSidebarCollapsed: boolean | undefined = undefined;
  // root store
  rootStore;

@ -32,11 +35,13 @@ export class ThemeStore implements IThemeStore {
      theme: observable.ref,
      profileSidebarCollapsed: observable.ref,
      workspaceAnalyticsSidebarCollapsed: observable.ref,
+      issueDetailSidebarCollapsed: observable.ref,
      // action
      toggleSidebar: action,
      setTheme: action,
      toggleProfileSidebar: action,
-      toggleWorkspaceAnalyticsSidebar: action
+      toggleWorkspaceAnalyticsSidebar: action,
+      toggleIssueDetailSidebar: action,
      // computed
    });
    // root store
@ -82,6 +87,15 @@ export class ThemeStore implements IThemeStore {
    localStorage.setItem("workspace_analytics_sidebar_collapsed", this.workspaceAnalyticsSidebarCollapsed.toString());
  };

+  toggleIssueDetailSidebar = (collapsed?: boolean) => {
+    if(collapsed === undefined) {
+      this.issueDetailSidebarCollapsed = !this.issueDetailSidebarCollapsed;
+    } else {
+      this.issueDetailSidebarCollapsed = collapsed;
+    }
+    localStorage.setItem("issue_detail_sidebar_collapsed", this.issueDetailSidebarCollapsed.toString());
+  }
+
  /**
   * Sets the user theme and applies it to the platform
   * @param _theme