API sandbox's descriptions are positioned and styled poorly
Open, Needs TriagePublic

Description

The position of the descriptions is odd. They don't appear to line up with anything. (fixed) they make the forms very tall, they are the same size, weight and colour as the labels which makes the page harder to scan:

I was fiddling with this and made the following changes:

  1. Reduce the amount of width taken by the labels
  2. Align the description and the input
  3. Reduce description text's font size
  4. Change description text's color to a readable gray - Base30 (#72777d)

Anomie added a subscriber: Anomie.Feb 28 2017, 3:10 PM

Reduce the amount of width taken by the labels

Does OO.ui.FieldLayout actually support that?

Change description text's color to a readable gray - Base30 (#72777d)

That always seems to result in complaints about readability. Particularly in combination with reduced font size, I'm skeptical.

Prtksxna added a comment.EditedFeb 28 2017, 3:18 PM

Reduce the amount of width taken by the labels

Does OO.ui.FieldLayout actually support that?

I don't think so, not sure. Either way, if the solution makes sense we could always override CSS, or better still, find more places with a similar issue and standardize it, both in the Wikimedia Design Style Guide and OOUI.

Change description text's color to a readable gray - Base30 (#72777d)

That always seems to result in complaints about readability. Particularly in combination with reduced font size, I'm skeptical.

My mistake, I meant it to be slightly bigger, smaller than the label, and as large as the sidebar text.

Edit: That gray is AA compliant.

I'm not really bothered by the rest, but we should definitely reduce the amount of width taken by the labels. We can ponder doing this in OOjs UI for all interfaces later, but for now we could just override it with CSS for ApiSandbox.

Esanders updated the task description. (Show Details)Apr 24 2018, 4:31 PM