[ui] When Action output is long enough, keep a user scroll-anchored to the bottom #19452
Conversation
| pre { | ||
| background-color: transparent; | ||
| color: unset; | ||
| overflow-anchor: none; | ||
| min-height: 100%; | ||
| white-space: pre-wrap; | ||
| } |
There was a problem hiding this comment.
Part of this was making the scrollbars appear in the correct spot. An earlier attempt had me creating a scrollable area within the <pre> block, but that was unnecessary. Instead, we move the colo(u)r rules to the parent <code> element and have the <pre> always min-height to the code block's height.
| @@ -71,7 +71,12 @@ | |||
| <code><pre>Error: {{this.instance.error}}</pre></code> | |||
| {{/if}} | |||
| {{#if this.instance.messages.length}} | |||
| <code><pre>{{this.instance.messages}}</pre></code> | |||
| <code tabindex="0"> | |||
There was a problem hiding this comment.
Side-effect: now you can focus in the action output and do things like pgdn etc.
Ember Test Audit comparison
|
philrenaud
force-pushed
the
19437-ui-actions-should-keep-me-scrolled-to-the-bottom-in-the-web-ui
branch
from
9c04cc0 to
90966d3
Compare
| pre { | ||
| background-color: transparent; | ||
| color: unset; | ||
| overflow-anchor: none; |
There was a problem hiding this comment.
Did you have a chance to test on Safari, where overflow-anchor doesn't seem to be supported?
There was a problem hiding this comment.
Yep, this won't work in Safari; observed behaviour there is same as pre-PR (treats this like any other scrollable element, not "sticky")
philrenaud
deleted the
19437-ui-actions-should-keep-me-scrolled-to-the-bottom-in-the-web-ui
branch
Uses overflow-anchor (shoutout to https://css-tricks.com/books/greatest-css-tricks/pin-scrolling-to-bottom/) to keep long-running or tall Actions outputs in the UI scrolled to the bottom.
Importantly, if the user scrolls AWAY from the bottom, let's say to carefully read an earlier log or copy it, the anchoring behaviour ceases (until they scroll back to the bottom again)
Resolves #19437