Improve line wrapping in tables

Larger tables can happen all over the site, those are just reliable examples for finding potentially layout-breaking tables. Instead, we should make the tables more narrow. How about something like:

.extended-file-field-table-filename {
  max-width: 30em;
  text-overflow: ellipsis;
  overflow: hidden;
}

If #2225355: Make tables responsive is able to ensure tables don't break out of their container, then the JS can be removed completely.

I guess this is happening here? https://drupal.org/node/2159541

The wide table in #2159541: Notice: Undefined property: stdClass::$title in flexslider_entityreference_field_formatter_settings_summary() is the title change in comment #2. It could be tackled in a similar way as I proposed for the files table in #1.

I noticed word-wrap: break-word; is used on issue queue tables. That actually looks ideal. I don't know if it needs to be combined with max-width or not.

If we can handle all tables with wide words with CSS, then the JS can be removed completely.

Mmmh, this just came up in the webmaster queue #2248067: Issue too wide not sure if same but different or just different.

We can tackle both types of table on issue pages in this issue. They will have similar CSS to deal with wide content.

word-wrap: break-word; should also be applied to URLs under the logo on organization pages, such as https://www.drupal.org/node/1237520.

Great, let's use this issue to totally remove the table spacing JS.

Now deployed.

+++ b/sass/partials/drupalorg/_issue-page.scss
@@ -128,6 +128,18 @@
+.field-name-field-issue-files table,
+.field-name-field-issue-changes table.nodechanges-file-changes {
+  max-width: 580px;
+}

The first ruleset is not specific enough. It also restricts the table inside the files fieldset at the bottom of issues:

Also, I'm not entirely sure why a max-width is used here. Surely there must be a better solution than this. At the very least, wouldn't max-width: 100% work instead of such a very specific and arbitrary pixel size?

#20 should fix #19.

So am I right in that these are the items which are outstanding:
- Node changes on issues - https://www.drupal.org/node/2056089/revisions
- Forum listings - https://www.drupal.org/forum/
- API.Drupal.org listings - https://api.drupal.org/api/drupal/groups

I'm not certain that those links are right, but wanted to have a quick way to evaluate.

I'm just not certain what we need to do to close this issue.

duplicate

For Node changes on issues, this is now not causing layout issues, but looks like it is always breaking mid-word. If possible, it should try to break on words, and break mid-word when necessary.

The same is true of forum listings.

Retitling since the JS is gone, and we still have a couple places to clean up.

https://kenneth.io/blog/2012/03/04/word-wrapping-hypernation-using-css/ looks like a good strategy for wrapping long words in dynamically-sized containers. Removing the need to hard-code a width, as mentioned in #19.

https://drumm-drupal.redesign.devdrupal.org/node/2355909 is an example of this running right now.

I am deploying these changes for issue pages shortly.

Now deployed.

toboggan-api.redesign.devdrupal.org has the improved line wrapping in tables.

The table columns do get quite narrow, so I refactored the JS to kick in the mobile table styles when a full-width views table gets less than 500px wide on the site.

The last few commits fix this.

In http://cgit.drupalcode.org/bluecheese/commit/?id=e946b94, I refactored the JS to be a single file, and more flexible about when to make specific tables responsive.

Now deployed.