Open Bug 1686128 Opened 4 years ago Updated 2 years ago

[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:

  1. 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).

Attached image screenshot

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).

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.

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.

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.

Assignee: nobody → zeid
Keywords: conduit-triaged
Priority: -- → P3
Assignee: zeid → nobody
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Created:
Updated:
Size: