[resumes][feat] center text in file drop

apps/portal/src/pages/resumes/submit.tsx

@@ -339,7 +339,7 @@ export default function SubmitResumeForm({
                       fileUploadError
                         ? 'border-danger-600'
                         : 'border-slate-300',
-                      'flex cursor-pointer justify-center rounded-md border-2 border-dashed bg-slate-100 py-4',
+                      'cursor-pointer flex-col items-center space-y-1 rounded-md border-2 border-dashed bg-slate-100 py-4 px-4 text-center',
                     )}>
                     <input
                       {...register('file', { required: true })}
@@ -351,29 +351,27 @@ export default function SubmitResumeForm({
                       name="file-upload"
                       type="file"
                     />
-                    <div className="space-y-1 text-center">
-                      {resumeFile == null ? (
-                        <ArrowUpCircleIcon className="text-primary-500 m-auto h-10 w-10" />
-                      ) : (
-                        <p
-                          className="hover:text-primary-600 cursor-pointer underline underline-offset-1"
-                          onClick={onClickDownload}>
-                          {resumeFile.name}
-                        </p>
-                      )}
-                      <label
-                        className="focus-within:ring-primary-500 flex items-center rounded-md text-sm focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-2"
-                        htmlFor="file-upload">
-                        <span className="font-medium">Drop file here</span>
-                        <span className="mr-1 ml-1 font-light">or</span>
-                        <span className="text-primary-600 hover:text-primary-400 cursor-pointer font-medium">
-                          {resumeFile == null ? 'Select file' : 'Replace file'}
-                        </span>
-                      </label>
-                      <p className="text-xs text-slate-500">
-                        PDF up to {FILE_SIZE_LIMIT_MB}MB
+                    {resumeFile == null ? (
+                      <ArrowUpCircleIcon className="text-primary-500 m-auto h-10 w-10" />
+                    ) : (
+                      <p
+                        className="hover:text-primary-600 cursor-pointer underline underline-offset-1"
+                        onClick={onClickDownload}>
+                        {resumeFile.name}
                       </p>
-                    </div>
+                    )}
+                    <label
+                      className="focus-within:ring-primary-500 cursor-pointer text-sm focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-2"
+                      htmlFor="file-upload">
+                      <span className="font-medium">Drop file here</span>
+                      <span className="mr-1 ml-1 font-light">or</span>
+                      <span className="text-primary-600 hover:text-primary-400 font-medium">
+                        {resumeFile == null ? 'Select file' : 'Replace file'}
+                      </span>
+                    </label>
+                    <p className="text-xs text-slate-500">
+                      PDF up to {FILE_SIZE_LIMIT_MB}MB
+                    </p>
                   </div>
                   {fileUploadError && (
                     <p className="text-danger-600 text-sm">{fileUploadError}</p>