Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update #message width to keep from running off right edge of narrow s… #66

Open
wants to merge 2 commits into
base: main
Choose a base branch
from

Conversation

kupietools
Copy link

@kupietools kupietools commented Dec 22, 2024

In indieweb chat, on my small very old iPhone, the input#message element, where you type in messages to submit to chat, is wider than the screen. This makes it difficult to, at times, impossible to see the end of what you're typing, as in iOS you can't even scroll the input field if you can't drag-select all the way to the right edge of it, and that's past the right edge of the screen on my phone.

By changing the max-width of input#message to 95vw, the input field will always be 95% of the width of the browser window at most, whatever that might be.

N.B. Using 95vw as the width causes problems at wide widths due to the pop-out channel sidebar taking up a lot of the window's width and pushing the input off the right edge of the screen even though may be very wide because 95vw is so big at those widths. But because 400px is usually under 95vw, the 95vw limit only takes priority when the window is so narrow that it's below the breakpoint where the pop-out sidebar is automatically collapsed, so there's no problem in that case.

@kupietools kupietools marked this pull request as draft December 22, 2024 01:06
Just changing the width didn't account for problems when the sidebar is showing.
@kupietools kupietools marked this pull request as ready for review December 22, 2024 01:22
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Development

Successfully merging this pull request may close these issues.

1 participant