From c37d3d771806f9709c0c9fc77b5bbf8806a2ec23 Mon Sep 17 00:00:00 2001
From: Sascha <GlancingMind@outlook.com>
Date: Thu, 8 Apr 2021 18:02:33 +0200
Subject: 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.
---
 webui/src/pages/bug/LabelChange.tsx | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

(limited to 'webui/src/pages/bug/LabelChange.tsx')

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>
         {' '}
-- 
cgit