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/plugins/network/RequestDetails.js

@@ -12,7 +12,6 @@ import type {Request, Response, Header} from './index.js';
 import {
   Component,
   FlexColumn,
-  FlexRow,
   ManagedTable,
   ManagedDataInspector,
   Text,
@@ -223,14 +222,13 @@ export default class RequestDetails extends Component<
             ]
           : null}
         <Panel heading={'Options'} floating={false} collapsed={true}>
-          <FlexRow>
-            <Text>Body: </Text>
-            <Select
-              selected={bodyFormat}
-              onChange={this.onSelectFormat}
-              options={RequestDetails.BodyOptions}
-            />
-          </FlexRow>
+          <Select
+            grow
+            label="Body"
+            selected={bodyFormat}
+            onChange={this.onSelectFormat}
+            options={RequestDetails.BodyOptions}
+          />
         </Panel>
       </RequestDetails.Container>
     );
@@ -403,8 +401,7 @@ type ImageWithSizeState = {
 class ImageWithSize extends Component<ImageWithSizeProps, ImageWithSizeState> {
   static Image = styled('img')({
     objectFit: 'scale-down',
-    maxWidth: 500,
-    maxHeight: 500,
+    maxWidth: '100%',
     marginBottom: 10,
   });
 

src/plugins/network/index.js

@@ -207,7 +207,7 @@ export default class extends FlipperPlugin<State, *, PersistedState> {
             this.state.selectedIds ? new Set(this.state.selectedIds) : null
           }
         />
-        <DetailSidebar>{this.renderSidebar()}</DetailSidebar>
+        <DetailSidebar width={500}>{this.renderSidebar()}</DetailSidebar>
       </FlexColumn>
     );
   }
@@ -384,7 +384,7 @@ class StatusColumn extends PureComponent<{
     let glyph;
 
     if (children != null && children >= 400 && children < 600) {
-      glyph = <Icon name="stop-solid" color={colors.red} />;
+      glyph = <Icon name="stop" color={colors.red} />;
     }
 
     return (