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.

4 files changed, 40 insertions, 22 deletions

diff --git a/webui/src/components/Label.tsx b/webui/src/components/Label.tsx
index e719eee0..a1d3c6f9 100644
--- a/webui/src/components/Label.tsx
+++ b/webui/src/components/Label.tsx
@@ -26,21 +26,22 @@ const createStyle = (color: Color, maxWidth?: string) => ({
   backgroundColor: _rgb(color),
   color: getTextColor(_rgb(color)),
   borderBottomColor: darken(_rgb(color), 0.2),
-  margin: '3px',
   maxWidth: maxWidth,
 });
 
 type Props = {
   label: LabelFragment;
   maxWidth?: string;
+  className?: string;
 };
-function Label({ label, maxWidth }: Props) {
+function Label({ label, maxWidth, className }: Props) {
   return (
     <Chip
       size={'small'}
       label={label.name}
+      className={className}
       style={createStyle(label.color, maxWidth)}
-    ></Chip>
+    />
   );
 }
 export default Label;
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>
         {' '}
diff --git a/webui/src/pages/list/BugRow.tsx b/webui/src/pages/list/BugRow.tsx
index 62f8df97..87e45581 100644
--- a/webui/src/pages/list/BugRow.tsx
+++ b/webui/src/pages/list/BugRow.tsx
@@ -59,25 +59,36 @@ const useStyles = makeStyles((theme) => ({
     width: '100%',
     lineHeight: '20px',
   },
+  bugTitleWrapper: {
+    display: 'flex',
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    //alignItems: 'center',
+  },
   title: {
     display: 'inline',
     color: theme.palette.text.primary,
     fontSize: '1.3rem',
     fontWeight: 500,
+    marginBottom: theme.spacing(1),
+  },
+  label: {
+    maxWidth: '40ch',
+    marginLeft: theme.spacing(0.25),
+    marginRight: theme.spacing(0.25),
   },
   details: {
     lineHeight: '1.5rem',
     color: theme.palette.text.secondary,
   },
-  labels: {
-    paddingLeft: theme.spacing(1),
-  },
   commentCount: {
     fontSize: '1rem',
     marginLeft: theme.spacing(0.5),
   },
   commentCountCell: {
     display: 'inline-flex',
+    minWidth: theme.spacing(5),
+    marginLeft: theme.spacing(0.5),
   },
 }));
 
@@ -95,15 +106,12 @@ function BugRow({ bug }: Props) {
         <BugStatus status={bug.status} className={classes.status} />
         <div className={classes.expand}>
           <Link to={'bug/' + bug.humanId}>
-            <div className={classes.expand}>
+            <div className={classes.bugTitleWrapper}>
               <span className={classes.title}>{bug.title}</span>
-              {bug.labels.length > 0 && (
-                <span className={classes.labels}>
-                  {bug.labels.map((l) => (
-                    <Label key={l.name} label={l} maxWidth="40ch" />
-                  ))}
-                </span>
-              )}
+              {bug.labels.length > 0 &&
+                bug.labels.map((l) => (
+                  <Label key={l.name} label={l} className={classes.label} />
+                ))}
             </div>
           </Link>
           <div className={classes.details}>
@@ -112,12 +120,14 @@ function BugRow({ bug }: Props) {
             &nbsp;by {bug.author.displayName}
           </div>
         </div>
-        {commentCount > 0 && (
-          <span className={classes.commentCountCell}>
-            <CommentOutlinedIcon aria-label="Comment count" />
-            <span className={classes.commentCount}>{commentCount}</span>
-          </span>
-        )}
+        <span className={classes.commentCountCell}>
+          {commentCount > 0 && (
+            <>
+              <CommentOutlinedIcon aria-label="Comment count" />
+              <span className={classes.commentCount}>{commentCount}</span>
+            </>
+          )}
+        </span>
       </TableCell>
     </TableRow>
   );