From 17fc8383dff5c8f41eaf2133a6dc7c3248a04fb4 Mon Sep 17 00:00:00 2001
From: Steven <stevenlgtm@gmail.com>
Date: Mon, 23 Feb 2026 10:20:00 +0800
Subject: [PATCH] fix(web): improve MemoEditor layout and timestamp popover
 styling

---
 web/src/components/MemoEditor/Editor/index.tsx              | 2 +-
 .../components/MemoEditor/components/TimestampPopover.tsx   | 2 +-
 web/src/components/MemoEditor/index.tsx                     | 6 +++++-
 web/src/locales/en.json                                     | 2 +-
 4 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/web/src/components/MemoEditor/Editor/index.tsx b/web/src/components/MemoEditor/Editor/index.tsx
index 0ef458f9e..d801d222c 100644
--- a/web/src/components/MemoEditor/Editor/index.tsx
+++ b/web/src/components/MemoEditor/Editor/index.tsx
@@ -192,7 +192,7 @@ const Editor = forwardRef(function Editor(props: EditorProps, ref: React.Forward
     >
       <textarea
         className={cn(
-          "w-full my-1 text-base resize-none overflow-x-hidden overflow-y-auto bg-transparent outline-none placeholder:opacity-70 whitespace-pre-wrap break-words",
+          "w-full text-base resize-none overflow-x-hidden overflow-y-auto bg-transparent outline-none placeholder:opacity-70 whitespace-pre-wrap wrap-break-word",
           // Focus mode: flex-1 h-0 to grow within flex container; Normal: h-full to fill wrapper
           isFocusMode ? "flex-1 h-0" : "h-full",
         )}
diff --git a/web/src/components/MemoEditor/components/TimestampPopover.tsx b/web/src/components/MemoEditor/components/TimestampPopover.tsx
index 63e00b3ea..f25989ebb 100644
--- a/web/src/components/MemoEditor/components/TimestampPopover.tsx
+++ b/web/src/components/MemoEditor/components/TimestampPopover.tsx
@@ -67,7 +67,7 @@ export const TimestampPopover: FC = () => {
       <PopoverTrigger asChild>
         <button
           type="button"
-          className="w-full text-sm text-muted-foreground -mb-1 text-left hover:text-foreground transition-colors cursor-pointer"
+          className="w-auto text-sm text-muted-foreground text-left hover:text-foreground transition-colors cursor-pointer"
         >
           {formatDate(createTime)}
         </button>
diff --git a/web/src/components/MemoEditor/index.tsx b/web/src/components/MemoEditor/index.tsx
index e15e37ad0..2074f90ac 100644
--- a/web/src/components/MemoEditor/index.tsx
+++ b/web/src/components/MemoEditor/index.tsx
@@ -133,7 +133,11 @@ const MemoEditorImpl: React.FC<MemoEditorProps> = ({
         {/* Exit button is absolutely positioned in top-right corner when active */}
         <FocusModeExitButton isActive={state.ui.isFocusMode} onToggle={handleToggleFocusMode} title={t("editor.exit-focus-mode")} />
 
-        {memoName && <TimestampPopover />}
+        {memoName && (
+          <div className="w-full -mb-1">
+            <TimestampPopover />
+          </div>
+        )}
 
         {/* Editor content grows to fill available space in focus mode */}
         <EditorContent ref={editorRef} placeholder={placeholder} autoFocus={autoFocus} />
diff --git a/web/src/locales/en.json b/web/src/locales/en.json
index 51fbffb55..6cfd68a01 100644
--- a/web/src/locales/en.json
+++ b/web/src/locales/en.json
@@ -35,7 +35,7 @@
     "confirm": "Confirm",
     "copy": "Copy",
     "create": "Create",
-    "created-at": "Created At",
+    "created-at": "Created at",
     "database": "Database",
     "day": "Day",
     "days": "Days",