fix: improvements in dashboard for narrowing of window

ink v3 doesn't render well when the window is narrowed, especially for boxes with borders. this removes the border from the header, and tightens up a few horizontal margins.

Author: starpit

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

@@ -138,7 +138,7 @@ export default class Grid extends React.PureComponent<GridProps> {
             {AA.filter(Boolean).map((_, cidx) => (
               /* legend entry (i.e. legend column) */
               <Box key={_.state} {...outerBoxProps}>
-                <Box {...innerBoxProps} marginLeft={1}>
+                <Box {...innerBoxProps}>
                   {/* legend entry label */}
                   <Box>
                     <Text {..._.style} bold>

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

@@ -128,7 +128,7 @@ export default class Dashboard extends React.PureComponent<Props, State> {
 
   private header() {
     return (
-      <Box borderStyle="singleDouble" flexDirection="column">
+      <Box flexDirection="column">
         <Box>
           <Text>
             <Text color="blue" bold>
@@ -229,7 +229,7 @@ export default class Dashboard extends React.PureComponent<Props, State> {
     return this.gridRows().map((row, ridx) => (
       <Box key={ridx} justifyContent="space-around">
         {row.map(({ grid, widx }) => (
-          <Box key={grid.title} marginLeft={2}>
+          <Box key={grid.title} marginLeft={1}>
             <Grid
               key={grid.title}
               title={grid.title}