{"action":"created","issue":{"url":"https://api.github.com/repos/mozilla/addons-server/issues/1712","repository_url":"https://api.github.com/repos/mozilla/addons-server","labels_url":"https://api.github.com/repos/mozilla/addons-server/issues/1712/labels{/name}","comments_url":"https://api.github.com/repos/mozilla/addons-server/issues/1712/comments","events_url":"https://api.github.com/repos/mozilla/addons-server/issues/1712/events","html_url":"https://github.com/mozilla/addons-server/issues/1712","id":134537739,"number":1712,"title":"Layout issue for long caption screenshot preview","user":{"login":"ValentinaPC","id":15685960,"avatar_url":"https://avatars.githubusercontent.com/u/15685960?v=3","gravatar_id":"","url":"https://api.github.com/users/ValentinaPC","html_url":"https://github.com/ValentinaPC","followers_url":"https://api.github.com/users/ValentinaPC/followers","following_url":"https://api.github.com/users/ValentinaPC/following{/other_user}","gists_url":"https://api.github.com/users/ValentinaPC/gists{/gist_id}","starred_url":"https://api.github.com/users/ValentinaPC/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/ValentinaPC/subscriptions","organizations_url":"https://api.github.com/users/ValentinaPC/orgs","repos_url":"https://api.github.com/users/ValentinaPC/repos","events_url":"https://api.github.com/users/ValentinaPC/events{/privacy}","received_events_url":"https://api.github.com/users/ValentinaPC/received_events","type":"User","site_admin":false},"labels":[{"url":"https://api.github.com/repos/mozilla/addons-server/labels/needs%20ux","name":"needs ux","color":"009800"}],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":1,"created_at":"2016-02-18T10:21:38Z","updated_at":"2016-04-15T11:54:12Z","closed_at":null,"body":"Steps to reproduce:\r\n1. Sign in to AMO-stage https://addons.allizom.org/en-US/firefox/\r\n2. Go to Edit Listing -> Images for any submitted listed add-on (i.e. https://addons.allizom.org/en-US/developers/addon/unlimited-free-vpn-test2/edit)\r\n3. Add a long caption for an add-on screenshot and save\r\n4. Click the  \"View Listing\" link \r\n5. Click on the screenshot with long caption\r\n\r\n**Expected results:**\r\nThere are no display or layout issues.\r\n\r\n**Actual results:**\r\nThere is a layout issue in what concerns the screenshot caption.\r\n\r\nNotes/Issues:\r\nVerified on FF44(Win 7). Issue is reproducing on AMO-stage, dev and prod.\r\nScreenshot for this issue: \r\n![2016-02-18_1219](https://cloud.githubusercontent.com/assets/15685960/13140311/def938e8-d639-11e5-9815-568ce6edc583.png)\r\n"},"comment":{"url":"https://api.github.com/repos/mozilla/addons-server/issues/comments/210436926","html_url":"https://github.com/mozilla/addons-server/issues/1712#issuecomment-210436926","issue_url":"https://api.github.com/repos/mozilla/addons-server/issues/1712","id":210436926,"user":{"login":"designakt","id":8145891,"avatar_url":"https://avatars.githubusercontent.com/u/8145891?v=3","gravatar_id":"","url":"https://api.github.com/users/designakt","html_url":"https://github.com/designakt","followers_url":"https://api.github.com/users/designakt/followers","following_url":"https://api.github.com/users/designakt/following{/other_user}","gists_url":"https://api.github.com/users/designakt/gists{/gist_id}","starred_url":"https://api.github.com/users/designakt/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/designakt/subscriptions","organizations_url":"https://api.github.com/users/designakt/orgs","repos_url":"https://api.github.com/users/designakt/repos","events_url":"https://api.github.com/users/designakt/events{/privacy}","received_events_url":"https://api.github.com/users/designakt/received_events","type":"User","site_admin":false},"created_at":"2016-04-15T11:54:12Z","updated_at":"2016-04-15T11:54:12Z","body":"Let's do this:\r\n\r\n#lightbox .caption {\r\n    font-size: 16px;\r\n    margin: auto 50px;\r\n    height: 64px;\r\n    overflow-y: auto;\r\n    line-height: 56px;\r\n}\r\n#lightbox .caption span {\r\n    line-height: 21px;\r\n    display: inline-block;\r\n    vertical-align: middle;\r\n}\r\n#lightbox .control, \r\n.previews .control {\r\n    width: 50px;\r\n}\r\n\r\nWhich results in a (not so nice) scroll-bar for text longer than 3 lines, but at least keeps all text readable and prevents the prev/next buttons from covering text.\r\n\r\n![capture2](https://cloud.githubusercontent.com/assets/8145891/14560646/501843b2-0311-11e6-91e0-8e18ad473b86.PNG)\r\n![capture1](https://cloud.githubusercontent.com/assets/8145891/14560645/500e587a-0311-11e6-99a8-eae2d3812589.PNG)\r\n\r\n\r\n\r\n\r\n"}}