UI fixes

Summary:
This is a collection of small UI fixes for the network plugin:

- image maxWidth is set to 100% to not cause vertical scrolling
- Panels now have horizontal scrollbars, if their content overflows
- fixing missing icon for failed network requests
- removing position sticky from table headers as it was not used and causing some rendering issues and performance problems
- Adding a `label` and `grow` option to the `Select`-component which is used in the sidebar of the network plugin.

Reviewed By: passy

Differential Revision: D12956336

fbshipit-source-id: 6e7e9cf97c058a2ff626576d4afdc6df65007ea1

src/ui/components/Select.js

@@ -6,6 +6,22 @@
  */
 
 import {Component} from 'react';
+import Text from './Text';
+import styled from '../styled';
+
+const Label = styled('label')({
+  display: 'flex',
+  alignItems: 'center',
+});
+
+const LabelText = styled(Text)({
+  fontWeight: '500',
+  marginRight: 5,
+});
+
+const SelectMenu = styled('select')(({grow}) => ({
+  flexGrow: grow ? 1 : null,
+}));
 
 /**
  * Dropdown to select from a list of options
@@ -21,20 +37,41 @@ export default class Select extends Component<{
   onChange: (key: string) => void,
   /** Selected key */
   selected?: ?string,
+  /** Label shown next to the dropdown */
+  label?: string,
+  /** Select box should take all available space */
+  grow?: boolean,
 }> {
+  selectID: string = Math.random().toString(36);
+
   onChange = (event: Object) => {
     this.props.onChange(event.target.value);
   };
 
   render() {
-    const {className, options, selected} = this.props;
+    const {className, options, selected, label, grow} = this.props;
 
-    return (
-      <select onChange={this.onChange} className={className}>
+    let select = (
+      <SelectMenu
+        grow={grow}
+        id={this.selectID}
+        onChange={this.onChange}
+        className={className}>
         {Object.keys(options).map(key => (
           <option selected={key === selected}>{options[key]}</option>
         ))}
-      </select>
+      </SelectMenu>
     );
+
+    if (label) {
+      select = (
+        <Label for={this.selectID}>
+          <LabelText>{label}</LabelText>
+          {select}
+        </Label>
+      );
+    }
+
+    return select;
   }
 }