fix: project-pages responsiveness (#3624)

* fix: pages responsiveness

* fix: build errors

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="flex items-center border-b border-custom-border-200 md:px-5 px-3 py-2">
-      <div className="w-56 flex-shrink-0 lg:w-72">
+      <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} />
         )}

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)}

packages/editor/document-editor/src/ui/components/summary-popover.tsx

@@ -40,16 +40,30 @@ export const SummaryPopover: React.FC<Props> = (props) => {
       >
         <List className="h-4 w-4" />
       </button>
-      {!sidePeekVisible && (
+      <div className="md:hidden block">
-        <div
+        {sidePeekVisible && (
-          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"
+          <div
-          ref={setPopperElement}
+            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"
-          style={summaryPopoverStyles.popper}
+            ref={setPopperElement}
-          {...summaryPopoverAttributes.popper}
+            style={summaryPopoverStyles.popper}
-        >
+            {...summaryPopoverAttributes.popper}
-          <ContentBrowser editor={editor} markings={markings} />
+          >
-        </div>
+            <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"
+            ref={setPopperElement}
+            style={summaryPopoverStyles.popper}
+            {...summaryPopoverAttributes.popper}
+          >
+            <ContentBrowser editor={editor} markings={markings} />
+          </div>
+        )}
+      </div>
     </div>
   );
 };

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}

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

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" />

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",
+          "md:min-w-[24rem] max-w-[45rem]": size === "sm",
-          "min-w-[30rem] max-w-[60rem]": size === "lg",
+          "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}

web/components/headers/page-details.tsx

@@ -36,23 +36,34 @@ export const PageDetailsHeader: FC<IPagesHeaderProps> = observer((props) => {
             <Breadcrumbs.BreadcrumbItem
               type="text"
               link={
-                <BreadcrumbLink
+                <span>
-                  href={`/${workspaceSlug}/projects/${currentProjectDetails?.id}/issues`}
+                  <span className="hidden md:block">
-                  label={currentProjectDetails?.name ?? "Project"}
+                    <BreadcrumbLink
-                  icon={
+                      href={`/${workspaceSlug}/projects/${currentProjectDetails?.id}/issues`}
-                    currentProjectDetails?.emoji ? (
+                      label={currentProjectDetails?.name ?? "Project"}
-                      renderEmoji(currentProjectDetails.emoji)
+                      icon={
-                    ) : currentProjectDetails?.icon_prop ? (
+                        currentProjectDetails?.emoji ? (
-                      renderEmoji(currentProjectDetails.icon_prop)
+                          renderEmoji(currentProjectDetails.emoji)
-                    ) : (
+                        ) : currentProjectDetails?.icon_prop ? (
-                      <span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded bg-gray-700 uppercase text-white">
+                          renderEmoji(currentProjectDetails.icon_prop)
-                        {currentProjectDetails?.name.charAt(0)}
+                        ) : (
-                      </span>
+                          <span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded bg-gray-700 uppercase text-white">
-                    )
+                            {currentProjectDetails?.name.charAt(0)}
-                  }
+                          </span>
-                />
+                        )
+                      }
+                    />
+                  </span>
+                  <span className="md:hidden">
+                    <BreadcrumbLink
+                      href={`/${workspaceSlug}/projects/${currentProjectDetails?.id}/issues`}
+                      label={"..."}
+                    />
+                  </span>
+                </span>
               }
             />
+
             <Breadcrumbs.BreadcrumbItem
               type="text"
               link={

web/components/pages/create-update-page-modal.tsx

@@ -74,7 +74,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>

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>

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" />

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]} />

web/pages/[workspaceSlug]/projects/[projectId]/pages/index.tsx

@@ -102,6 +102,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">
@@ -120,8 +139,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 h-full flex-col md:space-y-5 overflow-hidden md:p-6">
-            <div className="flex justify-between gap-4">
+            <div className="justify-between gap-4 hidden md:flex">
               <h3 className="text-2xl font-semibold text-custom-text-100">Pages</h3>
             </div>
             <Tab.Group
@@ -146,7 +165,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