Problem/Motivation

Article page Ui issue

Steps to reproduce

add a very long non-breaking word into the body

Proposed resolution

Ui Should be fixed by adding word wrap.

Remaining tasks

Review

User interface changes

Before

before

After

after

API changes

NA

Data model changes

NA

Release notes snippet

NA

CommentFileSizeAuthor
#23 Screenshot 2023-12-08 at 9.41.20 AM.png108.37 KBgauravvvv
#23 Screenshot 2023-12-08 at 9.39.40 AM.png301.41 KBgauravvvv
#12 3393531-12.patch2.64 KB_utsavsharma
#12 interdiff_9-12.txt832 bytes_utsavsharma
#9 3393531-9.patch427 bytesharsh
#7 Screenshot 2023-10-17 at 4.32.43 PM.png96.61 KBandy-blum
#7 Screenshot 2023-10-17 at 4.32.19 PM.png112.93 KBandy-blum
articleissue.png77.19 KBaditi saraf

Issue fork drupal-3393531

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

Aditi Saraf created an issue. See original summary.

yash.rode’s picture

yash.rode commented

No word is generally larger than the size allowed by the input body field. The longest word in English is pneumonoultramicroscopicsilicovolcanoconiosis which fits just fine. Still, this can be fixed if there exists any case in which we need to enter a single word larger than the permitted size.

cilefen’s picture

cilefen commented
Status: Active » Postponed (maintainer needs more info)

What should happen instead? What are you proposing as a solution?

aditi saraf’s picture

aditi saraf commented

Here if we enter word larger in size UI should not break as shown in articleissue.png

aditi saraf’s picture

aditi saraf commented
Status: Postponed (maintainer needs more info) » Needs work

Here if we enter word larger in size UI should not break as shown in articleissue.png

cilefen’s picture

cilefen commented
Component: other » Olivero theme
Status: Needs work » Postponed (maintainer needs more info)

Please can you explain what is broken in that layout? Perhaps a screenshot simulating you suggested solution would assist in understanding this bug report.

I think this is referencing Olivero theme.

andy-blum’s picture

andy-blum
he/him/his
Primary language English
Location Ohio, USA
commented
Status: Postponed (maintainer needs more info) » Closed (won't fix)
StatusFileSize
new Screenshot 2023-10-17 at 4.32.19 PM.png112.93 KB
new Screenshot 2023-10-17 at 4.32.43 PM.png96.61 KB

While the example provided here isn't valid, it does highlight a problem that could be experienced with very long words on the mobile layout. For example, if we add a very long german word, we can experience the overflow issue identified here.

By adding the hyphens: auto; CSS rule, we can get that word to break in a language specific way.

Language support depends on browser implementation, which is poor according to MDN, but that information appears to be out-of-date

andy-blum’s picture

andy-blum
he/him/his
Primary language English
Location Ohio, USA
commented
Title: Article page UI issue » Article text can overflow page on mobile viewports
Status: Closed (won't fix) » Needs work
harsh’s picture

harsh commented
StatusFileSize
new 3393531-9.patch427 bytes

Please review the patch

harsh’s picture

harsh commented
Status: Needs work » Needs review
cilefen’s picture

cilefen commented
Status: Needs review » Needs work
_utsavsharma’s picture

_utsavsharma commented
StatusFileSize
new interdiff_9-12.txt832 bytes
new 3393531-12.patch2.64 KB

Fixed failures in #9.

Anonymous’s picture

Anonymous (not verified) commented

Nicolas_Barbarisi made their first commit to this issue’s fork.

shweta__sharma made their first commit to this issue’s fork.

shweta__sharma opened merge request !5621

andy-blum’s picture

andy-blum
he/him/his
Primary language English
Location Ohio, USA
commented
shweta__sharma’s picture

shweta__sharma commented
Status: Needs work » Needs review
smustgrave’s picture

smustgrave commented
Issue summary: View changes
Status: Needs review » Reviewed & tested by the community

Fixed up the issue summary to use the correct template, not sure where the original one came from.

MR appears to be addressing the issue, saving credit for @shweta_sharma for the fix.

shweta__sharma’s picture

shweta__sharma commented
Issue summary: View changes
gauravvvv’s picture

gauravvvv commented
Status: Reviewed & tested by the community » Needs work

The long word issue exists on all text contents in the theme. MR !5621 is only addressing for 

.text-content p,
.cke_editable p

.

gauravvvv’s picture

gauravvvv commented
Status: Needs work » Needs review
smustgrave’s picture

smustgrave commented
Status: Needs review » Needs work

Please provide additional screenshots or steps if we are expanding the scope

gauravvvv’s picture

gauravvvv commented
Status: Needs work » Needs review
StatusFileSize
new Screenshot 2023-12-08 at 9.39.40 AM.png301.41 KB
new Screenshot 2023-12-08 at 9.41.20 AM.png108.37 KB

With MR in comment #15

With MR in comment #21

As with #21, scope is for all text contents, it will wrap all words into next line with hyphens.

shweta__sharma’s picture

shweta__sharma commented
Status: Needs review » Reviewed & tested by the community

Agree with #20 I can confirm that we need to expand the scope of the long text for the other elements. The recent MR has fixed the issue. If we have any long word which is overflowing then the text will wrapped into the next line with hyphens. The changes seem good we can move this to RTBC now.
Thanks

quietone’s picture

quietone commented

I'm triaging RTBC issues. I read the IS and the comments. I didn't find any unanswered questions or other work to do.

Leaving at RTBC.

  • nod_ committed 6ec3e269 on 11.x 
    Issue #3393531 by Gauravvvv, shweta__sharma, Harsh, andy-blum, Aditi...

  • nod_ committed 00c11c3b on 10.3.x 
    Issue #3393531 by Gauravvvv, shweta__sharma, Harsh, andy-blum, Aditi...
nod_’s picture

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

Committed 6ec3e26 and pushed to 11.x. Thanks!

Status: Fixed » Closed (fixed)

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