xmtp / example-chat-react

This repo has been archived. Replacement apps include the XMTP Quickstart React and XMTP Inbox chat apps. For more details and links, see the README in this repo.
MIT License
74 stars 52 forks source link

Bug: Extra space below message input field #147

Closed saulmc closed 1 year ago

saulmc commented 1 year ago

Describe the bug

There is now some extra space below the message input field, which as designed and in previous versions of the app was anchored to the bottom of the viewport.

Steps to Reproduce

Steps to reproduce the behavior:

  1. Go to xmtp.chat
  2. Connect wallet and sign to enable
  3. See that the message composer bar containing "Type something..." is no longer aligned with the bottom of the viewport

Expected behavior

The message composer bar should be aligned with the bottom of the viewport.

Screenshots

Expected Actual
CleanShot 2022-12-01 at 22 11 02@2x CleanShot 2022-12-01 at 22 16 00@2x

Additional context

Looks like it might be a sizing issue with the parent container.

CleanShot 2022-12-01 at 22 09 07@2x

Desktop

galligan commented 1 year ago

Just saw this one too. It's not just that it's extra space—it seems that the Tailwind class h-screen is not actually calculating properly for some reason, as the space changes as the window gets smaller, and at some point the typing bar is lost entirely.

Here's a video showing this behavior: https://shots.xmtp.com/2tNv1J

cc @bhavya2611