Fix label alignment to title on bug list page

Also add className support for custom label component.
This allows to set the margin of an label where the label is used instead of
defining a fixed margin in the label component.

2 files changed, 9 insertions, 2 deletions

diff --git a/webui/src/pages/bug/Bug.tsx b/webui/src/pages/bug/Bug.tsx
index 5f3dfd03..b32b0948 100644
--- a/webui/src/pages/bug/Bug.tsx
+++ b/webui/src/pages/bug/Bug.tsx
@@ -61,6 +61,8 @@ const useStyles = makeStyles((theme) => ({
   label: {
     marginTop: theme.spacing(0.1),
     marginBottom: theme.spacing(0.1),
+    marginLeft: theme.spacing(0.25),
+    marginRight: theme.spacing(0.25),
   },
   noLabel: {
     ...theme.typography.body2,
diff --git a/webui/src/pages/bug/LabelChange.tsx b/webui/src/pages/bug/LabelChange.tsx
index fd466ab8..712c33fa 100644
--- a/webui/src/pages/bug/LabelChange.tsx
+++ b/webui/src/pages/bug/LabelChange.tsx
@@ -16,6 +16,11 @@ const useStyles = makeStyles((theme) => ({
   author: {
     fontWeight: 'bold',
   },
+  label: {
+    maxWidth: '50ch',
+    marginLeft: theme.spacing(0.25),
+    marginRight: theme.spacing(0.25),
+  },
 }));
 
 type Props = {
@@ -30,12 +35,12 @@ function LabelChange({ op }: Props) {
       <Author author={op.author} className={classes.author} />
       {added.length > 0 && <span> added the </span>}
       {added.map((label, index) => (
-        <Label key={index} label={label} maxWidth="50ch" />
+        <Label key={index} label={label} className={classes.label} />
       ))}
       {added.length > 0 && removed.length > 0 && <span> and</span>}
       {removed.length > 0 && <span> removed the </span>}
       {removed.map((label, index) => (
-        <Label key={index} label={label} maxWidth="50ch" />
+        <Label key={index} label={label} className={classes.label} />
       ))}
       <span>
         {' '}