fix(web): improve MemoEditor layout and timestamp popover styling
This commit is contained in:
parent
150371d211
commit
17fc8383df
4 changed files with 8 additions and 4 deletions
|
|
@ -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",
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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} />
|
||||
|
|
|
|||
|
|
@ -35,7 +35,7 @@
|
|||
"confirm": "Confirm",
|
||||
"copy": "Copy",
|
||||
"create": "Create",
|
||||
"created-at": "Created At",
|
||||
"created-at": "Created at",
|
||||
"database": "Database",
|
||||
"day": "Day",
|
||||
"days": "Days",
|
||||
|
|
|
|||
Loading…
Reference in a new issue