Cut of very long labels with an ellipse

1 files changed, 8 insertions, 4 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>
   );
 }