Long strings within comments break Bartik's page layout.

Corbacho,

Would you be able to say which .inc file or module was this code at? I am trying to find where is the issue in the code first so maybe I can create a patch.

Thanks,
T.

@Corbacho i think the changes you have mentioned should be made in the .comment section .

done

corbacho could you please tell why the patch does not work ? I am not able to figure it out.

Ah! The reason why it is not working is that style.css does not exist in Bartik in D8. The CSS now has a SMACSS style architecture so the patch needs to affect the new files.

I have also found this issue within a Forum table also...

@emma.maria @corbacho This issue looks file with the comment section but exists with the forums table. Attaching comment section screenshot.

The issue posted in #28 is different to the original issue. The original issue is with no word spacing.

I will have a test and maybe post a seperate issue.

Also unassigning for now as @kpun has not been active on this issue for a month and we should open it up again.

Let's ignore the Forum table issue within this issue, it's not the same.

The issue here is that if you add a long string to a comment, it will continue to push the comment out of the page container because of this style. This is particularly needed for small mobile widths as the space for comments is so small...
 

 
I tried using the solution posted in the IS and the previous patch to the current codebase but it caused further regressions and did not help :-(
 

 

 
The comments code has been refactored since this bug was discovered. So we need a new CSS solution!
The current code on the comment content is...

.comment__content {
  position: relative;
  display: table-cell;
  padding: 10px 25px 10px 25px;
  vertical-align: top;
  width: 100%;
  border: 1px solid #d3d7d9;
  font-size: 0.929em;
  line-height: 1.6;
}

PS. word-wrap: break-word which is set on the body does not work on mobile devices for some reason.

I've updated the Issue summary.

As word-wrap: break-word is not working on mobile devices I have used word-break: break-all just for the .comment__wrapper. I don't know if this is ok but it works. Patch uploaded

@emma.maria The below image from your upload shows 8.0.x and the version for this issue is mentioned as 8.1.x-dev.

Ok thanks, I've changed the version to 8.0.x I would like this fixed ASAP.

@emma.maria Thoughts on #35 ?

Maybe we can set the "break-word" to only apply to anchor links within comments:

.comment__content a {
  word-break: break-all;
}

Thanks @rudraram for the patch!

I can confirm that word-wrap has no effect but word-break fixes the visual issue.

I checked word-break on caniuse.com and it has pretty good support.
Namely the word-break: break-word combination has this description...

Chrome, Safari and other WebKit/Blink browsers also support the unofficial break-word value which is treated like word-wrap: break-word.

Therefore I am happy with this solution!

Screenshots:

Chrome

Firefox

Safari

IE9

@martins.kajins thanks for your patch. However your solution you provided is different from the patch that was tested, solved the issue and was set to RTBC in #35.

The patch in #35 was set to red by the testbot and still cleanly applies. It is retesting now and I will set this back to RTBC based on #35 again.

To avoid confusion with what patch to commit here is a straight re-upload of @rudraram's patch from #35.

Setting this issue back to RTBC.

Committed and pushed to 8.0.x. Thanks!

Sorry if I am duplicating the Q&A but I'm having this issue right now with D8 current release. Is there a fix in this post ? Thanks.

Ah, I tried this and it worked:

diff --git a/core/themes/bartik/css/components/comments.css b/core/themes/bartik/css/components/comments.css
index 30e1be8..03bbfd1 100644
--- a/core/themes/bartik/css/components/comments.css
+++ b/core/themes/bartik/css/components/comments.css
@@ -61,6 +61,7 @@

   border: 1px solid #d3d7d9;
   font-size: 0.929em;
   line-height: 1.6;
+  word-break: break-all;
 }
 
 .comment__content:before {

I wonder if this issue has introduced a regression: #2679126: Words break unnecessarilly at end of line in forum topic replies.

Perhaps #42 above offers a direction.

An alternative solution to this issue is now proposed in #2679126