Improve preview usability

Confirming that I'll add this design work into my current tasks and post here when the style guide is updated with the required details.

Tried to reproduce this on a more current version of Drupal than the screenshot and the elements are more visible now and obscure the underlying elements even more.

Updated the screenshot to the newer version.

I'm going to bump this to major. What we are seeing in the screenshots is not acceptable for a demo of how great Drupal is. And I think a fix such as "let's just put a white background colour behind the preview info" would be a good start to have it acceptable. After that, maybe we could look at a fresh design for this component.

Looks like this is an issue with Drupal core generally, not just with Umami.

In node.preview.css we have:

.node-preview-container {
  position: fixed;
  z-index: 499;
  box-sizing: border-box;
  width: 100%;
  padding: 10px;
}

We can remove all of that, and just leave in the padding: 10px to fix this issue.

Here's some screenshots:

Umami currently

Umami if we remove the position: fixed CSS

Olivero currently

Olivero if we remove the position: fixed CSS

In the mean time, let's remove this from the Umami issue queue and move to to the theme system.

i've applied the patch to a fresh 10.1.x-dev install with the demo_umami profile. the change looks straight forward and good. the only small detail i consider at least distracting on wider viewports is the position of the view mode switcher. it is shifted to the left compared to the position of the search field which is more or less in the center of the browser window. i've intentionally dragged the browser window to the maximal possible width to illustrate the offset/shift (screenshot is taken in safari 16.1 - but tested also in the latest version of firefox).

one other detail i've noticed which is definitely out of the scope of the issue probably. but the tabbing order is sort of unexpected. if you start tabbing from the start to content editing link you get next to the select list, then the switch button. but me as a user would expect to get to the language selection (english/espanol) next but instead i tab into the admin toolbar. would i make sense to move the node preview container div down the DOM after the the toolbar-administration div?

Thanks Lauriii. I'll move this back to Umami, get a small fix for it there, and see how we progress then for Drupal core.

@lauriii this is ready for a review again.

Looks good to me. Will we RTBC it?

And perhaps create a follow up to see why we need to use !important. Umami should not be overriding .js-hide.

When I apply the MR changes and this is what I see. Is it okay for the view mode to overlap the search field?

Maybe weekend work wasn't my friend after all. Thought all the changes took affect.

Clearing cache fixed it.

Agree, this is much better, manually tested before and after - looks good to me.

I committed this locally and was about to push when the !important in system module gave me pause.

I know it *should* be hidden, but its possible this will cause an unexpected regression for someone who (wrongly) had put some other specificity on a component that has js-hide to change the display.

E.g I could envision a scenario where someone did this

<div class="js-hide" id="something"></div>

With css

#something {
  display: block
}

But with this change their previous ID based selector would no longer win.

So can we do this without changing system js.module.css?

See https://codepen.io/larowlan/pen/zYJXZVj for a pen of the above, put the !important in and see the behaviour change.

@lauriii @larowlan I've removed that !important. I don't think it is needed as demo_umami profile and umami (theme) does not have any override that I can see for .js .js-hide. I can't find the string .js or .js-hide anywhere inside the demo_umami directory.

Here's 2 screenshots, showing the "Switch" not visible when JS is enabled and then showing it visible when JS is disabled.

Preview still looks good to me.