eleven / messenger Public

web: make the in-feed typing row behave like a message row (#180)

The .typing row lives in the flex-column feed but wasn't styled like an
incoming .msg, so it broke two ways:

- Group "X is typing…" line: with overflow:hidden a flex item's automatic
  min-height is 0, so once the feed overflows the row was shrunk to 0px —
  present in the DOM but invisible (you never saw it). Add flex-shrink:0.
- DM typing bubble: without position:relative its overflow:visible (the
  dots bobbing out of the box) propagated up to #app-pane, giving the whole
  app a second scrollbar you could scroll off-screen. Add position:relative
  so the row is its own containing block, exactly like .msg.

Verified end-to-end (Playwright against a real build): the group line
renders at 15px, and the DM bubble shows with zero whole-app overflow and
un-clipped dots.

Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Paul Campbell 4 months ago ecd2b5b1aa5df46db1f01a3fcae360eddcdd5c78 parent 11f3441

2 files changed, +10 −0

changelog/2026-07-04-fix-typing-indicator-layout.md +1 −0
web/static/style.css +9 −0

diff --git a/changelog/2026-07-04-fix-typing-indicator-layout.md b/changelog/2026-07-04-fix-typing-indicator-layout.md

new file mode 100644

index 0000000..c91227b

--- /dev/null

+++ b/changelog/2026-07-04-fix-typing-indicator-layout.md

@@ -0,0 +1 @@

+Fixed two typing-indicator glitches: in group chats the "X is typing…" line now actually shows (it was there but collapsed to zero height, so you never saw it), and in one-to-one chats the typing bubble no longer gives the whole app a second scrollbar that let the screen scroll out of view.

diff --git a/web/static/style.css b/web/static/style.css

index f714c93..7f4371c 100644

--- a/web/static/style.css

+++ b/web/static/style.css

@@ -923,6 +923,15 @@ input:focus, textarea:focus { outline: 2px solid var(--accent); border-color: tr

overflow: hidden;

text-overflow: ellipsis;

white-space: nowrap;

+ /* Make the row behave like an incoming .msg — the feed is a flex column, so a

+ bare row misbehaves two ways. flex-shrink:0: with overflow:hidden a flex

+ item's auto min-height is 0, so the feed (once it overflows) shrinks this

+ row to nothing — the group "X is typing…" line was present but 0px tall.

+ position:relative: like .msg, it makes the row its own containing block so

+ the bubble's overflow:visible (the dots bobbing out of the box) can't

+ propagate up and give the whole app a second scrollbar. */

+ flex-shrink: 0;

+ position: relative;

}

/* DM variant: an iMessage-style incoming bubble with pulsing dots — the typer

can only be the one other person, so no name (groups keep the line above). */