Text in Dashboard React component is not centered

[xinluleo]

Hi,

I am using the react component in my app as follows:

import { useMemo, useState } from 'react'
import AwsS3 from '@uppy/aws-s3'
import Uppy from '@uppy/core'
import { Dashboard } from '@uppy/react'

import '@uppy/core/dist/style.css'
import '@uppy/dashboard/dist/style.css'

const DocumentUploader = ({ id, setDocumentUrl, _parentRef }) => {
  const uppy = useMemo(() => {
    return new Uppy({
      id: id || 'document-uploader',
      allowMultipleUploadBatches: false,
      restrictions: {
        maxNumberOfFiles: 1,
        allowedFileTypes: ['.pdf'],
      },
      autoProceed: false,
    }).use(AwsS3, {
      async getUploadParameters(file) {
        return {
          method: 'put',
          url: ...,
        }
      },
    })
  }, [])

  uppy.on('upload-success', (file, result) => {
    ...
  })

  React.useEffect(() => {
    return () => uppy.close({ reason: 'unmount' })
  }, [uppy])

  return (
    <Dashboard
      width="100%"
      height={500}
      uppy={uppy}
      locale={{
        strings: {
          browseFiles: 'browse files',
          dropPasteFiles: 'Drag and drop a pdf file here or %{browse}',
        },
      }}
    />
  )
}

Some logic of S3 callback is omitted above for simplicity. The component is rendered inline as:

Does anyone know how to make the text “Drag and drop a pdf file here or browse files” centered in the dashboard? Is this a bug of the react component?

Thanks