Fix the display of the diff commits and issue summary table on mobile.

Review Request #13339 — Created Oct. 12, 2023 and submitted

Information

Review Board
release-6.x

Reviewers

Both the diff commits and the issue summary table suffered regressions
during 6.0 development on mobile, the diff commits list most recently,
and were suboptimal even before this.

The diff commits list used to show a table of all columns (selection
controls/op, message, and author), which was squished on mobile. With
recent changes, it turned into a multi-row display that had review
request background colors peaking out of it.

The issue summary table spanned three rows of content, and was readable,
but had alignment issue and looked quite broken.

Much of this was due to default mobile styling for the tabular base
component.

This change reworks all this to provide a more ideal view on mobile
devices. The tabular component no longer provides default mobile styling
for the table view, instead requiring that each specialization provide
their own styling.

The diff commits list is a table once again, but hides the ID
and author on mobile. This will show the control/op (if appropriate) and
then the message. The rationale is that the ID and author, while nice to
have, are really supplementary and not particularly important
information when screen space is at a premium.

The issue summary table hides the timestamp on mobile and caps the
author information to 25% of the table, leaving the most room for the
comment text. The status icon has been fixed to not have a bunch of
excess padding. This ensures that the key information (status, message,
and just a bit of the author) is available at a glance. The timestamp is
also supplementary and not important to show in this situation.

Both fields are now quite usable even on very narrow mobile devices.

Tested the issue summary table and all filters on desktop and mobile at
different widths.

Tested all variations of the diff commits table (with and without author
information present, which is only when the commit author differs from
the review request author) on desktop and mobile at different widths.

Summary ID
Fix the display of the diff commits and issue summary table on mobile.
Both the diff commits and the issue summary table suffered regressions during 6.0 development on mobile, the diff commits list most recently, and were suboptimal even before this. The diff commits list used to show a table of all columns (selection controls/op, message, and author), which was squished on mobile. With recent changes, it turned into a multi-row display that had review request background colors peaking out of it. The issue summary table spanned three rows of content, and was readable, but had alignment issue and looked quite broken. Much of this was due to default mobile styling for the tabular base component. This change reworks all this to provide a more ideal view on mobile devices. The tabular component no longer provides default mobile styling for the table view, instead requiring that each specialization provide their own styling. The diff commits list is a table once again, but hides the ID and author on mobile. This will show the control/op (if appropriate) and then the message. The rationale is that the ID and author, while nice to have, are really supplementary and not particularly important information when screen space is at a premium. The issue summary table hides the timestamp on mobile and caps the author information to 25% of the table, leaving the most room for the comment text. The status icon has been fixed to not have a bunch of excess padding. This ensures that the key information (status, message, and just a bit of the author) is available at a glance. The timestamp is also supplementary and not important to show in this situation. Both fields are now quite usable even on very narrow mobile devices.
9747fbcc166cc38ec1605bf5b365d5a52893ab3c

david
  1. Ship It!
  2. 
      
maubin
  1. 
      
  2. 
      
chipx86
Review request changed

Status: Closed (submitted)

Change Summary:

Pushed to release-6.x (f08104d)
Loading...