Cut of very long labels with an ellipse

Sascha created 4 years ago

Change summary

webui/src/components/Label.tsx      | 12 ++++++++----
webui/src/pages/bug/Bug.tsx         |  2 +-
webui/src/pages/bug/LabelChange.tsx |  4 ++--
webui/src/pages/list/BugRow.tsx     |  2 +-
4 files changed, 12 insertions(+), 8 deletions(-)

Detailed changes

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>
   );
 }

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>

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

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>
               )}