BuildList item. Horizontal scroll is shown with long branch name

closes Visual-Regression-Tracker/Visual-Regression-Tracker#315

Author: pashidlos

src/components/BuildDetails.tsx

@@ -5,14 +5,19 @@ import {
   Grid,
   Box,
   LinearProgress,
+  Tooltip,
 } from "@material-ui/core";
 import { BuildStatusChip } from "./BuildStatusChip";
 import { formatDateTime } from "../_helpers/format.helper";
 import { useBuildState } from "../contexts";
-import { LOCATOR_BUILD_DETAILS } from '../constants/help';
+import { LOCATOR_BUILD_DETAILS } from "../constants/help";
 
 const BuildDetails: React.FunctionComponent = () => {
   const { selectedBuild } = useBuildState();
+  const buildNumber = React.useMemo(
+    () => `#${selectedBuild?.number} ${selectedBuild?.ciBuildId || ""}`,
+    [selectedBuild?.number, selectedBuild?.ciBuildId]
+  );
 
   if (!selectedBuild) {
     return null;
@@ -25,13 +30,24 @@ const BuildDetails: React.FunctionComponent = () => {
       <Grid item>
         <Box m={0.5}>
           <Grid container spacing={1} alignItems="center">
-            <Grid item>
-              <Typography variant="subtitle2">{`#${selectedBuild.number} ${
-                selectedBuild.ciBuildId || ""
-              }`}</Typography>
+            <Grid item style={{ maxWidth: "20%", whiteSpace: "nowrap" }}>
+              <Tooltip title={buildNumber}>
+                <Typography
+                  variant="subtitle2"
+                  style={{ overflow: "hidden", textOverflow: "ellipsis" }}
+                >
+                  {buildNumber}
+                </Typography>
+              </Tooltip>
             </Grid>
-            <Grid item>
-              <Chip size="small" label={selectedBuild.branchName} />
+            <Grid item style={{ maxWidth: "70%" }}>
+              <Tooltip title={selectedBuild.branchName}>
+                <Chip
+                  size="small"
+                  style={{ maxWidth: "100%" }}
+                  label={selectedBuild.branchName}
+                />
+              </Tooltip>
             </Grid>
             <Grid item>
               <BuildStatusChip status={selectedBuild.status} />

src/components/BuildList/index.tsx

@@ -15,6 +15,7 @@ import {
   Menu,
   MenuItem,
   Box,
+  Tooltip,
 } from "@material-ui/core";
 import { MoreVert } from "@material-ui/icons";
 import {
@@ -136,9 +137,14 @@ const BuildList: FunctionComponent = () => {
                   <ListItemText
                     disableTypography
                     primary={
-                      <Typography variant="subtitle2">{`#${build.number} ${
-                        build.ciBuildId || ""
-                      }`}</Typography>
+                      <Typography
+                        variant="subtitle2"
+                        style={{
+                          wordWrap: "break-word",
+                        }}
+                      >
+                        {`#${build.number} ${build.ciBuildId || ""}`}
+                      </Typography>
                     }
                     secondary={
                       <Grid container direction="column">
@@ -150,7 +156,13 @@ const BuildList: FunctionComponent = () => {
                         <Grid item>
                           <Grid container justifyContent="space-between">
                             <Grid item>
-                              <Chip size="small" label={build.branchName} />
+                              <Tooltip title={build.branchName}>
+                                <Chip
+                                  size="small"
+                                  label={build.branchName}
+                                  style={{ maxWidth: 180 }}
+                                />
+                              </Tooltip>
                             </Grid>
                             <Grid item>
                               <BuildStatusChip status={build.status} />