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

Merged

robbertbos merged 1 commit from roomier-new-message-editor into main 2026-08-07 13:09:06 +00:00

Conversation 0 Commits 1 Files changed 6 +35 -8

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

Owner

Copy link

The new-message window opened one line high and grew from there, which reads as
a reply box rather than a message window. Notes had made the opposite choice
since it was written, so the app was inconsistent about it.

On #210

Both of its premises are stale. It blames a min-height on Field.vue's box and
proposes flexing the editor to fill it. The override was already dropped before
the composer merged, and Field.vue itself went in 53f08cf when MessageEditor
took over the frame - and the empty band under the toolbar went with it. Its
"Caution" about the shared component is likewise settled: both composers now
share one frame, so a change there is symmetric by construction.

What was left is the wish underneath: a compose window that opens with room to
type. That is what this does.

The rule

The height belongs on the typing surface, not on the box. Nothing inside the box
grows, so slack put there lands below the toolbar - which is exactly what #210
reported.

• MessageEditor takes a minHeight prop that reaches .ProseMirror through a
  custom property, defaulting to the 3rem the reply composer already had. The
  prop passes intent, not CSS, so the frame stays owned by the component
  (the point of 53f08cf).
• Notes had already picked 120px, so that number moves to
  --composer-workspace-min-height in base.css and both consumers read it.
• Notes also carried min-height: 140px on its wrapper, which never bound. It is
  gone.

Measured on the built bundle

	typing surface	box	below the toolbar
New message	120px (was ~50)	183px	5px, the box's own padding
Reply in thread	48px	121px	5px
Notes	120px	183px	5px

The three checks #210 asks for: no empty band under the toolbar; a click in the
lower band focuses the editor (document.activeElement is the "Bericht" textbox,
and elementFromPoint 8px above the bottom edge is the editor itself); the reply
composer is unchanged, since 3rem was already its literal value. New message
and notes now measure identically rather than approximately.

The unit test guards the wiring only - happy-dom does no layout, so it asserts
the prop reaches the box as a custom property, and says so in a comment. The
numbers above are the real check.

Not in this PR

Notes does not share MessageEditor; it builds its own Tiptap editor and frame,
reusing only FormatToolbar, LinkBar, EmojiPicker and .composer-footer.
Migrating it needs toolbar flags on MessageEditor (showInsert, showAttach,
showUnderline, showHighlight) and a mode without a send button. Worth doing;
it would make the shared custom property redundant.

Closes #210

The new-message window opened one line high and grew from there, which reads as a reply box rather than a message window. Notes had made the opposite choice since it was written, so the app was inconsistent about it. ## On #210 Both of its premises are stale. It blames a `min-height` on `Field.vue`'s box and proposes flexing the editor to fill it. The override was already dropped before the composer merged, and `Field.vue` itself went in 53f08cf when `MessageEditor` took over the frame - and the empty band under the toolbar went with it. Its "Caution" about the shared component is likewise settled: both composers now share one frame, so a change there is symmetric by construction. What was left is the wish underneath: a compose window that opens with room to type. That is what this does. ## The rule The height belongs on the typing surface, not on the box. Nothing inside the box grows, so slack put there lands below the toolbar - which is exactly what #210 reported. - `MessageEditor` takes a `minHeight` prop that reaches `.ProseMirror` through a custom property, defaulting to the `3rem` the reply composer already had. The prop passes intent, not CSS, so the frame stays owned by the component (the point of 53f08cf). - Notes had already picked 120px, so that number moves to `--composer-workspace-min-height` in `base.css` and both consumers read it. - Notes also carried `min-height: 140px` on its wrapper, which never bound. It is gone. ## Measured on the built bundle | | typing surface | box | below the toolbar | |---|---|---|---| | New message | **120px** (was ~50) | 183px | 5px, the box's own padding | | Reply in thread | 48px | 121px | 5px | | Notes | 120px | 183px | 5px | The three checks #210 asks for: no empty band under the toolbar; a click in the lower band focuses the editor (`document.activeElement` is the "Bericht" textbox, and `elementFromPoint` 8px above the bottom edge is the editor itself); the reply composer is unchanged, since `3rem` was already its literal value. New message and notes now measure identically rather than approximately. The unit test guards the wiring only - happy-dom does no layout, so it asserts the prop reaches the box as a custom property, and says so in a comment. The numbers above are the real check. ## Not in this PR Notes does not share `MessageEditor`; it builds its own Tiptap editor and frame, reusing only `FormatToolbar`, `LinkBar`, `EmojiPicker` and `.composer-footer`. Migrating it needs toolbar flags on `MessageEditor` (`showInsert`, `showAttach`, `showUnderline`, `showHighlight`) and a mode without a send button. Worth doing; it would make the shared custom property redundant. Closes #210

robbertbos added 1 commit 2026-08-07 12:52:41 +00:00

Give the new-message composer a roomy typing surface ... 2b8e762e1a

The compose window opened one line high and grew from there, which reads as a
reply box rather than a message window. Notes has made the opposite choice since
it was written, so the app was inconsistent about it.

Issue #210 blamed a min-height on Field.vue's box, and proposed flexing the
editor to fill it. Both are stale: the override was already dropped before the
composer merged, and Field.vue itself went when MessageEditor took over the
frame, taking the empty band under the toolbar with it.

The height belongs on the typing surface, not on the box. Nothing inside the box
grows, so slack there lands below the toolbar - which is what #210 reported.
MessageEditor now takes a minHeight prop that reaches .ProseMirror through a
custom property, defaulting to the 3rem the reply composer already had.

Notes had already picked 120px, so that number moves to
--composer-workspace-min-height in base.css and both consumers read it. Notes
also carried min-height: 140px on its wrapper, which never bound - the box
measures 183px - so it is gone.

Measured on the built bundle: compose typing surface 120px, only the box's own
padding under the toolbar, and a click in the lower band focuses the editor;
reply unchanged at 48px; notes unchanged at 120px.

Closes #210

robbertbos merged commit fc29b234d8 into main 2026-08-07 13:09:06 +00:00

robbertbos deleted branch roomier-new-message-editor 2026-08-07 13:09:06 +00:00

Sign in to join this conversation.

Reviewers

No reviewers

Labels

Clear labels   

bug

Something is not working

  

duplicate

This issue or pull request already exists

  

enhancement

New feature

  

help wanted

Need some help

  

invalid

Something is wrong

  

nldd ds

  

question

More information is needed

  

wontfix

This won't be fixed

No labels

bug

duplicate

enhancement

help wanted

invalid

nldd ds

question

wontfix

Milestone

Clear milestone

No items

No milestone

Projects

Clear projects

No items

No project

Assignees

Clear assignees

No assignees

1 participant

Notifications

Subscribe

Due date

The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference

robbertbos/waggle!251

No description provided.