Page MenuHomePhabricator

Function Editor: Input list have misaligned fields when there's more than one input
Closed, ResolvedPublicBUG REPORT



On Desktop and smaller screens, input fields misaligned because of the Add new input button

Steps to reproduce:

  1. Go to
  2. Reduce size of the window horizontally

Observed behavior:

Screenshot from 2022-10-10 12-34-47.png (596×1 px, 57 KB)

Expected behavior (Acceptance criteria):

  • Input fields should remain aligned and "Add new input" link at the right of the top input but outside of the input alignment container

Devices and Design (URLs or screenshots, if applicable):

  • Desktop: ...
  • Small screens/mobile: ...

Completion checklist

Event Timeline

Teleosteen added a subscriber: Teleosteen.

I have two contradictory ideas in mind:

  • Technical considerations: I wonder if using CSS grid could not be a good fit for keeping the "Add new input" to the top right (but maybe having to support IE 11 spoils the idea);
  • UI / UX considerations: As the "Add new input" is meant to push a new input, it should remain below the last input (see screenshot below)

add_input_below.png (675×1 px, 72 KB)

I think the second idea (changing the UI / UX) would be a better fit and would solve the issue here by the same time. What do you think?

Change 841848 had a related patch set uploaded (by Teleosteen; author: Teleosteen):

[mediawiki/extensions/WikiLambda@master] Fix input argument lists misaligned by moving "add another input" below

I proposed a patch with the "UX/UI" solution in mind.

Tested on desktop and mobile through the Responsive Design mode in Firefox Devtools.

Change 841848 merged by jenkins-bot:

[mediawiki/extensions/WikiLambda@master] Fix input argument lists misaligned by moving "add another input" below