Wrap long toast messages instead of clipping them at both ends - #65
Open
jankarres wants to merge 1 commit into
Open
Wrap long toast messages instead of clipping them at both ends#65jankarres wants to merge 1 commit into
jankarres wants to merge 1 commit into
Conversation
`.shellular-toast` was `white-space: nowrap` with no `max-width`, positioned with `left: 50%` and `translateX(-50%)`. Anything wider than the viewport therefore overflowed symmetrically and was clipped at BOTH ends, losing the start and the finish of the message. Measured on a 390px viewport: "Could not reach <host>: WebSocket closed before session handshake" rendered 471px wide at x = -40..430. Toasts carry host names, absolute file paths and raw CLI error text, so this is reachable today: "Update failed: <message from the CLI>" in ConnectionInfo and "Downloaded to <localPath>" in FileList both interpolate arbitrary length. The single line was load-bearing, which is why this is not a one-line change. Stacking positioned each toast with `bottom: 24 + index * (TOAST_HEIGHT + GAP)` and so needed a known, fixed height. Moving the stack into a flex container makes height irrelevant, after which the toast can wrap. Same visual order, newest above oldest, and the same offsets for the keyboard and safe area. That also retires an index bug: `toastCount` was decremented when a toast finished animating out, so a new toast could be handed the slot of one still on screen. Message text now goes in through a text node instead of `innerHTML`. It is interpolated from CLI-supplied strings, which had no business being parsed as markup.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
A toast wider than the screen is cut off at both ends today, so you lose the start and the finish and keep the middle. That hits the messages you most need in full:
Update failed: ${message}inConnectionInfotakes its text from the CLI, andDownloaded to ${localPath}inFileListprints an absolute path.It is
white-space: nowrapwith nomax-width, centred withtranslateX(-50%), so it overflows evenly on both sides. That example was 471px wide on a 390px viewport, from -40 to 430. Now it is 340px over two lines, from 25 to 365, and a short toast still hugs its content.Wrapping alone would have broken the stack, because each toast positioned itself with
bottom: 24 + index * (TOAST_HEIGHT + GAP)and that needs a known height. So the stack moves into one flex container,column-reverseand capped atmin(calc(100vw - 32px), 420px), carrying the keyboard and safe-area offsets that used to sit on each toast. Same order, newest above oldest.That also drops
toastCount, which was decremented whenever any toast finished animating out rather than when the one holding the index left, so a new toast could land on top of one still on screen. And the message goes in as a text node rather than throughinnerHTML, since one of its sources is a CLI error string.pnpm typecheckandpnpm formatclean,pnpm testunchanged at 97. Untested on Android and iOS, I did not set up the mobile build toolchain for this; the container inherits100vw,--saband--keyboard-heightexactly as before, but that is the part worth a glance on a phone.I let the message wrap freely rather than capping it with an ellipsis, because for an error I would rather see all of it. If that or anything else should be different, tell me and I will take care of it.