Problem/Motivation

When entering a name for the new view model if you enter a specific number of characters the machine name will jump into the following row, based on the situation it can be confusing for the users because sometimes only the closing bracket can go into the second row.

Steps to reproduce

  1. Go to Structure > Display Modes > View Modes
  2. Click Add View mode and the modal will open
  3. Under content click on Add view mode for Content
  4. Start typing the name for the view mode
  5. Type this This is long bre
  6. See how only the closing bracket is in the new row
  7. If you continue with typing you will see how the actual machine name will go into the next row but the label Machine name: will stay up.

Proposed resolution

Adding a white-space: nowrap; on the form-item__suffix will make sure that the whole suffix is going to the next row when the length is too big.

Attached are the two screenshots with the issue.

As a user I don't want to be confused with parts of the machine name going into the second row.

Remaining tasks

Screenshots
Review

User interface changes

Attached before and after photos where you can see how the closing bracket wraps in the new row.

Before
Text break issue
After
Text break issue fixed

API changes

N/A

Data model changes

N/A

Release notes snippet

N/A

CommentFileSizeAuthor
#16 Screenshot 2024-01-25 at 4.17.03 PM (1).png225.39 KBdishakatariya
#16 Screenshot 2024-01-25 at 4.18.47 PM (1).png234.81 KBdishakatariya
#15 Longtext_afterpatch.png88.4 KBdishakatariya
#15 Shorttext_afterpatch.png83.99 KBdishakatariya
#15 Longtext_beforepatch.png94.59 KBdishakatariya
#15 Shorttext_beforepatch.png90.42 KBdishakatariya
#12 text-break-fixed.png55.77 KBalex.87
#12 text-break-issue.png57.67 KBalex.87
#6 Text_Afterpach.png82.31 KBkanchan bhogade
#6 Longtext_Afterpatch.png95.55 KBkanchan bhogade
#6 text_Beforepatch.png82.46 KBkanchan bhogade
#6 Longtext_Beforepatch.png96.4 KBkanchan bhogade
break word issue in form item suffix.png156.5 KBalex.87
long name machine name placement.gif668.56 KBalex.87

Issue fork drupal-3413736

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:

About issue forks

Comments

alex.87 created an issue. See original summary.

alex.87 opened merge request !6103

alex.87’s picture

alex.87 commented
Status: Active » Needs review
alex.87’s picture

alex.87 commented
Version: 10.2.x-dev » 11.x-dev
alex.87’s picture

alex.87 commented
Issue summary: View changes
StatusFileSize
new correct placement of the long suffix.png168.49 KB
kanchan bhogade’s picture

kanchan bhogade commented
Issue summary: View changes
StatusFileSize
new Longtext_Beforepatch.png96.4 KB
new text_Beforepatch.png82.46 KB
new Longtext_Afterpatch.png95.55 KB
new Text_Afterpach.png82.31 KB

Hi,
I verified and tested the MR 6103 on the Drupal 11. x version.
Patch applied successfully

Testing steps:

  1. Install the Drupal version 11. x
  2. Go to Structure > Display Modes > View Modes
  3. Click Add View mode and the modal will open
  4. Under content click on Add view mode for Content
  5. Start typing the name for the view mode (small and long text)
  6. Unable to reproduce the issue as mentioned but the machine name breaks into two different rows
  7. Apply Patch, and check for the machine name

Test Result:
The machine name is displayed in suffixes and not broken into multiple lines

Attaching screenshots for reference

Not changing status for more Reviews

smustgrave’s picture

smustgrave commented
Status: Needs review » Needs work
Issue tags: +Needs issue summary update

There's no issue summary, should follow standard template.

alex.87’s picture

alex.87 commented
Issue summary: View changes
Status: Needs work » Needs review

Not sure how it got lost, but I took it back from the revision.

alex.87’s picture

alex.87 commented
Issue tags: -Needs issue summary update
smustgrave’s picture

smustgrave commented
Issue summary: View changes
Status: Needs review » Needs work
Issue tags: +Needs screenshots

Thanks appears it was completely removed in #6, not sure.

But updated it with the missing section, even if they don't apply it's good practice

For UI changes it's helpful to include before/after screenshots in the summary. Tagging for that.

larowlan’s picture

larowlan
Location 🇦🇺🏝.au GMT+10
commented
Priority: Normal » Minor
alex.87’s picture

alex.87 commented
Issue summary: View changes
Status: Needs work » Needs review
Issue tags: -Needs screenshots
StatusFileSize
new text-break-issue.png57.67 KB
new text-break-fixed.png55.77 KB
smustgrave’s picture

smustgrave commented
Assigned: alex.87 » Unassigned
dishakatariya’s picture

dishakatariya commented
Assigned: Unassigned » dishakatariya
dishakatariya’s picture

dishakatariya commented
Assigned: dishakatariya » Unassigned
Status: Needs review » Reviewed & tested by the community
StatusFileSize
new Shorttext_beforepatch.png90.42 KB
new Longtext_beforepatch.png94.59 KB
new Shorttext_afterpatch.png83.99 KB
new Longtext_afterpatch.png88.4 KB

Hi,
I verified and tested the MR 6103 on the Drupal 11. x version.
Patch applied successfully
Followed the below Testing steps:
Install the Drupal version 11. x

  1. Go to Structure > Display Modes > View Modes
  2. Click Add View mode and the modal will open
  3. Under content click on Add view mode for Content
  4. Start typing the name for the view mode (small and long text)
  5. See how only the closing bracket is in the new row
  6. If you continue with typing you will see how the actual machine name will go into the next row but the label Machine name: will stay up.
  7. Apply Patch, and check for the machine name

Test Result:
The machine name is displayed in suffixes and not broken into multiple lines
According to me this issue is no more exist. Verified this on the multiple resolutions (responsive)and browser(Chrome,firefox,safari) as well.
Attaching the screenshots for referrence below.
Can be move to RTBC
Thanks!

dishakatariya’s picture

dishakatariya commented
StatusFileSize
new Screenshot 2024-01-25 at 4.18.47 PM (1).png234.81 KB
new Screenshot 2024-01-25 at 4.17.03 PM (1).png225.39 KB

Adding some more screenshots for before patch of Safari browser for reference.This is fixed now.

quietone’s picture

quietone commented

I'm triaging RTBC issues. I read the IS and the comments. I didn't find any unanswered questions.

Leaving at RTBC;

alex.87’s picture

alex.87 commented

  • nod_ committed e819dc65 on 11.x 
    Issue #3413736 by alex.87, DishaKatariya, Kanchan Bhogade, smustgrave:...

  • nod_ committed 71316c13 on 10.3.x 
    Issue #3413736 by alex.87, DishaKatariya, Kanchan Bhogade, smustgrave:...

nod_ closed merge request !6103

nod_’s picture

nod_
Primary language French
Location Lille
commented
Version: 11.x-dev » 10.3.x-dev
Component: theme system » Claro theme
Status: Reviewed & tested by the community » Fixed

Committed e819dc6 and pushed to 11.x. Thanks!

Status: Fixed » Closed (fixed)

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