fix: leverage ink 4's flexWrap in the dashboard grid

Author: starpit

Diff for: plugins/plugin-codeflare-dashboard/src/components/Dashboard/Grid.tsx

@@ -208,10 +208,12 @@ export default class Grid extends React.PureComponent<GridProps> {
     const flexDirection = this.legendPosition === "below" ? "column" : "row"
     const alignItems = this.legendPosition === "below" ? "center" : "center"
     const legendBoxProps = this.legendPosition === "below" ? { marginTop: 1 } : { marginLeft: 2 }
+    const flexWrap = this.legendPosition === "right" ? "wrap" : "nowrap"
 
     return (
       <Box
         flexDirection={flexDirection}
+        flexWrap={flexWrap}
         alignItems={alignItems}
         justifyContent="center"
         paddingTop={1}

Diff for: plugins/plugin-codeflare-dashboard/src/components/Dashboard/index.tsx

@@ -277,7 +277,7 @@ export default class Dashboard extends React.PureComponent<Props, State> {
   /** Render the grids */
   private grids() {
     return this.gridRows().map((row, ridx) => (
-      <Box key={ridx} justifyContent="space-around">
+      <Box key={ridx} justifyContent="space-around" flexWrap="wrap">
         {row.map(({ grid, widx }) => (
           <Box key={grid.title} marginLeft={1}>
             <Grid