feat(scratchnode): mobile composer pinned to bottom (Slack/Discord)#441
Conversation
…iscord)
On phones the composer sat at the top (a sticky "command bar") - the search-box
model, not the chat model the room actually is. Every messaging app (Slack,
Discord, iMessage, WhatsApp) pins the input to the BOTTOM: thumb reach, and the
newest message sits right where you type.
Why CSS alone couldn't fix it: the composer's position was an INLINE style on
the element (style="position:sticky;top:64px"), which beats any media-query
rule. Moved position into the stylesheet (the .c rule already declared the
identical sticky-top, so desktop is byte-for-byte unchanged), then added a
<=540px override.
- <=540px: .c becomes position:fixed; bottom:0; full-width, with a top border +
lift shadow; .m bottom padding raised to 112px so the last message scrolls
clear of the fixed bar.
- Desktop (>540px): unchanged - sticky top:64px command bar.
Verified (Claude Preview, true 375px): composer position:fixed bottom:0 flush to
the viewport bottom; feed scrolls fully clear (last item bottom 628 < composer
top 684, 56px gap); desktop still sticky top:64px (mq540 false). This also
revived the dead `.c { top: 60px }` mobile rule the inline style had been
silently overriding. Presentation-only, public/proto/home-v5.html.
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
🤖 Augment PR SummarySummary: Updates the ScratchNode 🤖 Was this summary useful? React with 👍 or 👎 |
![augmentcode[bot]](https://avatars.githubusercontent.com/in/1027498?s=60&v=4){kind=small}
| /* Mobile: pin the composer to the bottom (Slack/Discord/iMessage convention — thumb reach, | ||
| newest message sits right above where you type). Desktop keeps the sticky top command bar. */ | ||
| .c { | ||
| position: fixed; top: auto; bottom: 0; left: 0; right: 0; z-index: 45; |
There was a problem hiding this comment.
@media (max-width: 540px) sets .c to position: fixed + bottom: 0, but the later landscape media query (@media (max-height: 480px) and (orientation: landscape)) still sets .c { top: 56px; }—on small landscape screens this can combine into top+bottom and cause the composer to stretch and cover most of the viewport.
Severity: high
🤖 Was this useful? React with 👍 or 👎, or 🚀 if it prevented an incident/outage.
| @media (max-width: 540px) { | ||
| .h { padding: calc(10px + var(--safe-top)) calc(14px + var(--safe-right)) 10px calc(14px + var(--safe-left)); } | ||
| .m { padding: 16px calc(14px + var(--safe-right)) calc(80px + var(--safe-bot)) calc(14px + var(--safe-left)); } | ||
| .m { padding: 16px calc(14px + var(--safe-right)) calc(112px + var(--safe-bot)) calc(14px + var(--safe-left)); } |
There was a problem hiding this comment.
With the composer now fixed to the bottom, the .m bottom padding being a fixed 112px may still be too small when conditional rows like the reply context bar / private notes inline block are visible, which could re-introduce “last message hidden behind composer” in those states.
Severity: medium
🤖 Was this useful? React with 👍 or 👎, or 🚀 if it prevented an incident/outage.
|
Demo: walkthrough of the surfaces this PR changed is available as a workflow artifact ( |
2 participants
Summary
Answers the right question: on phones the composer sat at the top (a sticky "command bar") — the search-box model, not the chat model the room actually is. Every messaging app (Slack, Discord, iMessage, WhatsApp) pins the input to the bottom — thumb reach, and the newest message sits right where you type. This moves the mobile composer to the bottom. Desktop is unchanged (keeps the sticky top command bar).
Why it needed more than a media query
The composer's position was an inline style on the element (
style="position:sticky;top:64px;z-index:40"), which beats any stylesheet/media-query rule — so a mobile override was being silently ignored. The fix:.c {}rule already declared the identicalsticky; top:64px, so desktop renders byte-for-byte the same.≤540pxoverride:.c { position: fixed; bottom: 0; left:0; right:0 }full-width, top border + lift shadow;.mbottom padding 80px → 112px so the last message scrolls clear of the fixed bar.(Bonus: this revived the dead
.c { top: 60px }mobile rule the inline style had been silently overriding.)Test plan (Claude Preview, true 375px viewport)
position: fixed; bottom: 0px, flush to viewport bottom (composerBottom 812 = innerHeight), inline style goneposition: sticky; top: 64px(mq540: false)Presentation-only,
public/proto/home-v5.html(+14/−4).🤖 Generated with Claude Code