Issue with custom CSS "Save" button on smaller screens

This is what I see on a 13" screen, in Full/Expanded mode (that’s the very bottom of my window):

When “Show Advanced” is selected, not even that:
image

3 Likes

I can repro on my 2560x1440 16/9 screen, where the button is outside the window:

1 Like

And you don’t even have the Show Advanced selected… weird.
At least we know it’s not a screen size issue.
And we have the compact mode, so it’s ok, I guess. It lets us work. It would be worse :wink:

1 Like

This issue has existed for a long time. I was sure it was reported already, but I could not find it. I might confuse with something else. hmm.

1 Like

As long as we have the compact version to work with, it’s not as bad.

1 Like

I have prioritizing someone having a look over the next few weeks, but if anyone wants to give a shot at some CSS fixes here in a PR, feel free to.

Here is a PR:

4 Likes

Thanks! merged

3 Likes

Sorry if this is obvious… how do we update this? Is it available already? If so, is it just a normal update in the /admin/update page?

1 Like

Yes, when a PR is merged, it’s available through a regular update.

2 Likes

I just went through another issue.
I have this Custom CSS component and I made a mistake in the code and when I saved it, it showed me the error box:

It pushed everything down and I couldn’t save the new changes (the fixed version). I thought I could just zoom out to show the button, but the code box kept adjusting the height.

The only way I was able to save the new changes was to use the browser’s Inspect, set the warning box to display:none; and then I could see the Save button again.

And while I’m here, 2 suggestions:
1 - Wouldn’t it be possible to use this extra space at the bottom when in compact view? The small box is really… small.

2 - I always like to edit the code in expanded view. It would be great if we could set the default to this, to avoid having to expand it every time we open it.

1 Like

Aren’t you able to scroll down? In my local, I can. :thinking:

No. The box with the code is touching the bottom of the screen and even when I zoom out the browser, the box keeps adjusting its height.
I have a 13" screen, but I don’t think that’s the issue… Maybe the box and the button need to be inside a container (if they are not already) so even if the error messages pushes it down, what touches the bottom of the screen is the button, not the box.

1 Like

I see what you mean!
Since you are on fullscreen, the page can’t be scrolled by default.

Adding overflow: auto; to the container can fix this situation, and you can scroll down using the area above the editor.

That said, I think we should always see the save button. It would be a better experience for the admin. I will try to figure out a better approach.

1 Like

Hope you can get to the solution.

1 Like