From 8c0841ca7162b4abc13e620fb71aa29546e77dd4 Mon Sep 17 00:00:00 2001
From: Tsu-ba-me <ynho.li.aa.e@gmail.com>
Date: Fri, 21 Jan 2022 15:09:02 -0500
Subject: [PATCH] fix(striker-ui): align upload progress in file upload form

---
 .../components/Files/FileUploadForm.tsx       | 20 +++++++++++++++----
 1 file changed, 16 insertions(+), 4 deletions(-)

diff --git a/striker-ui/components/Files/FileUploadForm.tsx b/striker-ui/components/Files/FileUploadForm.tsx
index db17ddd1..33ab2a46 100644
--- a/striker-ui/components/Files/FileUploadForm.tsx
+++ b/striker-ui/components/Files/FileUploadForm.tsx
@@ -158,12 +158,24 @@ const FileUploadForm = (
         {inUploadFiles.map(({ fileName, progressValue }) => (
           <Box
             key={`in-upload-${fileName}`}
-            sx={{ display: 'flex', flexDirection: 'row' }}
+            sx={{
+              alignItems: { md: 'center' },
+              display: 'flex',
+              flexDirection: { xs: 'column', md: 'row' },
+              '& > :first-child': {
+                minWidth: 100,
+                overflow: 'hidden',
+                overflowWrap: 'normal',
+                textOverflow: 'ellipsis',
+                whiteSpace: 'nowrap',
+                width: { xs: '100%', md: 200 },
+                wordBreak: 'keep-all',
+              },
+              '& > :last-child': { flexGrow: 1 },
+            }}
           >
             <BodyText text={fileName} />
-            <Box sx={{ flexGrow: 1 }}>
-              <ProgressBar progressPercentage={progressValue} />
-            </Box>
+            <ProgressBar progressPercentage={progressValue} />
           </Box>
         ))}
         {selectedFiles.map(