Change size and position of QualityInfo in the Player

ui/src/common/QualityInfo.js

@@ -2,11 +2,25 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import Chip from '@material-ui/core/Chip'
 import config from '../config'
+import { makeStyles } from '@material-ui/core'
+import clsx from 'clsx'
 
 const llFormats = new Set(config.losslessFormats.split(','))
 const placeholder = 'N/A'
 
-export const QualityInfo = ({ record, size }) => {
+const useStyle = makeStyles(
+  (theme) => ({
+    chip: {
+      transform: 'scale(0.8)',
+    },
+  }),
+  {
+    name: 'NDQualityInfo',
+  }
+)
+
+export const QualityInfo = ({ record, size, className }) => {
+  const classes = useStyle()
   let { suffix, bitRate } = record
   let info = placeholder
 
@@ -18,12 +32,20 @@ export const QualityInfo = ({ record, size }) => {
     }
   }
 
-  return <Chip variant="outlined" size={size} label={info} />
+  return (
+    <Chip
+      className={clsx(classes.chip, className)}
+      variant="outlined"
+      size={size}
+      label={info}
+    />
+  )
 }
 
 QualityInfo.propTypes = {
   record: PropTypes.object.isRequired,
   size: PropTypes.string,
+  className: PropTypes.string,
 }
 
 QualityInfo.defaultProps = {