style: editor layout

packages/editor/src/core/components/editors/document/page-renderer.tsx

@@ -131,7 +131,7 @@ export const PageRenderer = (props: IPageRenderer) => {
 
   return (
     <>
-      <div className="frame-renderer flex-grow w-full -mx-5" onMouseOver={handleLinkHover}>
+      <div className="frame-renderer flex-grow w-full" onMouseOver={handleLinkHover}>
         <EditorContainer
           displayConfig={displayConfig}
           editor={editor}

packages/editor/src/core/components/editors/editor-container.tsx

@@ -74,6 +74,7 @@ export const EditorContainer: FC<EditorContainerProps> = (props) => {
         "editor-container cursor-text relative",
         {
           "active-editor": editor?.isFocused && editor?.isEditable,
+          "wide-layout": displayConfig.wideLayout,
         },
         displayConfig.fontSize ?? DEFAULT_DISPLAY_CONFIG.fontSize,
         displayConfig.fontStyle ?? DEFAULT_DISPLAY_CONFIG.fontStyle,

packages/editor/src/core/constants/config.ts

@@ -4,6 +4,7 @@ import { TDisplayConfig } from "@/types";
 export const DEFAULT_DISPLAY_CONFIG: TDisplayConfig = {
   fontSize: "large-font",
   fontStyle: "sans-serif",
+  wideLayout: false,
 };
 
 export const ACCEPTED_FILE_MIME_TYPES = ["image/jpeg", "image/jpg", "image/png", "image/webp", "image/gif"];

packages/editor/src/core/props/props.tsx

@@ -12,7 +12,7 @@ export const CoreEditorProps = (props: TCoreEditorProps): EditorProps => {
   return {
     attributes: {
       class: cn(
-        "prose prose-brand max-w-full prose-headings:font-display font-default focus:outline-none",
+        "prose prose-brand max-w-full prose-headings:font-display font-default focus:outline-none transition-all duration-300",
         editorClassName
       ),
     },

packages/editor/src/core/props/read-only.tsx

@@ -10,7 +10,7 @@ export const CoreReadOnlyEditorProps = (props: TCoreEditorProps): EditorProps =>
   return {
     attributes: {
       class: cn(
-        "prose prose-brand max-w-full prose-headings:font-display font-default focus:outline-none",
+        "prose prose-brand max-w-full prose-headings:font-display font-default focus:outline-none transition-all duration-300",
         editorClassName
       ),
     },

packages/editor/src/core/types/config.ts

@@ -22,4 +22,5 @@ export type TEditorFontSize = "small-font" | "large-font";
 export type TDisplayConfig = {
   fontStyle?: TEditorFontStyle;
   fontSize?: TEditorFontSize;
+  wideLayout?: boolean;
 };

packages/editor/src/styles/editor.css

@@ -8,7 +8,7 @@
   -moz-user-select: text;
   -ms-user-select: text;
   user-select: text;
-  outline: none;
+  outline: none !important;
   cursor: text;
   font-family: var(--font-style);
   font-size: var(--font-size-regular);

packages/editor/src/styles/variables.css

@@ -12,8 +12,7 @@
 }
 
 /* text background colors */
-[data-theme="light"],
-[data-theme="light-contrast"] {
+[data-theme*="light"] {
   --editor-colors-gray-background: #d6d6d8;
   --editor-colors-peach-background: #ffd5d7;
   --editor-colors-pink-background: #fdd4e3;
@@ -23,8 +22,7 @@
   --editor-colors-dark-blue-background: #c9dafb;
   --editor-colors-purple-background: #e3d8fd;
 }
-[data-theme="dark"],
-[data-theme="dark-contrast"] {
+[data-theme*="dark"] {
   --editor-colors-gray-background: #404144;
   --editor-colors-peach-background: #593032;
   --editor-colors-pink-background: #562e3d;
@@ -36,6 +34,7 @@
 }
 /* end text background colors */
 
+/* font size and style */
 .editor-container {
   /* font sizes and line heights */
   &.large-font {
@@ -83,6 +82,8 @@
   /* end font sizes and line heights */
 
   /* font styles */
+  --font-style: "Inter", sans-serif;
+
   &.sans-serif {
     --font-style: "Inter", sans-serif;
   }
@@ -94,3 +95,50 @@
   }
   /* end font styles */
 }
+/* end font size and style */
+
+/* layout config */
+#page-content-container {
+  container-name: page-content-container;
+  container-type: inline-size;
+}
+
+.editor-container {
+  --editor-content-width: 720px;
+  --editor-margin-width: 96px;
+
+  &.wide-layout {
+    --editor-content-width: 1152px;
+  }
+
+  .ProseMirror {
+    padding-left: calc((100% - var(--editor-content-width)) / 2);
+    padding-right: calc((100% - var(--editor-content-width)) / 2);
+    /* transition: 0.3s all linear; */
+  }
+}
+
+/* keep a static padding of 20px for normal layouts for container width <760px */
+@container page-content-container (max-width: 760px) {
+  .editor-container:not(.wide-layout),
+  .page-title-container {
+    padding: 0 20px;
+  }
+}
+
+/* keep a static padding of 96px for wide layouts for container width >912px and <1344px */
+@container page-content-container (min-width: 912px) and (max-width: 1344px) {
+  .editor-container.wide-layout,
+  .page-title-container {
+    padding: 0 96px;
+  }
+}
+
+/* keep a static padding of 20px for wide layouts for container width <912px */
+@container page-content-container (max-width: 912px) {
+  .editor-container.wide-layout,
+  .page-title-container {
+    padding: 0 20px;
+  }
+}
+/* end layout config */

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

@@ -13,7 +13,7 @@ import {
 // plane types
 import { TSearchEntityRequestPayload, TSearchResponse, TWebhookConnectionQueryParams } from "@plane/types";
 // plane ui
-import { Row } from "@plane/ui";
+import { ERowVariant, Row } from "@plane/ui";
 // components
 import { EditorMentionsRoot } from "@/components/editor";
 import { PageContentBrowser, PageContentLoader, PageEditorTitle } from "@/components/pages";
@@ -86,8 +86,9 @@ export const PageEditorBody: React.FC<Props> = observer((props) => {
     () => ({
       fontSize,
       fontStyle,
+      wideLayout: isFullWidth,
     }),
-    [fontSize, fontStyle]
+    [fontSize, fontStyle, isFullWidth]
   );
 
   const getAIMenu = useCallback(
@@ -149,23 +150,23 @@ export const PageEditorBody: React.FC<Props> = observer((props) => {
   if (pageId === undefined || !realtimeConfig) return <PageContentLoader />;
 
   return (
-    <div className="flex items-center h-full w-full overflow-y-auto">
-      <Row
+    <>
+      {/* <div
         className={cn("sticky top-0 hidden h-full flex-shrink-0 -translate-x-full py-5 duration-200 md:block", {
           "translate-x-0": sidePeekVisible,
           "w-[10rem] lg:w-[14rem]": !isFullWidth,
           "w-[5%]": isFullWidth,
         })}
       >
-        {!isFullWidth && <PageContentBrowser editorRef={editorRef.current} />}
-      </Row>
-      <div
-        className={cn("size-full pt-5 duration-200", {
-          "md:w-[calc(100%-10rem)] xl:w-[calc(100%-28rem)]": !isFullWidth,
-          "md:w-[90%]": isFullWidth,
-        })}
+        {!isFullWidth && (
+          <PageContentBrowser editorRef={(isContentEditable ? editorRef : readOnlyEditorRef)?.current} />
+        )}
+      </div> */}
+      <Row
+        className="relative size-full flex flex-col gap-y-7 pt-[64px] overflow-y-auto overflow-x-hidden vertical-scrollbar scrollbar-md duration-200"
+        variant={ERowVariant.HUGGING}
       >
-        <div className="size-full flex flex-col gap-y-7 overflow-y-auto overflow-x-hidden">
+        <div id="page-content-container" className="relative w-full flex-shrink-0 space-y-7">
           <PageEditorTitle
             editorRef={editorRef}
             title={pageTitle}
@@ -180,7 +181,6 @@ export const PageEditorBody: React.FC<Props> = observer((props) => {
             ref={editorRef}
             containerClassName="h-full p-0 pb-64"
             displayConfig={displayConfig}
-            editorClassName="pl-10"
             mentionHandler={{
               searchCallback: async (query) => {
                 const res = await fetchMentions(query);
@@ -201,13 +201,7 @@ export const PageEditorBody: React.FC<Props> = observer((props) => {
             }}
           />
         </div>
-      </div>
-      <div
-        className={cn("hidden xl:block flex-shrink-0 duration-200", {
-          "w-[10rem] lg:w-[14rem]": !isFullWidth,
-          "w-[5%]": isFullWidth,
-        })}
-      />
-    </div>
+      </Row>
+    </>
   );
 });

web/core/components/pages/editor/title.tsx

@@ -24,15 +24,19 @@ export const PageEditorTitle: React.FC<Props> = observer((props) => {
   // states
   const [isLengthVisible, setIsLengthVisible] = useState(false);
   // page filters
-  const { fontSize } = usePageFilters();
+  const { fontSize, isFullWidth } = usePageFilters();
   // ui
-  const titleClassName = cn("bg-transparent tracking-[-2%] font-bold", {
-    "text-[1.6rem] leading-[1.9rem]": fontSize === "small-font",
-    "text-[2rem] leading-[2.375rem]": fontSize === "large-font",
-  });
+  const titleClassName = cn(
+    "bg-transparent tracking-[-2%] font-bold block max-w-[720px] mx-auto transition-all duration-300",
+    {
+      "text-[1.6rem] leading-[1.9rem]": fontSize === "small-font",
+      "text-[2rem] leading-[2.375rem]": fontSize === "large-font",
+      "max-w-[1152px]": isFullWidth,
+    }
+  );
 
   return (
-    <div className="relative w-full flex-shrink-0 md:pl-5 px-4">
+    <div className="relative w-full flex-shrink-0 page-title-container">
       {readOnly ? (
         <h6
           className={cn(