fix tag chips

- Make the tag chips height fit the content
- On the tags page, chips no longer wrap; also add some min width to
make mobile editing nicer

Author: Minnowo

ui/src/common/TagChip.tsx

@@ -3,7 +3,7 @@ import * as React from 'react';
 // @ts-ignore
 import bestContrast from 'get-best-contrast-color';
 
-export const TagChip = ({color, label}: {label: string; color: string}) => {
+export const TagChip = ({color, label, style={}}: {label: string; color: string, style?:React.CSSProperties}) => {
     const textColor = bestContrast(color, ['#fff', '#000']);
     return (
         <Chip
@@ -15,8 +15,10 @@ export const TagChip = ({color, label}: {label: string; color: string}) => {
                 color: textColor,
                 cursor: 'text',
                 minHeight: '32px',
+                height: 'fit-content',
                 whiteSpace: 'normal',
                 wordBreak: 'break-word',
+                ... style
             }}
             label={label}
         />

ui/src/tag/TagPage.tsx

@@ -82,16 +82,20 @@ export const TagPage = () => {
                                 }
                             }}
                             onSubmit={onClickSubmit}
+                            style={{ minWidth: 128 }}
                         />
                     ) : (
                         tag.key
                     )}
                 </TableCell>
-                <TableCell>
+                <TableCell style={{minWidth: 128}}>
                     {isEdited ? (
-                        <SliderPicker onChange={(c) => setEditing([editKey, editKeyNew, c.hex])} color={editColor} />
+                        <SliderPicker 
+                        onChange={(c) => setEditing([editKey, editKeyNew, c.hex])} 
+                        color={editColor} 
+                        />
                     ) : (
-                        <TagChip label={tag.color} color={tag.color} />
+                        <TagChip label={tag.color} color={tag.color} style={{wordBreak: "normal"}}/>
                     )}
                 </TableCell>
                 <TableCell align="right">{tag.usages}</TableCell>