{"action":"created","issue":{"url":"https://api.github.com/repos/Automattic/wp-calypso/issues/1238","labels_url":"https://api.github.com/repos/Automattic/wp-calypso/issues/1238/labels{/name}","comments_url":"https://api.github.com/repos/Automattic/wp-calypso/issues/1238/comments","events_url":"https://api.github.com/repos/Automattic/wp-calypso/issues/1238/events","html_url":"https://github.com/Automattic/wp-calypso/pull/1238","id":120208135,"number":1238,"title":"Reader: Add fixed table-layout to tables within full post view","user":{"login":"alexjgustafson","id":933450,"avatar_url":"https://avatars.githubusercontent.com/u/933450?v=3","gravatar_id":"","url":"https://api.github.com/users/alexjgustafson","html_url":"https://github.com/alexjgustafson","followers_url":"https://api.github.com/users/alexjgustafson/followers","following_url":"https://api.github.com/users/alexjgustafson/following{/other_user}","gists_url":"https://api.github.com/users/alexjgustafson/gists{/gist_id}","starred_url":"https://api.github.com/users/alexjgustafson/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/alexjgustafson/subscriptions","organizations_url":"https://api.github.com/users/alexjgustafson/orgs","repos_url":"https://api.github.com/users/alexjgustafson/repos","events_url":"https://api.github.com/users/alexjgustafson/events{/privacy}","received_events_url":"https://api.github.com/users/alexjgustafson/received_events","type":"User","site_admin":false},"labels":[{"url":"https://api.github.com/repos/Automattic/wp-calypso/labels/Reader","name":"Reader","color":"006b75"},{"url":"https://api.github.com/repos/Automattic/wp-calypso/labels/[Status]%20Awaiting%20Author%20Response","name":"[Status] Awaiting Author Response","color":"eb6420"},{"url":"https://api.github.com/repos/Automattic/wp-calypso/labels/[Type]%20Bug","name":"[Type] Bug","color":"e11d21"}],"state":"open","locked":false,"assignee":{"login":"alexjgustafson","id":933450,"avatar_url":"https://avatars.githubusercontent.com/u/933450?v=3","gravatar_id":"","url":"https://api.github.com/users/alexjgustafson","html_url":"https://github.com/alexjgustafson","followers_url":"https://api.github.com/users/alexjgustafson/followers","following_url":"https://api.github.com/users/alexjgustafson/following{/other_user}","gists_url":"https://api.github.com/users/alexjgustafson/gists{/gist_id}","starred_url":"https://api.github.com/users/alexjgustafson/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/alexjgustafson/subscriptions","organizations_url":"https://api.github.com/users/alexjgustafson/orgs","repos_url":"https://api.github.com/users/alexjgustafson/repos","events_url":"https://api.github.com/users/alexjgustafson/events{/privacy}","received_events_url":"https://api.github.com/users/alexjgustafson/received_events","type":"User","site_admin":false},"milestone":{"url":"https://api.github.com/repos/Automattic/wp-calypso/milestones/39","html_url":"https://github.com/Automattic/wp-calypso/milestones/Reader:%20December%20Bug%20Scrub","labels_url":"https://api.github.com/repos/Automattic/wp-calypso/milestones/39/labels","id":1437656,"number":39,"title":"Reader: December Bug Scrub","description":"Bugs we should try to tackle in December","creator":{"login":"blowery","id":14350,"avatar_url":"https://avatars.githubusercontent.com/u/14350?v=3","gravatar_id":"","url":"https://api.github.com/users/blowery","html_url":"https://github.com/blowery","followers_url":"https://api.github.com/users/blowery/followers","following_url":"https://api.github.com/users/blowery/following{/other_user}","gists_url":"https://api.github.com/users/blowery/gists{/gist_id}","starred_url":"https://api.github.com/users/blowery/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/blowery/subscriptions","organizations_url":"https://api.github.com/users/blowery/orgs","repos_url":"https://api.github.com/users/blowery/repos","events_url":"https://api.github.com/users/blowery/events{/privacy}","received_events_url":"https://api.github.com/users/blowery/received_events","type":"User","site_admin":false},"open_issues":26,"closed_issues":4,"state":"open","created_at":"2015-12-01T14:59:41Z","updated_at":"2015-12-03T22:16:10Z","due_on":"2015-12-18T05:00:00Z","closed_at":null},"comments":1,"created_at":"2015-12-03T16:10:42Z","updated_at":"2015-12-03T22:18:08Z","closed_at":null,"pull_request":{"url":"https://api.github.com/repos/Automattic/wp-calypso/pulls/1238","html_url":"https://github.com/Automattic/wp-calypso/pull/1238","diff_url":"https://github.com/Automattic/wp-calypso/pull/1238.diff","patch_url":"https://github.com/Automattic/wp-calypso/pull/1238.patch"},"body":"Fixes #986 , to keep tables from overflowing within Reader's full post view in firefox\r\n\r\nTesting instructions:\r\n\r\n1. Publish a new post including a table with images in two 50% width colums\r\n2. View the post in the Reader\r\nResult: the table is not constrained to the content area when the post is viewed in the Reader using Firefox.\r\n\r\nBefore:\r\n<img width=\"1436\" alt=\"before\" src=\"https://cloud.githubusercontent.com/assets/933450/11565939/4d3907a2-99ae-11e5-9e29-913d3947ccb5.png\">\r\n<img width=\"336\" alt=\"before-mobile\" src=\"https://cloud.githubusercontent.com/assets/933450/11565940/4f0c438c-99ae-11e5-90db-0d5c7161bde0.png\">\r\n\r\nAfter:\r\n<img width=\"1425\" alt=\"after\" src=\"https://cloud.githubusercontent.com/assets/933450/11565945/52ae698e-99ae-11e5-8b3c-bfef33655669.png\">\r\n<img width=\"332\" alt=\"after-mobile\" src=\"https://cloud.githubusercontent.com/assets/933450/11565946/550655e8-99ae-11e5-9a86-0b8bd8939ea6.png\">\r\n\r\ncc: @blowery @designsimply \r\n"},"comment":{"url":"https://api.github.com/repos/Automattic/wp-calypso/issues/comments/161802494","html_url":"https://github.com/Automattic/wp-calypso/pull/1238#issuecomment-161802494","issue_url":"https://api.github.com/repos/Automattic/wp-calypso/issues/1238","id":161802494,"user":{"login":"alexjgustafson","id":933450,"avatar_url":"https://avatars.githubusercontent.com/u/933450?v=3","gravatar_id":"","url":"https://api.github.com/users/alexjgustafson","html_url":"https://github.com/alexjgustafson","followers_url":"https://api.github.com/users/alexjgustafson/followers","following_url":"https://api.github.com/users/alexjgustafson/following{/other_user}","gists_url":"https://api.github.com/users/alexjgustafson/gists{/gist_id}","starred_url":"https://api.github.com/users/alexjgustafson/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/alexjgustafson/subscriptions","organizations_url":"https://api.github.com/users/alexjgustafson/orgs","repos_url":"https://api.github.com/users/alexjgustafson/repos","events_url":"https://api.github.com/users/alexjgustafson/events{/privacy}","received_events_url":"https://api.github.com/users/alexjgustafson/received_events","type":"User","site_admin":false},"created_at":"2015-12-03T22:18:08Z","updated_at":"2015-12-03T22:18:08Z","body":"The setting defaults to `auto`, with that in place for our test case, the photos are the widest unbreakable content in their respective columns. The table element has a `width:100%;` style in place, and each td has a width of 50% in place, but because the photos are the widest unbreakable content the photos set their respective columns width regardless of the table's width. Because of that, it's stretching out the table's cells past the containing `.reader__full-post-content` div, even though the table has those widths set.\r\n\r\nIt should be noted this effect occurs in other environments, not just the Reader. Here's the sample HTML provided in the issue in a post in the Twenty Fourteen theme:\r\n\r\n<img width=\"1439\" alt=\"blog___923_is_numbered__not_lettered___soon_we_ll_be_spelling_everything_with_letters\" src=\"https://cloud.githubusercontent.com/assets/933450/11573505/b538a418-99d4-11e5-9da0-c7fcbfe90bec.png\">\r\n\r\nThe Twenty Fifteen theme handles this issue by using `table-layout:fixed` for all table elements. Here's the sample HTML provided in the issue in a post in the Twenty Fifteen theme:\r\n\r\n<img width=\"1437\" alt=\"overflow_display_in_firefox___923_is_numbered__not_lettered\" src=\"https://cloud.githubusercontent.com/assets/933450/11573435/5bf533d0-99d4-11e5-86d6-27d6626cc819.png\">\r\n\r\nSetting table-layout to `fixed` fixes the issue because the table renders based off the widths set in the tables first row rather than the contents within the table's cells. The content's width then gets handled within the cell as a container, following any overflow rules.\r\n\r\nTo produce the same effect without using `table-layout: fixed` I suppose we'd need to make adjustments to the content itself when found within a table. Images seem the most likely element to cause this width issue.  [Non-wrapping text would cause this effect too, but that happens even when the table-layout is fixed, and seems we handle it in the Reader view already](https://cloudup.com/cFJzYgwb3SV). A table nested within a table may also cause this effect with the right content.\r\n\r\nI'll attempt a solution that at least accounts for the image case, and test out how other elements react to see if fixing more than images is necessary."}}