Issue Summary
When using the Seven theme as the default theme, long unbroken link text in node titles (e.g., a product code or hash string) overflows its container in the Views preview and the front page (/node). This breaks the layout and causes horizontal scroll issues in admin views.

Steps to Reproduce
Set Seven as the default theme.

Create a node with a very long unbroken title

Go to /admin/structure/views/view/frontpage and click Preview.

Visit /node (front page) and observe the layout.

Expected: The layout should remain responsive.
Actual: The long title text/link overflows the container and breaks the layout.

Proposed Solution
Apply the following scoped CSS styles:

In field.css

.field--name-title {
  word-break: break-word;
}

In node.css

.node__content {
  word-wrap: break-word;
}

Screenshots
Before Fix:
/node (front page)
screenshot
/admin/structure/views/view/frontpage and click Preview.
screenshot
After Fix:
/node (front page)
screenshot
/admin/structure/views/view/frontpage and click Preview.
screenshot

CommentFileSizeAuthor
#21 Frontpage-Adminview.png111.67 KBimmaculatexavier
#21 Frontpage.png65.08 KBimmaculatexavier
#18 6c6c60263335b2faee6a58408d7ca83516ca5837.png21.65 KBavpaderno
#18 a8ff8ad36592f0dca33816935d3d3313a1414065.png12.41 KBavpaderno
#12 3197902-after-patch.png172.28 KBHarish1688
#12 3197902-before-patch.png107.32 KBHarish1688
#6 3197902-after.png24.6 KBabhijith s
#6 3197902-before.png22.25 KBabhijith s
#4 3197902-4.patch449 bytesgauravvvv
#3 Screenshot 2021-02-11 at 15.27.46.png32.33 KBgauravvvv
#2 3197902-2.patch429 bytesgauravvvv
Screenshot 2021-02-11 at 15.21.06.png39.36 KBgauravvvv

Issue fork seven-3197902

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

Gauravmahlawat created an issue. See original summary.

gauravvvv’s picture

gauravvvv commented
StatusFileSize
new 3197902-2.patch429 bytes

I have provided a patch please review if it is working or not. In our core theme Bartik we use word-wrap: break-word; property to overcome this issue, Using the same solution in patch please review.

gauravvvv’s picture

gauravvvv commented
StatusFileSize
new Screenshot 2021-02-11 at 15.27.46.png32.33 KB

Adding an after patch screenshot for reference.

gauravvvv’s picture

gauravvvv commented
StatusFileSize
new 3197902-4.patch449 bytes
gauravvvv’s picture

gauravvvv commented
Status: Active » Needs review
abhijith s’s picture

abhijith s commented
StatusFileSize
new 3197902-before.png22.25 KB
new 3197902-after.png24.6 KB

Applied patch #4 and its working fine.Adding screenshots below.

Before patch:

before

After patch:

after

RTBC +1

jijojoseph_zyxware’s picture

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

I have reviewed this patch and working fine for me. RTBC!!!!!!!!

Version: 9.2.x-dev » 9.3.x-dev

Drupal 9.2.0-alpha1 will be released the week of May 3, 2021, which means new developments and disruptive changes should now be targeted for the 9.3.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

lauriii’s picture

lauriii
he/him
Primary language Finnish
Location Finland
commented
Status: Reviewed & tested by the community » Postponed (maintainer needs more info)

Do we have any realistic use cases where this could occur? Changing word-wrap for body is a quite significant change, so if we don't have any realistic use case in mind, I'm leaning towards keeping this as is.

Version: 9.3.x-dev » 9.4.x-dev

Drupal 9.3.0-rc1 was released on November 26, 2021, which means new developments and disruptive changes should now be targeted for the 9.4.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Version: 9.4.x-dev » 9.5.x-dev

Drupal 9.4.0-alpha1 was released on May 6, 2022, which means new developments and disruptive changes should now be targeted for the 9.5.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Harish1688’s picture

