Change 896330 had a related patch set uploaded (by Jkieserman; author: Jkieserman):

[mediawiki/extensions/WikiLambda@master] - change the type of a type list - provide a warning to the user when changing the type - remove invalid children on publish when the type was changed

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

The styles of ext-wikilambda-value-block are stopping the fields from covering the 100% of the screen width. We can use flex styles, but we need to have flex:1 on items that will need to take all the space.

Currently upon inspection it looks like this:

While it should look like this:

I've been looking at the styles and these are the changes that should fix it:

1. On ZObjectKeyValue.vue, add property flex:1 to ext-wikilambda-key-value:

.ext-wikilambda-key-value {
 		flex: 1;
...

2. On ZObjectKeyValue.vue, remove display:flex and align-items:center properties and add flex:1 to ext-wikilambda-value-block:

 	.ext-wikilambda-value-block {
-		display: flex;
-		align-items: center;
 		flex: 1;
 		margin-top: @wl-key-value-margin-top;
 		margin-right: @wl-key-value-margin-right;
 		margin-bottom: @wl-key-value-margin-bottom;

3. On ZTypedListItem.vue, add property flex: 1 to .ext-wikilambda-ztyped-list-item-flex:

 	&-flex {
 		display: flex;
 		flex: 1;
 	}

Change 896330 merged by jenkins-bot:

[mediawiki/extensions/WikiLambda@master] ZTypedList: Handle changing the type of a typed list

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