From e0af98e1d0e0f0c6ff98ca71bfcf48646f1d4fff Mon Sep 17 00:00:00 2001
From: Nick Mitchell <nickm@us.ibm.com>
Date: Wed, 5 Apr 2023 20:08:01 -0400
Subject: [PATCH] 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.
---
 .../src/components/Dashboard/Grid.tsx                         | 2 +-
 .../src/components/Dashboard/index.tsx                        | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/plugins/plugin-codeflare-dashboard/src/components/Dashboard/Grid.tsx b/plugins/plugin-codeflare-dashboard/src/components/Dashboard/Grid.tsx
index 1be7f339..cfe2e7fc 100644
--- a/plugins/plugin-codeflare-dashboard/src/components/Dashboard/Grid.tsx
+++ b/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>
diff --git a/plugins/plugin-codeflare-dashboard/src/components/Dashboard/index.tsx b/plugins/plugin-codeflare-dashboard/src/components/Dashboard/index.tsx
index d66e73c6..14c79c65 100644
--- a/plugins/plugin-codeflare-dashboard/src/components/Dashboard/index.tsx
+++ b/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}