Commit 17fc8383 authored by Steven's avatar Steven

fix(web): improve MemoEditor layout and timestamp popover styling

parent 150371d2
...@@ -192,7 +192,7 @@ const Editor = forwardRef(function Editor(props: EditorProps, ref: React.Forward ...@@ -192,7 +192,7 @@ const Editor = forwardRef(function Editor(props: EditorProps, ref: React.Forward
> >
<textarea <textarea
className={cn( 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 // Focus mode: flex-1 h-0 to grow within flex container; Normal: h-full to fill wrapper
isFocusMode ? "flex-1 h-0" : "h-full", isFocusMode ? "flex-1 h-0" : "h-full",
)} )}
......
...@@ -67,7 +67,7 @@ export const TimestampPopover: FC = () => { ...@@ -67,7 +67,7 @@ export const TimestampPopover: FC = () => {
<PopoverTrigger asChild> <PopoverTrigger asChild>
<button <button
type="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)} {formatDate(createTime)}
</button> </button>
......
...@@ -133,7 +133,11 @@ const MemoEditorImpl: React.FC<MemoEditorProps> = ({ ...@@ -133,7 +133,11 @@ const MemoEditorImpl: React.FC<MemoEditorProps> = ({
{/* Exit button is absolutely positioned in top-right corner when active */} {/* Exit button is absolutely positioned in top-right corner when active */}
<FocusModeExitButton isActive={state.ui.isFocusMode} onToggle={handleToggleFocusMode} title={t("editor.exit-focus-mode")} /> <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 */} {/* Editor content grows to fill available space in focus mode */}
<EditorContent ref={editorRef} placeholder={placeholder} autoFocus={autoFocus} /> <EditorContent ref={editorRef} placeholder={placeholder} autoFocus={autoFocus} />
......
...@@ -35,7 +35,7 @@ ...@@ -35,7 +35,7 @@
"confirm": "Confirm", "confirm": "Confirm",
"copy": "Copy", "copy": "Copy",
"create": "Create", "create": "Create",
"created-at": "Created At", "created-at": "Created at",
"database": "Database", "database": "Database",
"day": "Day", "day": "Day",
"days": "Days", "days": "Days",
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment