Compose "Bericht" field: editor does not fill the field height (empty space under the toolbar) #210

New issue

Closed

opened 2026-07-27 04:32:27 +00:00 by robbertbos · 0 comments

robbertbos commented

2026-07-27 04:32:27 +00:00

Owner

In the new-message composer the "Bericht" field has a min-height (--field-min-height: 9rem on Field.vue's .box), but the shared MessageEditor does not grow to fill it. .box is not a flex column, so the slack lands below the format/send toolbar as dead space instead of enlarging the typing area with the toolbar pinned to the bottom.

Reported during composer review: "bij nieuw bericht staat er spacing onder de opmaak & verzend buttons".

Approach

Make Field.vue's .box a flex column and let the slotted editor grow.
In the shared MessageEditor.vue, let the typing surface (.editor / .ProseMirror) take flex: 1 so the toolbar sits at the bottom and the empty band becomes clickable typing area.

Caution

MessageEditor is shared by the new-message composer AND ReplyComposer. The reply composer's editor sizes to content (min-height ~= natural height), so a flex: 1 surface should be a no-op there - but this must be verified in BOTH composers before merging. That shared-component risk is why it was deferred rather than patched blind.

Verify

New-message composer: no empty band under the toolbar; clicking the empty area focuses the editor.
Reply composer: unchanged height and behaviour.

Relates to #195.

In the new-message composer the "Bericht" field has a min-height (`--field-min-height: 9rem` on `Field.vue`'s `.box`), but the shared `MessageEditor` does not grow to fill it. `.box` is not a flex column, so the slack lands *below* the format/send toolbar as dead space instead of enlarging the typing area with the toolbar pinned to the bottom. Reported during composer review: "bij nieuw bericht staat er spacing onder de opmaak & verzend buttons". ## Approach - Make `Field.vue`'s `.box` a flex column and let the slotted editor grow. - In the shared `MessageEditor.vue`, let the typing surface (`.editor` / `.ProseMirror`) take `flex: 1` so the toolbar sits at the bottom and the empty band becomes clickable typing area. ## Caution `MessageEditor` is shared by the new-message composer AND `ReplyComposer`. The reply composer's editor sizes to content (min-height ~= natural height), so a `flex: 1` surface should be a no-op there - but this must be verified in BOTH composers before merging. That shared-component risk is why it was deferred rather than patched blind. ## Verify - New-message composer: no empty band under the toolbar; clicking the empty area focuses the editor. - Reply composer: unchanged height and behaviour. Relates to #195.

robbertbos added the

bug

label

2026-07-27 04:32:27 +00:00

robbertbos referenced this issue from a commit

2026-08-07 12:51:22 +00:00

Give the new-message composer a roomy typing surface

robbertbos referenced this issue from a pull request that will close it,

2026-08-07 12:52:41 +00:00

A roomy typing surface for the new-message composer #251

robbertbos closed this issue

2026-08-07 13:09:06 +00:00