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.
| Comment | File | Size | Author |
|---|---|---|---|
| #7 | after_patch.png | 249.58 KB | shivam_tiwari |
| #7 | before_patch.png | 238.83 KB | shivam_tiwari |
Issue fork drupal-3458714
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:
- 3458714-long-string-breaks
changes, plain diff MR !8640
Comments
Comment #3
simohell commentedComment #4
amanire commentedJust 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!
Comment #5
smustgrave commentedGlad 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.
Comment #6
simohell commentedComment #7
shivam_tiwari commentedI have verified merge request !8640 and it working fine. Attaching screenshots before and after the implementation.
Comment #13
nod_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!