Fix sidebar display

Summary:
Before:

{F162109040}

Reviewed By: danielbuechele

Differential Revision: D15855444

fbshipit-source-id: c95ab1b0aa577dec5d493a0f6d166cb3aeeb7419

src/plugins/fresco/ImagesSidebar.js

@@ -13,6 +13,8 @@ import {
   Text,
   Panel,
   ManagedDataInspector,
+  FlexColumn,
+  FlexRow,
   colors,
   styled,
 } from 'flipper';
@@ -28,6 +30,10 @@ const DataDescriptionKey = styled('span')({
   color: colors.grapeDark1,
 });
 
+const WordBreakFlexColumn = styled(FlexColumn)({
+  wordBreak: 'break-all',
+});
+
 export default class ImagesSidebar extends Component<
   ImagesSidebarProps,
   ImagesSidebarState,
@@ -51,15 +57,23 @@ export default class ImagesSidebar extends Component<
       return null;
     }
     return (
-      <p>
+      <Panel heading="Sources" floating={false}>
-        <DataDescriptionKey>URI</DataDescriptionKey>
+        <FlexRow>
-        <span key="sep">: </span>
+          <FlexColumn>
-        <DataDescription
+            <DataDescriptionKey>URI</DataDescriptionKey>
-          type="string"
+          </FlexColumn>
-          value={this.props.image.uri}
+          <FlexColumn>
-          setValue={function(path: Array<string>, val: any) {}}
+            <span key="sep">:&nbsp;</span>
-        />
+          </FlexColumn>
-      </p>
+          <WordBreakFlexColumn>
+            <DataDescription
+              type="string"
+              value={this.props.image.uri}
+              setValue={null}
+            />
+          </WordBreakFlexColumn>
+        </FlexRow>
+      </Panel>
     );
   }
 }