diff --git a/apps/client/src/widgets/collections/board/card.tsx b/apps/client/src/widgets/collections/board/card.tsx index 8c325b72f..4ad335b4b 100644 --- a/apps/client/src/widgets/collections/board/card.tsx +++ b/apps/client/src/widgets/collections/board/card.tsx @@ -82,6 +82,7 @@ export default function Card({ setTitle(newTitle); }} dismiss={() => api.dismissEditingTitle()} + multiline /> )} diff --git a/apps/client/src/widgets/collections/board/index.css b/apps/client/src/widgets/collections/board/index.css index a70440286..acadb5b6d 100644 --- a/apps/client/src/widgets/collections/board/index.css +++ b/apps/client/src/widgets/collections/board/index.css @@ -175,9 +175,11 @@ border-color: var(--main-text-color); display: flex; align-items: center; + padding: 0; } -.board-view-container .board-note.editing input { +.board-view-container .board-note.editing input, +.board-view-container .board-note.editing textarea { background: transparent; border: none; outline: none; @@ -185,7 +187,13 @@ font-size: inherit; color: inherit; width: 100%; - padding: 0; + padding: 0.5em; +} + +.board-view-container .board-note.editing textarea { + height: auto; + field-sizing: content; + resize: none; } .board-view-container .board-note .icon { diff --git a/apps/client/src/widgets/collections/board/index.tsx b/apps/client/src/widgets/collections/board/index.tsx index 886719e00..23c866265 100644 --- a/apps/client/src/widgets/collections/board/index.tsx +++ b/apps/client/src/widgets/collections/board/index.tsx @@ -11,6 +11,7 @@ import { createContext } from "preact"; import { onWheelHorizontalScroll } from "../../widget_utils"; import Column from "./column"; import BoardApi from "./api"; +import FormTextArea from "../../react/FormTextArea"; export interface BoardViewData { columns?: BoardColumnData[]; @@ -256,22 +257,26 @@ function AddNewColumn({ viewConfig, saveConfig }: { viewConfig?: BoardViewData, ) } -export function TitleEditor({ currentValue, save, dismiss }: { +export function TitleEditor({ currentValue, save, dismiss, multiline }: { currentValue: string, save: (newValue: string) => void, - dismiss: () => void + dismiss: () => void, + multiline?: boolean }) { - const inputRef = useRef(null); + const inputRef = useRef(null); useEffect(() => { inputRef.current?.focus(); inputRef.current?.select(); }, [ inputRef ]); + const Element = multiline ? FormTextArea : FormTextBox; + return ( - { if (e.key === "Enter") { const newValue = e.currentTarget.value;