chore: homepage style

1 files changed, 12 insertions, 3 deletions

diff --git a/src/components/MemoryChart.tsx b/src/components/MemoryChart.tsx
index 9f6febb..6d750e4 100644
--- a/src/components/MemoryChart.tsx
+++ b/src/components/MemoryChart.tsx
@@ -18,9 +18,18 @@ const { useMemo } = React;
 
 const chartWrapperStyle = {
   // make chartjs chart responsive
+  justifySelf: 'center',
   position: 'relative',
-  maxWidth: 1000,
-  marginTop: '1em',
+  width: '100%',
+  height: '200px',
+  borderTop: '2px solid #424242',
+};
+
+const canvasWrapperStyle = {
+  width: '100%',
+  height: '100%',
+  padding: '10px',
+  backgroundColor: 'rgb(26 26 26)',
 };
 
 const mapState = (s: State) => ({
@@ -55,7 +64,7 @@ function MemoryChart({ apiConfig, selectedChartStyleIndex }) {
   return (
     // @ts-expect-error ts-migrate(2322) FIXME: Type '{ position: string; maxWidth: number; }' is ... Remove this comment to see the full error message
     <div style={chartWrapperStyle}>
-      <canvas id="MemoryChart" />
+      <canvas id="MemoryChart" style={canvasWrapperStyle} />
     </div>
   );
 }