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

Assigned To

Authored By

	gengh
	Oct 10 2022, 10:37 AM

Description

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

Steps to reproduce:

Observed behavior:

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

	Subject	Repo	Branch	Lines +/-
	Fix input argument lists misaligned by moving "add another input" below	mediawiki/extensions/WikiLambda	master	+1 -1

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)

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

gengh closed this task as Resolved.Oct 24 2022, 4:51 PM

	F35560653: Screenshot from 2022-10-10 12-34-47.png
	Oct 10 2022, 10:37 AM

	F35564041: add_input_below.png
	Oct 12 2022, 6:34 AM