Cut of very long labels with an ellipse

4 files changed, 12 insertions, 8 deletions

diff --git a/webui/src/components/Label.tsx b/webui/src/components/Label.tsx
index 13c913c9..bbe7c158 100644
--- a/webui/src/components/Label.tsx
+++ b/webui/src/components/Label.tsx
@@ -23,20 +23,24 @@ const getTextColor = (background: string) =>
     : common.black; // And black on light ones
 
 // Create a style object from the label RGB colors
-const createStyle = (color: Color) => ({
+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 };
-function Label({ label }: Props) {
+type Props = {
+  label: LabelFragment;
+  maxWidth?: string;
+};
+function Label({ label, maxWidth }: Props) {
   return (
     <Chip
       size={'small'}
       label={label.name}
-      style={createStyle(label.color)}
+      style={createStyle(label.color, maxWidth)}
     ></Chip>
   );
 }
diff --git a/webui/src/pages/bug/Bug.tsx b/webui/src/pages/bug/Bug.tsx
index 3cb48ecd..5f3dfd03 100644
--- a/webui/src/pages/bug/Bug.tsx
+++ b/webui/src/pages/bug/Bug.tsx
@@ -104,7 +104,7 @@ function Bug({ bug }: Props) {
             )}
             {bug.labels.map((l) => (
               <li className={classes.label} key={l.name}>
-                <Label label={l} key={l.name} />
+                <Label label={l} key={l.name} maxWidth="25ch" />
               </li>
             ))}
           </ul>
diff --git a/webui/src/pages/bug/LabelChange.tsx b/webui/src/pages/bug/LabelChange.tsx
index c40636c1..fd466ab8 100644
--- a/webui/src/pages/bug/LabelChange.tsx
+++ b/webui/src/pages/bug/LabelChange.tsx
@@ -30,12 +30,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} />
+        <Label key={index} label={label} maxWidth="50ch" />
       ))}
       {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} />
+        <Label key={index} label={label} maxWidth="50ch" />
       ))}
       <span>
         {' '}
diff --git a/webui/src/pages/list/BugRow.tsx b/webui/src/pages/list/BugRow.tsx
index 190370b0..62f8df97 100644
--- a/webui/src/pages/list/BugRow.tsx
+++ b/webui/src/pages/list/BugRow.tsx
@@ -100,7 +100,7 @@ function BugRow({ bug }: Props) {
               {bug.labels.length > 0 && (
                 <span className={classes.labels}>
                   {bug.labels.map((l) => (
-                    <Label key={l.name} label={l} />
+                    <Label key={l.name} label={l} maxWidth="40ch" />
                   ))}
                 </span>
               )}