We noticed that issue 2519362 improving menu edit form usability (https://www.drupal.org/i/2519362) reverted for 10.3. the fix for long stings breaking node edit form that was fixed with a 1-line css change for 10.2 in issue 3400762 (https://www.drupal.org/i/3400762) where the pcss file containing the codeline was renamed.

For more details about the problem addressed see the original issue #3400762: Long string breaks the layout of Claro.

Proposed resolution

On core/themes/claro/css/layout/form-two-columns.css line 23 instead of

grid-template-columns: 3fr minmax(22.5rem, 1fr);

we just need to add the second minmax function

grid-template-columns: minmax(0, 3fr) minmax(22.5rem, 1fr);

User interface changes

No changes while editing content without long strings (longer than form column width). Content with long strings will have same layout as contemt without long strings.

CommentFileSizeAuthor
#7 after_patch.png249.58 KBshivam_tiwari
#7 before_patch.png238.83 KBshivam_tiwari

Issue fork drupal-3458714

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

Comments

simohell created an issue. See original summary.

simohell’s picture

Status: Active » Needs review
amanire’s picture

Just noting that I have a different use case where I'm seeing this issue occur. In my case, it's because we have organized the node title inside of a field group widget on the form display. It has the same effect on the layout as long strings. I'm not sure if it's worth adding that to the title and/or description though.

Thanks @simohell!

smustgrave’s picture

Status: Needs review » Needs work
Issue tags: +Needs screenshots

Glad to see this is fixing another issue. Can the user interface section from the standard template be added with before/after screenshots, Will need to make sure #3400762: Long string breaks the layout of Claro doesn't break either.

simohell’s picture

Issue summary: View changes
shivam_tiwari’s picture

Assigned: simohell » Unassigned
Status: Needs work » Reviewed & tested by the community
StatusFileSize
new238.83 KB
new249.58 KB

I have verified merge request !8640 and it working fine. Attaching screenshots before and after the implementation.

  • nod_ committed 4e93352c on 10.3.x
    Issue #3458714 by simohell, shivam_tiwari, amanire, smustgrave: Long...

  • nod_ committed 48ed4f5e on 10.4.x
    Issue #3458714 by simohell, shivam_tiwari, amanire, smustgrave: Long...

  • nod_ committed 16d07a5f on 11.0.x
    Issue #3458714 by simohell, shivam_tiwari, amanire, smustgrave: Long...

  • nod_ committed c549a82c on 11.x
    Issue #3458714 by simohell, shivam_tiwari, amanire, smustgrave: Long...
nod_’s picture

Version: 11.x-dev » 10.3.x-dev
Status: Reviewed & tested by the community » Fixed
Issue tags: -Needs screenshots

Committed and pushed c549a82cbc to 11.x and 16d07a5ff5 to 11.0.x and 48ed4f5e05 to 10.4.x and 4e93352ccb to 10.3.x. Thanks!

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.