Harish1688 commented
StatusFileSize
new 3197902-before-patch.png107.32 KB
new 3197902-after-patch.png172.28 KB

Tested the patch (3197902-4.patch) working fine, good for RTBC. but that issue is belong to the long text , not for long text link. it's (patch) mainly useful for small devices where we need to break the word on small size screen.

longwave’s picture

longwave
he/him
Primary language English
Location UK
commented
Project: Drupal core » Seven
Version: 9.5.x-dev » 1.0.0-alpha1
Component: Seven theme » Code

The Seven theme has been removed from Drupal 10 core. I confirmed that this issue only affects Seven and no other themes included with Drupal core, so I am moving this to the contributed Seven project.

avpaderno’s picture

avpaderno
he/him
Primary language Italian
Location Brescia, 🇮🇹 🇪🇺
commented
Title: Seven's body overflow when link text too long. » Body overflows when a link text is too long
Version: 1.0.0-alpha1 » 1.0.x-dev
Status: Postponed (maintainer needs more info) » Needs work
Issue tags: +Needs merge request, +Needs issue summary update, +Needs reroll, +Needs issue rescope

I agree with @laurii: The style is applied to a too generic selector. It should be applied to a more specific selector.

The screenshots seem to show a link for a node title. If the issue fixed at least that case, that would be more acceptable.

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

immaculatexavier opened merge request !111

immaculatexavier’s picture

immaculatexavier commented
Status: Needs work » Needs review
avpaderno’s picture

avpaderno
he/him
Primary language Italian
Location Brescia, 🇮🇹 🇪🇺
commented
Issue summary: View changes
Status: Needs review » Needs work
StatusFileSize
new a8ff8ad36592f0dca33816935d3d3313a1414065.png12.41 KB
new 6c6c60263335b2faee6a58408d7ca83516ca5837.png21.65 KB

The first screenshot, and other screenshots posted later, show what it seems the frontpage, or a page listing the created nodes. The link shown in those screenshots is the link to the node, which uses the node title as link title.

The issue summary does not say exactly what those screenshots show. I could only verify it still happens on the frontpage, when Seven is set as default theme.

screenshot

I am not sure we should fix this for a page that is not supposed to use an admin theme, which generally aims to render well only a restricted set of pages. Since this happens in the view settings page for the frontpage view (the view preview part), we could fix this for that page.

screenshot

immaculatexavier’s picture

immaculatexavier commented
Status: Needs work » Needs review
avpaderno’s picture

avpaderno
he/him
Primary language Italian
Location Brescia, 🇮🇹 🇪🇺
commented
Status: Needs review » Needs work

The status is also for the issue summary that needs to be updated.

immaculatexavier’s picture

immaculatexavier commented
Issue summary: View changes
StatusFileSize
new Frontpage.png65.08 KB
new Frontpage-Adminview.png111.67 KB

Updated Issue Summary. Kindly verify

immaculatexavier’s picture

immaculatexavier commented
immaculatexavier’s picture

immaculatexavier commented
Status: Needs work » Needs review
avpaderno’s picture

avpaderno
he/him
Primary language Italian
Location Brescia, 🇮🇹 🇪🇺
commented
Issue tags: -Needs merge request, -Needs issue summary update, -Needs reroll, -Needs issue rescope

avpaderno’s picture

avpaderno
he/him
Primary language Italian
Location Brescia, 🇮🇹 🇪🇺
commented
Status: Needs review » Reviewed & tested by the community
avpaderno’s picture

avpaderno
he/him
Primary language Italian
Location Brescia, 🇮🇹 🇪🇺
commented

  • avpaderno committed 8c5730c1 on 2.0.x 
    Issue #3197902: Body overflows when a link text is too long
avpaderno’s picture

avpaderno
he/him
Primary language Italian
Location Brescia, 🇮🇹 🇪🇺
commented
Status: Reviewed & tested by the community » Fixed

Thank you! The changes have been committed.

Status: Fixed » Closed (fixed)

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