From 3a789331a154e6c739e317f5957ae85f245e845c Mon Sep 17 00:00:00 2001
From: martin-stoyanov <martin.a.stoyanov@gmail.com>
Date: Thu, 11 Mar 2021 23:16:23 -0500
Subject: [PATCH] fix: fix spacing in page header

---
 ui/blocks/src/ComponentStats/ComponentStats.tsx | 14 +++++++++-----
 ui/components/src/ThemeContext/theme.ts         |  1 +
 2 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/ui/blocks/src/ComponentStats/ComponentStats.tsx b/ui/blocks/src/ComponentStats/ComponentStats.tsx
index f7e8c18d3..a7ce59d2f 100644
--- a/ui/blocks/src/ComponentStats/ComponentStats.tsx
+++ b/ui/blocks/src/ComponentStats/ComponentStats.tsx
@@ -15,14 +15,18 @@ export const ComponentStats: FC<{
   const stats = component.fileInfo?.sloc;
   return stats ? (
     <Box variant={`componentstats.${variant}`} {...rest}>
-      <Value sx={{ mx: 1 }} label="source lines:" value={stats.source} />
+      <Value label="source lines:" value={stats.source} />
       <Value
         label="comments %:"
-        value={
-          stats.source ? Math.round((100 * stats.comment) / stats.source) : 0
-        }
+        value={(stats.source
+          ? Math.round((100 * stats.comment) / stats.source)
+          : 0
+        ).toString()}
+        sx={{ ml: 2 }}
       />
-      {!!stats.todo && <Value label="todo lines:" value={stats.todo} />}
+      {!!stats.todo && (
+        <Value label="todo lines:" value={stats.todo} sx={{ ml: 2 }} />
+      )}
     </Box>
   ) : null;
 };
diff --git a/ui/components/src/ThemeContext/theme.ts b/ui/components/src/ThemeContext/theme.ts
index 8cc5d3b92..4ecbd27ec 100644
--- a/ui/components/src/ThemeContext/theme.ts
+++ b/ui/components/src/ThemeContext/theme.ts
@@ -491,6 +491,7 @@ export const theme: ControlsTheme = {
         display: 'flex',
         flexDirection: ['column', 'row'],
         alignItems: ['flex-end', 'baseline'],
+        justifyContent: 'space-between',
       },
     },
   },