pages responsiveness (#4287)

web/components/pages/editor/editor-body.tsx

@@ -104,12 +104,12 @@ export const PageEditorBody: React.FC<Props> = observer((props) => {
       </div>
       <div
         className={cn("h-full w-full pt-5", {
-          "md:w-[calc(100%-14rem)] lg:w-[calc(100%-18rem-18rem)]": !isFullWidth,
+          "md:w-[calc(100%-14rem)] xl:w-[calc(100%-18rem-18rem)]": !isFullWidth,
-          "w-[80%]": isFullWidth,
+          "md:w-[80%]": isFullWidth,
         })}
       >
         <div className="h-full w-full flex flex-col gap-y-7 overflow-y-auto overflow-x-hidden">
-          <div className="relative w-full flex-shrink-0 pl-5">
+          <div className="relative w-full flex-shrink-0 md:pl-5 px-4">
             <PageEditorTitle
               editorRef={editorRef}
               title={pageTitle}
@@ -134,7 +134,7 @@ export const PageEditorBody: React.FC<Props> = observer((props) => {
                   value={swrPageDetails?.description_html ?? "<p></p>"}
                   ref={editorRef}
                   containerClassName="p-0 pb-64"
-                  editorClassName="px-10"
+                  editorClassName="lg:px-10 pl-8"
                   onChange={(_description_json, description_html) => {
                     setIsSubmitting("submitting");
                     setShowAlert(true);
@@ -154,7 +154,7 @@ export const PageEditorBody: React.FC<Props> = observer((props) => {
               initialValue={pageDescription}
               handleEditorReady={handleReadOnlyEditorReady}
               containerClassName="p-0 pb-64 border-none"
-              editorClassName="px-10"
+              editorClassName="lg:px-10 pl-8"
               mentionHandler={{
                 highlights: mentionHighlights,
               }}
@@ -163,7 +163,7 @@ export const PageEditorBody: React.FC<Props> = observer((props) => {
         </div>
       </div>
       <div
-        className={cn("hidden lg:block h-full flex-shrink-0", {
+        className={cn("hidden xl:block flex-shrink-0", {
           "w-56 lg:w-72": !isFullWidth,
           "w-[10%]": isFullWidth,
         })}

web/components/pages/editor/header/index.ts

@@ -2,4 +2,5 @@ export * from "./extra-options";
 export * from "./info-popover";
 export * from "./options-dropdown";
 export * from "./root";
+export * from "./mobile-root";
 export * from "./toolbar";

web/components/pages/editor/header/mobile-root.tsx

@@ -0,0 +1,70 @@
+import { observer } from "mobx-react";
+import { EditorReadOnlyRefApi, EditorRefApi, IMarking } from "@plane/document-editor";
+// components
+import { PageExtraOptions, PageSummaryPopover, PageToolbar } from "@/components/pages";
+// store
+import { IPageStore } from "@/store/pages/page.store";
+
+type Props = {
+  editorRef: React.RefObject<EditorRefApi>;
+  readOnlyEditorRef: React.RefObject<EditorReadOnlyRefApi>;
+  handleDuplicatePage: () => void;
+  isSyncing: boolean;
+  markings: IMarking[];
+  pageStore: IPageStore;
+  projectId: string;
+  sidePeekVisible: boolean;
+  setSidePeekVisible: (sidePeekState: boolean) => void;
+  editorReady: boolean;
+  readOnlyEditorReady: boolean;
+};
+
+export const PageEditorMobileHeaderRoot: React.FC<Props> = observer((props) => {
+  const {
+    editorRef,
+    readOnlyEditorRef,
+    editorReady,
+    markings,
+    readOnlyEditorReady,
+    handleDuplicatePage,
+    isSyncing,
+    pageStore,
+    projectId,
+    sidePeekVisible,
+    setSidePeekVisible,
+  } = props;
+  // derived values
+  const { isContentEditable, view_props } = pageStore;
+  const isFullWidth = !!view_props?.full_width;
+
+  if (!editorRef.current && !readOnlyEditorRef.current) return null;
+
+  return (
+    <>
+      <div className="flex items-center border-b border-custom-border-200 px-2 py-1">
+        <div className="flex-shrink-0">
+          <PageSummaryPopover
+            editorRef={isContentEditable ? editorRef.current : readOnlyEditorRef.current}
+            isFullWidth={isFullWidth}
+            markings={markings}
+            sidePeekVisible={sidePeekVisible}
+            setSidePeekVisible={setSidePeekVisible}
+          />
+        </div>
+        <PageExtraOptions
+          editorRef={editorRef}
+          handleDuplicatePage={handleDuplicatePage}
+          isSyncing={isSyncing}
+          pageStore={pageStore}
+          projectId={projectId}
+          readOnlyEditorRef={readOnlyEditorRef}
+        />
+      </div>
+      <div className="border-b border-custom-border-200 py-1 px-2">
+        {(editorReady || readOnlyEditorReady) && isContentEditable && editorRef.current && (
+          <PageToolbar editorRef={editorRef?.current} />
+        )}
+      </div>
+    </>
+  );
+});

web/components/pages/editor/header/options-dropdown.tsx

@@ -148,7 +148,7 @@ export const PageOptionsDropdown: React.FC<Props> = observer((props) => {
   return (
     <CustomMenu maxHeight="md" placement="bottom-start" verticalEllipsis closeOnSelect>
       <CustomMenu.MenuItem
-        className="flex w-full items-center justify-between gap-2"
+        className="hidden md:flex w-full items-center justify-between gap-2"
         onClick={() =>
           updateViewProps({
             full_width: !view_props?.full_width,

web/components/pages/editor/header/root.tsx

@@ -1,7 +1,7 @@
 import { observer } from "mobx-react";
 import { EditorReadOnlyRefApi, EditorRefApi, IMarking } from "@plane/document-editor";
 // components
-import { PageExtraOptions, PageSummaryPopover, PageToolbar } from "@/components/pages";
+import { PageEditorMobileHeaderRoot, PageExtraOptions, PageSummaryPopover, PageToolbar } from "@/components/pages";
 // helpers
 import { cn } from "@/helpers/common.helper";
 // store
@@ -42,7 +42,8 @@ export const PageEditorHeaderRoot: React.FC<Props> = observer((props) => {
   if (!editorRef.current && !readOnlyEditorRef.current) return null;
 
   return (
-    <div className="flex items-center border-b border-custom-border-200 px-3 py-2 md:px-5">
+    <>
+      <div className="hidden md:flex items-center border-b border-custom-border-200 px-3 py-2 md:px-5">
         <div
           className={cn("flex-shrink-0", {
             "w-56 lg:w-72": !isFullWidth,
@@ -69,5 +70,21 @@ export const PageEditorHeaderRoot: React.FC<Props> = observer((props) => {
           readOnlyEditorRef={readOnlyEditorRef}
         />
       </div>
+      <div className="md:hidden">
+        <PageEditorMobileHeaderRoot
+          editorRef={editorRef}
+          readOnlyEditorRef={readOnlyEditorRef}
+          editorReady={editorReady}
+          readOnlyEditorReady={readOnlyEditorReady}
+          markings={markings}
+          handleDuplicatePage={handleDuplicatePage}
+          isSyncing={isSyncing}
+          pageStore={pageStore}
+          projectId={projectId}
+          sidePeekVisible={sidePeekVisible}
+          setSidePeekVisible={setSidePeekVisible}
+        />
+      </div>
+    </>
   );
 });

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

@@ -26,7 +26,7 @@ import { NextPageWithLayout } from "@/lib/types";
 
 const PageDetailsPage: NextPageWithLayout = observer(() => {
   // states
-  const [sidePeekVisible, setSidePeekVisible] = useState(true);
+  const [sidePeekVisible, setSidePeekVisible] = useState(window.innerWidth >= 768 ? true : false);
   const [editorReady, setEditorReady] = useState(false);
   const [readOnlyEditorReady, setReadOnlyEditorReady] = useState(false);
   // refs