[lando-ui] In lando's "Preview Landing" UI, the commit message area needs to be vertically scrollable (on Mobile)
Categories
(Conduit :: Lando, defect, P3)
Tracking
(Not tracked)
People
(Reporter: dholbert, Unassigned)
References
Details
(Keywords: conduit-triaged)
Attachments
(2 files)
STR:
- Use Lando on a phone, with a commit that has a particularly long commit message.
ACTUAL RESULTS:
In the "Preview Landing" page, the area that shows the commit message has the commit overflowing off of its bottom & clipped, but it does not have a vertical scrollbar.
EXPECTED RESULTS:
Vertical scrollbar.
This seems like perhaps the mobile-specific version of bug 1500223 (maybe there's a mobile-specific CSS tweak that we need to accompany the desktop-specific CSS that presumably changed in bug 1500223).
Reporter | ||
Comment 1•4 years ago
|
||
Reporter | ||
Comment 2•4 years ago
|
||
As you can see in the attached screenshot, the commit-message preview area has a horizontal scrollbar, but not a vertical one.
It probably has overflow-x:auto
which needs to be changed to overflow:auto
(to allow scrolling in the Y axis).
Reporter | ||
Comment 3•4 years ago
|
||
For commits that have multiple lines (with linebreaks), this ends up fine because we end up displaying a Show all N lines
button.
This bug is specifically about commits that have a particularly-long single line (e.g. the first line, the "main commit message"), which has no linebreaks but instead simply wraps in the phabricator UI due to the limited available width there.
Reporter | ||
Comment 4•4 years ago
|
||
Reporter | ||
Comment 5•4 years ago
|
||
There is a bit of an upper-limit here; moz-phab submit tip
rejects my commit if its first line is longer than 255 characters.
I've posted a "patch" which is really just a testcase for this bug.
STR:
(1) View https://lando.services.mozilla.com/D101423/ in a skinny browser or on a phone (to trigger lots of forced linewrapping) and hit "Preview Landing". (Don't actually land it! :))
ACTUAL RESULTS:
Only the first ~half of the commit message is visible; the rest is clipped and there's no way for users to make it show.
EXPECTED RESULTS:
Should be able to see the full commit message, to audit it before landing.
Reporter | ||
Comment 6•4 years ago
|
||
This element is <pre class="StackPage-landingPreview-commitMessage">
which we style with overflow-y:hidden
in this stylesheet:
https://lando.services.mozilla.com/static/build/main.min.css?bda232fa
Here's the rule in question -- the last line is the problematic one:
.StackPage-landingPreview-commitMessage {
font-family: 'Fira Mono', monospace;
font-size: 1em;
white-space: pre-wrap;
height: auto;
line-height: 1.25em;
margin-top: 1ch;
margin-left: 1ch;
color: inherit;
background-color: inherit;
border: 1px dashed black;
padding: 0.5ch;
max-height: 6.875em;
overflow-y: hidden
}
If I change that to overflow:auto
in devtools, then everything is fine. That's the change we should make, I suspect.
Updated•4 years ago
|
Updated•2 years ago
|
Description
•