Fix long error titles pushing buttons out of view

Summary: This diff fixes an issue where error messages that are to long pushed the buttons out of view, or the other rows too much down.

Reviewed By: passy

Differential Revision: D18083659

fbshipit-source-id: 54bdae682e6e756c9dad1a8cd247dd694ae0eef2

src/chrome/ErrorBar.tsx

@@ -76,14 +76,8 @@ function ErrorTile({
   const [collapsed, setCollapsed] = useState(true);
   return (
     <ErrorRow>
-      <FlexRow>
+      <FlexRow style={{flexDirection: 'row-reverse'}}>
-        <FlexColumn style={{flexGrow: 1}}>{error.message}</FlexColumn>
+        <ButtonSection>
-        {error.occurrences! > 1 && (
-          <ErrorCounter title="Nr of times this error occurred">
-            {error.occurrences}
-          </ErrorCounter>
-        )}
-        <FlexColumn style={{marginLeft: '8px'}}>
           <ButtonGroup>
             {(error.details || error.error) && (
               <Button onClick={() => setCollapsed(s => !s)}>
@@ -92,6 +86,20 @@ function ErrorTile({
             )}
             <Button onClick={onDismiss}>Dismiss</Button>
           </ButtonGroup>
+        </ButtonSection>
+        {error.occurrences! > 1 && (
+          <ErrorCounter title="Nr of times this error occurred">
+            {error.occurrences}
+          </ErrorCounter>
+        )}
+        <FlexColumn
+          style={
+            collapsed
+              ? {overflow: 'hidden', whiteSpace: 'nowrap', flexGrow: 1}
+              : {flexGrow: 1}
+          }
+          title={error.message}>
+          {error.message}
         </FlexColumn>
       </FlexRow>
       {!collapsed && (
@@ -153,6 +161,12 @@ const ErrorRow = styled('div')({
   lineHeight: '28px',
 });
 
+const ButtonSection = styled(FlexColumn)({
+  marginLeft: '8px',
+  flexShrink: 0,
+  flexGrow: 0,
+});
+
 const ErrorCounter = styled(FlexColumn)({
   backgroundColor: colors.cherryDark3,
   color: colors.cherry,
@@ -162,4 +176,7 @@ const ErrorCounter = styled(FlexColumn)({
   marginTop: 2,
   lineHeight: '24px',
   textAlign: 'center',
+  flexShrink: 0,
+  flexGrow: 0,
+  marginLeft: '8px',
 });