Page MenuHomePhabricator

Newcomer tasks: Help panel height is shorter than expected
Closed, ResolvedPublic

Description

The Desktop help panel is appearing shorter than the expected 528px height.

Proposed fix

1. Set a fixed height on the panel
Set on a class that includes height of the entire panel including header + footer (e.g., .oo-ui-window-frame) to be height:528px;

image.png (1×698 px, 87 KB)

2. Set a max-height on the panel
In cases where the browser window is shorter than the height of the panel, the height of the panel should be shortened so that users can still access the help panel header actions, and be able to see the "Edit" tabs on the page.
Set the following max-height on the same class as item #1:
max-height: calc(100vh - 180px);
image.png (1×2 px, 392 KB)

Event Timeline

Aklapper renamed this task from Naroow Help panel displayed in FF to Narrow Help panel displayed in FF.Apr 15 2020, 7:49 PM
MMiller_WMF renamed this task from Narrow Help panel displayed in FF to Newcomer tasks: narrow Help panel displayed in FF.Apr 15 2020, 11:09 PM
RHo renamed this task from Newcomer tasks: narrow Help panel displayed in FF to Newcomer tasks: Short Help panel displayed in FF.Apr 27 2020, 4:30 PM

Based on offline conversation, retitled this to reflect that the bug is the panel height is not tall enough in FF (not width being too narrow).

@RHo will take action on this task following a team discussion.

RHo renamed this task from Newcomer tasks: Short Help panel displayed in FF to Newcomer tasks: Help panel height is shorter than expected.Jun 4 2020, 1:39 PM
RHo updated the task description. (Show Details)

Change 604794 had a related patch set uploaded (by Gergő Tisza; owner: Gergő Tisza):
[mediawiki/extensions/GrowthExperiments@master] Fix help panel height

https://gerrit.wikimedia.org/r/604794

Change 604794 merged by jenkins-bot:
[mediawiki/extensions/GrowthExperiments@master] Fix help panel height

https://gerrit.wikimedia.org/r/604794

For Design review - all specs seem to be in place.

  1. Set a fixed height on the panel

Set on a class that includes height of the entire panel including header + footer (e.g., .oo-ui-window-frame) to be height:528px;

productionbetalabs with the fix
Screen Shot 2020-06-15 at 5.33.09 PM.png (518×509 px, 74 KB)
Screen Shot 2020-06-15 at 5.45.27 PM.png (594×314 px, 59 KB)
  1. Set a max-height on the panel

Screen Shot 2020-06-15 at 5.41.25 PM.png (622×744 px, 183 KB)

Screen Shot 2020-06-15 at 5.41.25 PM.png (622×744 px, 183 KB)

Thanks @Etonkovidova - I can't replicate the double-scrollbar that is occurring in your second screenshot from my Chrome browser so wonder if it browser dependent? In any case, think this is minor enough (certain subset of browsers, only if the browser window height is <724px ) when this would occur that IMHO we can call it a pass.