From 6dce41a070655909c9099e55df52158ea3d25e03 Mon Sep 17 00:00:00 2001
From: Abdullah Atta <abdullahatta@streetwriters.co>
Date: Thu, 1 Jan 2026 11:19:23 +0500
Subject: [PATCH] web: fix editor & note title resizing when window resizes
 Signed-off-by: 01zulfi <85733202+01zulfi@users.noreply.github.com>

---
 apps/web/src/components/editor/index.tsx     | 21 ++++++++++++--------
 apps/web/src/components/editor/title-box.tsx |  2 +-
 2 files changed, 14 insertions(+), 9 deletions(-)

diff --git a/apps/web/src/components/editor/index.tsx b/apps/web/src/components/editor/index.tsx
index cb960e5b3..c4123738b 100644
--- a/apps/web/src/components/editor/index.tsx
+++ b/apps/web/src/components/editor/index.tsx
@@ -56,7 +56,7 @@ import { useEditorManager } from "./manager";
 import { saveAttachment, downloadAttachment } from "../../common/attachments";
 import { EV, EVENTS } from "@notesnook/core";
 import { db } from "../../common/db";
-import Titlebox from "./title-box";
+import Titlebox, { resizeTextarea } from "./title-box";
 import Config from "../../utils/config";
 import { ScopedThemeProvider } from "../theme-provider";
 import { Lightbox } from "../lightbox";
@@ -77,7 +77,6 @@ import { onPageVisibilityChanged } from "../../utils/page-visibility";
 import { Pane, SplitPane } from "../split-pane";
 import { TITLE_BAR_HEIGHT } from "../title-bar";
 import { isMobile } from "../../hooks/use-mobile";
-import { isTablet } from "../../hooks/use-tablet";
 import { ConfirmDialog } from "../../dialogs/confirm";
 
 const PDFPreview = React.lazy(() => import("../pdf-preview"));
@@ -711,19 +710,25 @@ function EditorChrome(props: PropsWithChildren<EditorProps>) {
       const child = editorContainerRef.current?.getBoundingClientRect();
       if (!parent || !child || !editor || entries.length <= 0) return;
 
-      const CONTAINER_MARGIN = isMobile() || isTablet() ? 10 : 30;
+      const CONTAINER_MARGIN = isMobile() ? 10 : 30;
       const negativeSpace = Math.abs(
         parent.left - child.left - CONTAINER_MARGIN
       );
 
       requestAnimationFrame(() => {
-        if (!isMobile() && !isTablet()) {
+        if (!isMobile()) {
           editor.style.marginLeft = `-${negativeSpace}px`;
           editor.style.marginRight = `-${negativeSpace}px`;
+
+          editor.style.paddingLeft = `${negativeSpace}px`;
+          editor.style.paddingRight = `${negativeSpace}px`;
         }
-        editor.style.paddingLeft = `${negativeSpace}px`;
-        editor.style.paddingRight = `${negativeSpace}px`;
       });
+
+      const editorTitle = document.querySelector("#editor-title");
+      if (editorTitle instanceof HTMLTextAreaElement) {
+        resizeTextarea(editorTitle);
+      }
     }
     const observer = new ResizeObserver(debounce(onResize, 500));
     observer.observe(editorScrollRef.current);
@@ -761,8 +766,8 @@ function EditorChrome(props: PropsWithChildren<EditorProps>) {
             maxWidth: editorMargins ? "min(100%, 850px)" : "auto",
             width: "100%"
           }}
-          pl={[2, 2, 6]}
-          pr={[2, 2, 6]}
+          pl={[2, 6]}
+          pr={[2, 6]}
           onClick={onRequestFocus}
         >
           {children}
diff --git a/apps/web/src/components/editor/title-box.tsx b/apps/web/src/components/editor/title-box.tsx
index c4b8793f5..8420fbb3e 100644
--- a/apps/web/src/components/editor/title-box.tsx
+++ b/apps/web/src/components/editor/title-box.tsx
@@ -155,7 +155,7 @@ export default React.memo(TitleBox, (prevProps, nextProps) => {
   return prevProps.readonly === nextProps.readonly;
 });
 
-function resizeTextarea(input: HTMLTextAreaElement) {
+export function resizeTextarea(input: HTMLTextAreaElement) {
   input.style.height = "auto";
   requestAnimationFrame(() => {
     input.style.height = input.scrollHeight + "px";