[dashboard] fix overlapping text in percentage bar (ray-project#44307)

In Firefox, the text in the percentage bar is overlapping. For example, if there are multiple GPUs, the entries in the GRAM column are overlapping.

Signed-off-by: bhuang <[email protected]>

dashboard/client/src/components/PercentageBar.tsx

@@ -11,6 +11,7 @@ const useStyle = makeStyles((theme) => ({
     position: "relative",
     boxSizing: "content-box",
     borderRadius: 4,
+    flexGrow: 1,
   },
   displayBar: {
     background: theme.palette.background.paper,
@@ -31,6 +32,7 @@ const useStyle = makeStyles((theme) => ({
     color: theme.palette.text.primary,
     width: "100%",
     textAlign: "center",
+    whiteSpace: "nowrap",
   },
 }));
 

dashboard/client/src/pages/node/GRAMColumn.tsx

@@ -105,7 +105,7 @@ const GRAMEntry: React.FC<GRAMEntryProps> = ({
   return (
     <Box display="flex" flexWrap="nowrap" style={{ minWidth: GRAM_COL_WIDTH }}>
       <Tooltip title={gpuName}>
-        <Box display="flex" flexWrap="nowrap">
+        <Box display="flex" flexWrap="nowrap" flexGrow={1}>
           <RightPaddedTypography variant="body1">
             [{slot}]:{" "}
           </RightPaddedTypography>