fix: responsive fix

pages/project/@slug/components/editor.tsx

@@ -20,12 +20,14 @@ import { FaCompress, FaCompressArrowsAlt } from "react-icons/fa";
 import ConsoleLogger from "./console-logger";
 import { useData } from "~/renderer/hooks";
 import { Data } from "../+data";
+import { useBreakpoint } from "~/hooks/useBreakpoint";
 
 const Editor = () => {
   const { pinnedFiles } = useData<Data>();
   const trpcUtils = trpc.useUtils();
   const project = useProjectContext();
   const sidebarPanel = useRef<ImperativePanelHandle>(null);
+  const [breakpoint] = useBreakpoint();
 
   const [sidebarExpanded, setSidebarExpanded] = useState(false);
   const [curTabIdx, setCurTabIdx] = useState(0);
@@ -168,8 +170,7 @@ const Editor = () => {
         <ResizablePanelGroup autoSaveId="veditor-panel" direction="horizontal">
           <ResizablePanel
             ref={sidebarPanel}
-            panelId={0}
-            defaultSize={25}
+            defaultSize={{ sm: 0, md: 25 }}
             minSize={10}
             collapsible
             collapsedSize={0}
@@ -182,9 +183,9 @@ const Editor = () => {
 
           <ResizableHandle className="bg-slate-900" />
 
-          <ResizablePanel panelId={1} defaultSize={75}>
+          <ResizablePanel defaultSize={{ sm: 100, md: 75 }}>
             <ResizablePanelGroup autoSaveId="code-editor" direction="vertical">
-              <ResizablePanel panelId={0} defaultSize={80} minSize={20}>
+              <ResizablePanel defaultSize={{ sm: 100, md: 80 }} minSize={20}>
                 <Tabs
                   tabs={openFileList}
                   current={curTabIdx}
@@ -193,16 +194,20 @@ const Editor = () => {
                 />
               </ResizablePanel>
 
-              <ResizableHandle />
-              <ResizablePanel
-                panelId={1}
-                defaultSize={20}
-                collapsible
-                collapsedSize={0}
-                minSize={10}
-              >
-                <ConsoleLogger />
-              </ResizablePanel>
+              {breakpoint >= 2 ? (
+                <>
+                  <ResizableHandle />
+
+                  <ResizablePanel
+                    defaultSize={{ sm: 0, md: 20 }}
+                    collapsible
+                    collapsedSize={0}
+                    minSize={10}
+                  >
+                    <ConsoleLogger />
+                  </ResizablePanel>
+                </>
+              ) : null}
             </ResizablePanelGroup>
           </ResizablePanel>
         </ResizablePanelGroup>

pages/project/@slug/components/file-viewer.tsx

@@ -1,12 +1,10 @@
 "use client";
 
 import { getFileExt } from "~/lib/utils";
-import React from "react";
 import CodeEditor from "../../../../components/ui/code-editor";
 import trpc from "~/lib/trpc";
 import { useData } from "~/renderer/hooks";
 import { Data } from "../+data";
-import ClientOnly from "~/renderer/client-only";
 import Spinner from "~/components/ui/spinner";
 
 type Props = {
@@ -42,14 +40,12 @@ const FileViewer = ({ id, onFileContentChange }: Props) => {
     const ext = getFileExt(filename);
 
     return (
-      <ClientOnly fallback={<SSRCodeEditor value={data?.content} />}>
-        <CodeEditor
-          lang={ext}
-          value={data?.content || ""}
-          formatOnSave
-          onChange={(val) => updateFileContent.mutate({ id, content: val })}
-        />
-      </ClientOnly>
+      <CodeEditor
+        lang={ext}
+        value={data?.content || ""}
+        formatOnSave
+        onChange={(val) => updateFileContent.mutate({ id, content: val })}
+      />
     );
   }
 
@@ -64,14 +60,4 @@ const LoadingLayout = () => {
   );
 };
 
-const SSRCodeEditor = ({ value }: { value?: string | null }) => {
-  return (
-    <textarea
-      className="w-full h-full py-3 pl-11 pr-2 overflow-x-auto text-nowrap font-mono text-sm md:text-[16px] md:leading-[22px] bg-[#1a1b26] text-[#787c99]"
-      value={value || ""}
-      readOnly
-    />
-  );
-};
-
 export default FileViewer;