Node form layout issues with Claro theme

Thanks for the bug report @2dareis2do! We do not officially support sub-theming Claro but the bug you are facing related to node edit page layout on Safari seems like a valid one. Maybe we should repurpose this issue for fixing that? You can find steps for creating a MR in https://www.drupal.org/community/contributor-guide/task/create-a-merge-r.... Let me know if you need any help with that 😊

Hi 2dareis2do,

As pr comment #7, I was trying to resolve the issue (flex grid seems to stretch beyond the size of the screen (safari os x)) showing in image (Screenshot 2023-08-15 at 16.34.35.png), but it's not reproduce on safari (Version 16.5.2). and not found same on other browser's. attached screen for reference.

can you give more details about the issue .

Testing steps:
1. Set up the Drupal (10.1.x-dev) and moved to safari browser.
2. Moved to node and tried to found the issue.

Hi,
As per comment #9, Updated the image in comment #8.

same issue here after core update (9.4 > 10.1) .. I'm not using a subthem.

#4 works for me (grid-template-columns:66% minmax(22.5rem, 1fr);)

I believe the same occours here: updated Claro theme renders badly for some content type edit forms

Per #7 this issue could be repurposed to fix a safari bug, but that will mean a title and issue summary update.

Before/after screenshots should be added to the issue summary as well.

Will also probably need sub maintainer sign off

I have experienced the same issue on a couple of sites after upgrading from 9.5.x to 10.1.x.
I can replicate the issue on Chrome and Firefox, using both Mac OS and Windows.

The patch in #23 fixes the layout issue.

Claro content editing layout is still broken in 10.1.5.

Confirming patch in #23 fixed the layout issue.

Fixed

Updated before/after screenshot in issue summary. Also, I confirmed that this issue is not a browser-specific issue I can find this on Chrome too.

I was referred to this issue by way of https://www.drupal.org/project/drupal/issues/3372054#comment-15312495. I can also confirm that the patch in #23 resolved the layout issues I described in that issue with text fields of size > 100. Looks like we need a MR for the patch. I can do that momentarily.

We should probably clarify in the issue description that this is relevant on any node add/edit form with a text field that overflows the width in Claro and not specific to sub-theming.

In addition to Chromium and Firefox, I can confirm that the patch resolved it in MacOS Safari.

Updating the issue tag. The issue is with CSS grid, not flexbox.

And updating the title to clarify that this is specific to the node form layout.

I think the issue here is not confined to a browser and is in essence this:

If the width of the Claro theme is extended via some method there are undesirable results.

An easy way to test this is to input a long string into the new CKEditor5 interface, e.g. AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAiioooooooooooAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAiioooooooooooA - Observe the undesirable effects.

I think this patch resolves the issue experienced here, and is likely solving various disparate issues e.g. 3372054

Please could someone else test/verify.

The Needs Review Queue Bot tested this issue.

While you are making the above changes, we recommend that you convert this patch to a merge request. Merge requests are preferred over patches. Be sure to hide the old patch files as well. (Converting an issue to a merge request without other contributions to the issue will not receive credit.)

The bug mentioned in comment #37 will be fixed in #3400762: Long string breaks the layout of Claro with a minimal CSS change.
The patch here deals with the piece of CSS, so it would make sense to recheck this issue against that code.

Thank you for referencing that issue @simohell. I tested the work there locally and found that it did address the layout issue but introduced a regression in the responsive layout at viewport widths between 976 and 1278px. I posted screenshots in a comment there showing the difference.

Testing this MR I see that the main column expands without limit.
Expanding a text area without a limit harm usability on large screens.
Studies show that optimal width is around 45-75 characters/line.

The solution in #3400762 was chosen as the only change it was supposed to make was fixing the bug, but unfortunately it was not tested on all browsers and some browsers render it in a way that was not intended.

I think we need to find the CSS to keep the form in a usable width while making the form keep from breaking up.

I'll try to tag @ckrina in Slack on this to check if there how much space there is to iterate on the layout or just to fix the actual bugs.

@simohell yes, I agree about limiting the character width on larger screens. That is also consistent with prior float-based layout so I would personally consider removing it a regression. I think this MR needs to be cleaned up a little, but I just set max-width: 76rem on node-form-layout, which results in the same main column max width as it was previously (52 rem) and restored the margin-inline: auto to center it. This eliminates that regression on larger screens.

The Title text field is set to a size of 200 in these screenshots. I'm seeing the same results in MacOS Brave (Chromium), Firefox and Safari.

Display on 1920px wide screen

Display at 977px wide viewport

@amanire This latest version seem to work and also fixes #3400762: Long string breaks the layout of Claro

It might be a bit better to double the gap and allow side bar to grow a bit more in a larger screen, but that needs maybe a bit more eyes to decide. This fixes the bugs is good enough I think for now. I like having the sidebar stay in the middle but that is a bit bigger change to the current version so I hope to hear what @ckrina thinks.

I tagged this for usability review and hope to have this in the meeting next Friday.

I also added your screenshots and a new one with some clipping taking place.

Maybe also update the text description?

I'm having second thoughts about setting a max-width on the node form. One thing I noticed is that other admin forms do not have a max-width set for wider screens (for example, /block/add or /admin/structure/types/add). I agree with the typographic principle of keeping line length < ~75 characters but it also seems maybe that it’s inconsistent with the general approach of the Claro theme to expand to the available space. Also, I expect that the lack of a max-width would be preferred on larger screens for more complex UI elements like vertical tabs.

I think we have currently 3 options:
- fill the vieport width with form
- set maximum width and center form
- set maximum width and center main columns, fix side column to side of the window

(additional note: how does this work with RTL-languages?)

I will update screenshots with Umami demo-content in a while to give better comparison of actual use case.

Adding screenshots from different versions in different sizes.
One is narrow, second is about FullHD, third is about full 27" 1440p monitor.

If the issue exists all the way to the latest dev we fix it there and then apply it to the other versions as well.

The 3rd option is how they layout currently works, except for the actual bug.

It looks like the fix for current core layout was simpler than I thought.
I managed to test this right, all that was needed was setting a minimun value for main column:
not grid-template-columns: 3fr minmax(22.5rem, 1fr);
but instead grid-template-columns: minmax(0, 3fr) minmax(22.5rem, 1fr);

I have implemented that fix as a merge request in the other related issue #3400762: Long string breaks the layout of Claro.

Removing the max-width on the node edit form would be reverting a decision we consciously took a while back in #3158854: Node form: address chasm between main form and meta. Several related issues have been opened over time like #3096358: Claro layout on really wide screens/viewports causes uncomfortable text line length trying to make changes to this. But we have several conflicting problems, with some of them being:

• Max length of the text as mentioned in #47.
• Visual detachment from the main form and the sidebar (needs a design solution, we're working on that on #3076820: [META] Layout redesign). And centering everything in the center introduces new problems.
• We need to work on the designs of elements that need more space like nested items and other elements like Media library with a lot of items, like in https://www.drupal.org/project/drupal/issues/3158854#comment-13861927. And five alternatives for those that even with this won’t be able to fit everything on that max-width

So we need to address this in a more holistic way. Doing this big layout change in this issue in one of the most important pages in Drupal without a whole design process that takes into account the whole UI is a bit too much, sorry! This whole redesign is happening in #3076820: [META] Layout redesign.

So if I understood this correctly, I'm closing this one in favor of #3400762: Long string breaks the layout of Claro because that one is not introducing big design changes but solves the main issue I understand this was initially opened for.

Let's follow the conversation there :)