AFAICT the relevant change is Make syntax highlighting readable in night mode (T356956), possibly with some further changes after that.

Had a quick look at this today. The change @Lucas_Werkmeister_WMDE identified does indeed trigger the issue. I'm not sure what the solution here should be though.

In the design of the current page, the code (div.mw-highlight pre) is inside a <div> (div.mw-highlight) which is as wide as the page. The links (div.entity-schema-text-links) floats to the right of the code. I set the background of the div.mw-highlight here to red and the background of the div.entity-schema-text-links to green.

Previously we had the situation that both divs had the same colour - #fff - and everything was fine. Now in support of "night mode", the syntax highlighter wants to set an explicit background colour for the div.mw-highlight. We can compensate by setting our own explicit background colour, but the div is floating and won't fill to the height of the code, so that will look strange.

Alternatively, we can put everything in a grid:

Here I've set the left column to auto and the right to max-content (grid-template-columns: auto max-content;). In both screenshots I've made the text of the check schema link a bit longer to illustrate where the width is coming from.

I feel like redesigning the layout here would be a UX question. And I imagine just reverting the change in the syntax highlighter would cause a regression for night mode.

What do you think, @Lucas_Werkmeister_WMDE ?

@Arian_Bozorg Any thoughts from your side about how best to proceed here? Is this is design question? Or should I just duct-tape over it for now so that it works?

I would say this is more of a design question for @Sarai-WMDE.

For me the first duct tape solution works, but not sure if this causes any issues.

Using`grid` just to ensure we revert the changes sounds good. I don't think this constitutes a redesign, as long as we're just trying to replicate the original look and behavior. It sounds just like a bug fix, but let me know if I'm overlooking anything, please.

Now, we could always fine-tune certain aspects of this layout: e.g. it would be great to apply a comfortable min-width to the ShEx column and let the links on the right wrap when that min-width is met. Or even display the links in a column and align them at the start, to position them both close to the section they relate to and create more space for the code area by default. But these are improvements that probably shouldn't be applied as part of this ticket, and rather motivate the creation of a new one if that sounds good.

Change #1054504 had a related patch set uploaded (by Arthur taylor; author: Arthur taylor):

[mediawiki/extensions/EntitySchema@master] Limit width of `mw-highlight` div in schema view with grid layout

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

@Sarai-WMDE Thanks so much for the feedback! I implemented the grid fix in this patch and will wait to see if someone files a follow-up.

Change #1054557 had a related patch set uploaded (by Lucas Werkmeister (WMDE); author: Lucas Werkmeister (WMDE)):

[mediawiki/extensions/EntitySchema@master] POC: Make schema-view-section dir=ltr

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

Change #1054504 merged by jenkins-bot:

[mediawiki/extensions/EntitySchema@master] Limit width of `mw-highlight` div in schema view with grid layout

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

Change #1054557 merged by jenkins-bot:

[mediawiki/extensions/EntitySchema@master] Make schema-view-section dir=ltr

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