feat: optimize editor collapse styles

src/app/dashboard/[subdomain]/editor/page.tsx

@@ -208,8 +208,7 @@ export default function SubdomainEditor() {
   const createOrUpdatePage = useCreateOrUpdatePage()
 
   const isMobileLayout = useIsMobileLayout()
-  const [isRendering, setIsRendering] = useState(false)
-  const [previewVisible, setPreviewVisible] = useState(true)
+  const [isRendering, setIsRendering] = useState(!isMobileLayout)
 
   const savePage = async (published: boolean) => {
     const check = await checkPageSlug({
@@ -559,7 +558,7 @@ export default function SubdomainEditor() {
                   : "min-w-[840px] h-screen "
               }`}
             >
-              <div className="flex-1 pt-5">
+              <div className="flex-1 pt-5 flex flex-col min-w-0">
                 <div className="px-5 h-12">
                   <input
                     type="text"
@@ -575,27 +574,39 @@ export default function SubdomainEditor() {
                     placeholder={t("Title goes here...") || ""}
                   />
                 </div>
-                <div className="mt-5 h-[calc(100%-4.25rem)] flex relative">
-                  <CodeMirrorEditor
-                    className={!previewVisible ? "!w-full !border-r-0" : ""}
-                    value={initialContent}
-                    onChange={onChange}
-                    handleDropFile={handleDropFile}
-                    onScroll={onEditorScroll}
-                    // onUpdate={onUpdate}
-                    onCreateEditor={onCreateEditor}
-                    onMouseEnter={() => {
-                      setCurrentScrollArea("editor")
-                    }}
-                  />
-                  {((!isMobileLayout && previewVisible) ||
-                    (isMobileLayout && !isRendering)) && (
+                <div className="mt-5 flex-1 min-h-0 flex relative items-center">
+                  {!(isMobileLayout && isRendering) && (
+                    <CodeMirrorEditor
+                      value={initialContent}
+                      onChange={onChange}
+                      handleDropFile={handleDropFile}
+                      onScroll={onEditorScroll}
+                      // onUpdate={onUpdate}
+                      onCreateEditor={onCreateEditor}
+                      onMouseEnter={() => {
+                        setCurrentScrollArea("editor")
+                      }}
+                      className={cn("flex-1", isRendering ? "border-r" : "")}
+                    />
+                  )}
+                  {!isMobileLayout && (
+                    <div className="z-10 w-[1px]">
+                      <div
+                        aria-label="Toggle preview view"
+                        className="bg-accent rounded-full cursor-pointer text-white w-6 h-6 -translate-x-1/2"
+                        onClick={() => setIsRendering(!isRendering)}
+                      >
+                        {isRendering ? (
+                          <i className="icon-[mingcute--right-line] text-2xl inline-block w-6 h-6" />
+                        ) : (
+                          <i className="icon-[mingcute--left-line] text-2xl inline-block w-6 h-6" />
+                        )}
+                      </div>
+                    </div>
+                  )}
+                  {isRendering && (
                     <PageContent
-                      className={cn(
-                        "absolute left-0 right-0 z-10 md:relative",
-                        `bg-white px-5 overflow-scroll pb-[200px]`,
-                        "md:block w-full md:w-1/2 h-full",
-                      )}
+                      className="bg-white px-5 overflow-scroll pb-[200px] h-full flex-1"
                       parsedContent={parsedContent}
                       inputRef={previewRef}
                       onScroll={onPreviewScroll}
@@ -604,27 +615,6 @@ export default function SubdomainEditor() {
                       }}
                     />
                   )}
-
-                  {!isMobileLayout && (
-                    <div
-                      className={cn(
-                        previewVisible ? "right-1/2 " : "right-0",
-                        "absolute top-1/2 z-20 translate-x-1/2",
-                      )}
-                    >
-                      <div
-                        aria-label="Toggle preview view"
-                        className="bg-accent rounded-full cursor-pointer text-white w-6 h-6"
-                        onClick={() => setPreviewVisible(!previewVisible)}
-                      >
-                        {previewVisible ? (
-                          <i className="icon-[mingcute--right-line] text-2xl inline-block w-6 h-6" />
-                        ) : (
-                          <i className="icon-[mingcute--left-line] text-2xl inline-block w-6 h-6" />
-                        )}
-                      </div>
-                    </div>
-                  )}
                 </div>
               </div>
               {!isMobileLayout && (

src/components/ui/CodeMirror.tsx

@@ -22,7 +22,6 @@ import {
 import { useIsDark } from "~/hooks/useDarkMode"
 import { useGetState } from "~/hooks/useGetState"
 import { useIsUnmounted } from "~/hooks/useLifecycle"
-import { useIsMobileLayout } from "~/hooks/useMobileLayout"
 import { cn } from "~/lib/utils"
 
 const LoadingHolder = () => {
@@ -67,7 +66,6 @@ const LazyCodeMirrorEditor = forwardRef<
   const editorElementRef = useRef<HTMLDivElement>(null)
   const isUnmounted = useIsUnmounted()
   const { t } = useTranslation("dashboard")
-  const isMobileLayout = useIsMobileLayout()
 
   const [cmEditor, setCmEditor] = useState<EditorView | null>(null)
   const isDark = useIsDark()
@@ -237,15 +235,7 @@ const LazyCodeMirrorEditor = forwardRef<
       <div
         ref={editorElementRef}
         onMouseEnter={onMouseEnter}
-        className={
-          loading
-            ? ""
-            : cn(
-                props.className,
-                "h-full",
-                isMobileLayout ? "w-full" : "border-r w-1/2 px-5",
-              )
-        }
+        className={loading ? "" : cn(props.className, "h-full")}
       />
       {loading && <LoadingHolder />}
     </>

src/hooks/useCodemirrorTheme.ts

@@ -7,7 +7,6 @@ import { EditorView } from "@codemirror/view"
 import { githubLight } from "@ddietr/codemirror-themes/theme/github-light"
 
 import { useIsUnmounted } from "./useLifecycle"
-import { useIsMobileLayout } from "./useMobileLayout"
 
 export const monospaceFonts = `"OperatorMonoSSmLig Nerd Font","Cascadia Code PL","FantasqueSansMono Nerd Font","operator mono","Fira code Retina","Fira code","Consolas", Monaco, "Hannotate SC", monospace, -apple-system`
 
@@ -40,7 +39,6 @@ export const useCodeMirrorAutoToggleTheme = (
 }
 
 export const useCodeMirrorStyle = (view: EditorView | null) => {
-  const isMobileLayout = useIsMobileLayout()
   const isUnmounted = useIsUnmounted()
   const once = useRef(false)
   const getStyle = () => {
@@ -50,7 +48,7 @@ export const useCodeMirrorStyle = (view: EditorView | null) => {
         fontSize: "1rem",
         overflow: "auto",
         height: "100%",
-        padding: isMobileLayout ? "0 1.25rem" : "unset",
+        padding: "0 1.25rem",
       },
       ".cm-content": {
         paddingBottom: "600px",
@@ -70,7 +68,7 @@ export const useCodeMirrorStyle = (view: EditorView | null) => {
     view.dispatch({
       effects: [extensionMap.style.reconfigure(EditorView.theme(getStyle()))],
     })
-  }, [view, isMobileLayout])
+  }, [view])
 
   if (isUnmounted()) return
   if (!once.current) {