Constrain image caption widths based on device
Constrain image caption widths based on device

Summary: ... from new specs given here: https://app.asana.com/0/132409062806753/158384469284328

Test Plan:
- `localStorage.xomManatee = '1'`
- temporarily disable image URL checking:
```
diff --git i/src/widgets/image-editor.jsx w/src/widgets/image-editor.jsx
index 296a341..539352d 100644
--- i/src/widgets/image-editor.jsx
+++ w/src/widgets/image-editor.jsx
@@ -341,7 +341,7 @@ const ImageEditor = React.createClass({
     // noisily load the image in response to the author changing it
     onUrlChange: function(url, silent) {
         // All article content must be KA-owned!
-        if (!INTERNALLY_HOSTED_URL_RE.test(url)) {
+        if (false && !INTERNALLY_HOSTED_URL_RE.test(url)) {
             this.setState({
                 backgroundImageError: (
                     'Images must be from sites hosted by Khan Academy. ' +
```
- load a perseus test exercise with an image + caption ([example](http://localhost:9000/?content=%7B%22question%22%3A%7B%22content%22%3A%22Here%20is%20some%20preceding%20text.%5Cn%5Cn%5B%5B%E2%98%83%20radio%201%5D%5D%5Cn%5CnHere%20is%20some%20following%20text.%5Cn%22%2C%22images%22%3A%7B%7D%2C%22widgets%22%3A%7B%22radio%201%22%3A%7B%22type%22%3A%22radio%22%2C%22alignment%22%3A%22default%22%2C%22static%22%3Afalse%2C%22graded%22%3Atrue%2C%22options%22%3A%7B%22choices%22%3A%5B%7B%22correct%22%3Afalse%2C%22content%22%3A%22hello%22%7D%2C%7B%22correct%22%3Atrue%2C%22content%22%3A%22is%22%7D%2C%7B%22isNoneOfTheAbove%22%3Afalse%2C%22content%22%3A%22anyone%22%7D%2C%7B%22isNoneOfTheAbove%22%3Afalse%2C%22content%22%3A%22there%3F%22%7D%5D%2C%22randomize%22%3Afalse%2C%22multipleSelect%22%3Atrue%2C%22displayCount%22%3Anull%2C%22hasNoneOfTheAbove%22%3Afalse%2C%22onePerLine%22%3Atrue%2C%22deselectEnabled%22%3Afalse%7D%2C%22version%22%3A%7B%22major%22%3A1%2C%22minor%22%3A0%7D%7D%7D%7D%2C%22answerArea%22%3A%7B%22calculator%22%3Afalse%2C%22chi2Table%22%3Afalse%2C%22periodicTable%22%3Afalse%2C%22tTable%22%3Afalse%2C%22zTable%22%3Afalse%7D%2C%22itemDataVersion%22%3A%7B%22major%22%3A0%2C%22minor%22%3A1%7D%2C%22hints%22%3A%5B%5D%7D#content=%7B%22question%22%3A%7B%22content%22%3A%22Here%20is%20some%20preceding%20text.%5Cn%5Cn%5B%5B%E2%98%83%20image%201%5D%5D%5Cn%5CnHere%20is%20some%20following%20text.%5Cn%22%2C%22images%22%3A%7B%7D%2C%22widgets%22%3A%7B%22image%201%22%3A%7B%22type%22%3A%22image%22%2C%22alignment%22%3A%22block%22%2C%22static%22%3Afalse%2C%22graded%22%3Atrue%2C%22options%22%3A%7B%22static%22%3Afalse%2C%22title%22%3A%22%22%2C%22range%22%3A%5B%5B0%2C10%5D%2C%5B0%2C10%5D%5D%2C%22box%22%3A%5B800%2C300%5D%2C%22backgroundImage%22%3A%7B%22url%22%3A%22http%3A%2F%2Fplacekitten.com%2F800%2F300%22%2C%22width%22%3A800%2C%22height%22%3A300%7D%2C%22labels%22%3A%5B%5D%2C%22alt%22%3A%22%22%2C%22caption%22%3A%22here%20is%20the%20caption.%20it%20is%20really%20long.%20here%20is%20the%20caption.%20it%20is%20really%20long.%20here%20is%20the%20caption.%20it%20is%20really%20long.%20%22%7D%2C%22version%22%3A%7B%22major%22%3A0%2C%22minor%22%3A0%7D%7D%7D%7D%2C%22answerArea%22%3A%7B%22calculator%22%3Afalse%2C%22chi2Table%22%3Afalse%2C%22periodicTable%22%3Afalse%2C%22tTable%22%3Afalse%2C%22zTable%22%3Afalse%7D%2C%22itemDataVersion%22%3A%7B%22major%22%3A0%2C%22minor%22%3A1%7D%2C%22hints%22%3A%5B%5D%7D))
- choose tablet viewport
- start with a narrow image to check min-width constraint: http://placekitten.com/200/300
- see that caption width is sized to the min-width, 400px
- expand image: http://placekitten.com/500/300
- see that the caption width is sized to image width, 500px
- expand image: http://placekitten.com/700/300
- see that the caption width is sized to 512px (it should be 540px, but our 512px max-width on paragraphs make this difficult)
- repeat the above with phone viewport
- temporarily hardcode `isImageFullWidth` to be `false` (to simulate floated images), and use a very narrow image: http://placekitten.com/150/300
- see that caption width is 150px

Reviewers: benkomalo, charlie

Reviewed By: charlie

Subscribers: jared

Differential Revision: https://phabricator.khanacademy.org/D29284

learningequality/perseus,ariabuckles/perseus,learningequality/perseus,ariabuckles/perseus,ariabuckles/perseus,ariabuckles/perseus