format and minWidth on devices page

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, style={}}: {label: string; color: string, style?:React.CSSProperties}) => {
+export const TagChip = ({color, label, style = {}}: {label: string; color: string; style?: React.CSSProperties}) => {
     const textColor = bestContrast(color, ['#fff', '#000']);
     return (
         <Chip
@@ -18,7 +18,7 @@ export const TagChip = ({color, label, style={}}: {label: string; color: string,
                 height: 'fit-content',
                 whiteSpace: 'normal',
                 wordBreak: 'break-word',
-                ... style
+                ...style,
             }}
             label={label}
         />

ui/src/devices/DevicesPage.tsx

@@ -84,13 +84,14 @@ export const DevicesPage = () => {
                                 }
                             }}
                             onSubmit={onClickSubmit}
+                            style={{minWidth: 128}}
                         />
                     ) : (
                         device.name + (isCurrent ? ' (current)' : '')
                     )}
                 </TableCell>
                 <TableCell title={device.createdAt}>{moment(device.createdAt).fromNow()}</TableCell>
-                <TableCell title={device.type}>
+                <TableCell title={device.type} style={{minWidth: 128}}>
                     {isEdited ? (
                         <Select
                             value={editDeviceType}

ui/src/tag/TagPage.tsx

@@ -82,20 +82,17 @@ export const TagPage = () => {
                                 }
                             }}
                             onSubmit={onClickSubmit}
-                            style={{ minWidth: 128 }}
+                            style={{minWidth: 128}}
                         />
                     ) : (
                         tag.key
                     )}
                 </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} style={{wordBreak: "normal"}}/>
+                        <TagChip label={tag.color} color={tag.color} style={{wordBreak: 'normal'}} />
                     )}
                 </TableCell>
                 <TableCell align="right">{tag.usages}</TableCell>