From 8bdd0cd2f7dfe0c8b43fd123943eabe51858e75f Mon Sep 17 00:00:00 2001
From: Hom Yan <yanzhihong23@qq.com>
Date: Fri, 11 Feb 2022 18:09:01 +0800
Subject: [PATCH] fix: file service ui on mobile

---
 packages/plugins/FileService/src/SNSAdaptor/MainDialog.tsx   | 2 +-
 packages/plugins/FileService/src/SNSAdaptor/Preview.tsx      | 1 -
 .../FileService/src/SNSAdaptor/components/FileName.tsx       | 1 -
 .../FileService/src/SNSAdaptor/components/ProgressBar.tsx    | 1 -
 .../plugins/FileService/src/SNSAdaptor/components/Upload.tsx | 1 -
 .../FileService/src/SNSAdaptor/components/UploadDropArea.tsx | 5 ++---
 .../FileService/src/SNSAdaptor/components/Uploaded.tsx       | 3 ++-
 .../FileService/src/SNSAdaptor/components/Uploading.tsx      | 3 +--
 8 files changed, 6 insertions(+), 11 deletions(-)

diff --git a/packages/plugins/FileService/src/SNSAdaptor/MainDialog.tsx b/packages/plugins/FileService/src/SNSAdaptor/MainDialog.tsx
index 37c486754c9d..c416644fe167 100644
--- a/packages/plugins/FileService/src/SNSAdaptor/MainDialog.tsx
+++ b/packages/plugins/FileService/src/SNSAdaptor/MainDialog.tsx
@@ -75,7 +75,7 @@ const FileServiceDialog: React.FC<Props> = (props) => {
             open={props.open}
             title={t.__display_name()}
             onClose={onDecline}>
-            <DialogContent style={{ minWidth: 515 }}>
+            <DialogContent>
                 <Exchange onUploading={setUploading} onInsert={setSelectedFileInfo}>
                     <Entry />
                 </Exchange>
diff --git a/packages/plugins/FileService/src/SNSAdaptor/Preview.tsx b/packages/plugins/FileService/src/SNSAdaptor/Preview.tsx
index 9565a4e8a96d..295211beb8aa 100644
--- a/packages/plugins/FileService/src/SNSAdaptor/Preview.tsx
+++ b/packages/plugins/FileService/src/SNSAdaptor/Preview.tsx
@@ -10,7 +10,6 @@ const useStyles = makeStyles()((theme) => ({
     root: {
         display: 'flex',
         alignItems: 'center',
-        width: 345,
         border: `1px solid ${theme.palette.divider}`,
         boxSizing: 'border-box',
         borderRadius: 12,
diff --git a/packages/plugins/FileService/src/SNSAdaptor/components/FileName.tsx b/packages/plugins/FileService/src/SNSAdaptor/components/FileName.tsx
index b0c9f2b55c08..148ac194d50a 100644
--- a/packages/plugins/FileService/src/SNSAdaptor/components/FileName.tsx
+++ b/packages/plugins/FileService/src/SNSAdaptor/components/FileName.tsx
@@ -10,7 +10,6 @@ const useStyles = makeStyles()((theme) => ({
         overflow: 'hidden',
         textOverflow: 'ellipsis',
         whiteSpace: 'nowrap',
-        maxWidth: 400,
     },
 }))
 
diff --git a/packages/plugins/FileService/src/SNSAdaptor/components/ProgressBar.tsx b/packages/plugins/FileService/src/SNSAdaptor/components/ProgressBar.tsx
index b20d8c4b13c5..031a6b9d4e6a 100644
--- a/packages/plugins/FileService/src/SNSAdaptor/components/ProgressBar.tsx
+++ b/packages/plugins/FileService/src/SNSAdaptor/components/ProgressBar.tsx
@@ -18,7 +18,6 @@ const useStyles = makeStyles()({
         alignItems: 'center',
         flexDirection: 'column',
         justifyContent: 'center',
-        width: 400,
     },
     meta: {
         display: 'flex',
diff --git a/packages/plugins/FileService/src/SNSAdaptor/components/Upload.tsx b/packages/plugins/FileService/src/SNSAdaptor/components/Upload.tsx
index 690d4e4afd39..744ff4450936 100644
--- a/packages/plugins/FileService/src/SNSAdaptor/components/Upload.tsx
+++ b/packages/plugins/FileService/src/SNSAdaptor/components/Upload.tsx
@@ -17,7 +17,6 @@ const useStyles = makeStyles()((theme) => ({
     container: {
         display: 'flex',
         flexDirection: 'column',
-        height: 260,
     },
     upload: {
         flex: 1,
diff --git a/packages/plugins/FileService/src/SNSAdaptor/components/UploadDropArea.tsx b/packages/plugins/FileService/src/SNSAdaptor/components/UploadDropArea.tsx
index c923565fb5f6..387f4d32670d 100644
--- a/packages/plugins/FileService/src/SNSAdaptor/components/UploadDropArea.tsx
+++ b/packages/plugins/FileService/src/SNSAdaptor/components/UploadDropArea.tsx
@@ -21,9 +21,10 @@ const useStyles = makeStyles()((theme) => ({
         padding: 12,
         overflow: 'hidden',
         userSelect: 'none',
+        height: 200,
     },
     here: {
-        fontSize: 14,
+        fontSize: 12,
         lineHeight: 2.5,
         color: theme.palette.grey[100],
         userSelect: 'none',
@@ -60,8 +61,6 @@ const useStyles = makeStyles()((theme) => ({
         zIndex: 1,
     },
     uploader: {
-        position: 'absolute',
-        top: 38,
         userSelect: 'none',
         cursor: 'pointer',
         zIndex: 0,
diff --git a/packages/plugins/FileService/src/SNSAdaptor/components/Uploaded.tsx b/packages/plugins/FileService/src/SNSAdaptor/components/Uploaded.tsx
index f81cb387acfd..3e12c6caeaec 100644
--- a/packages/plugins/FileService/src/SNSAdaptor/components/Uploaded.tsx
+++ b/packages/plugins/FileService/src/SNSAdaptor/components/Uploaded.tsx
@@ -16,6 +16,7 @@ const useStyles = makeStyles()({
         height: 250,
         flexDirection: 'column',
         justifyContent: 'space-between',
+        flexWrap: 'nowrap',
         alignItems: 'center',
         userSelect: 'none',
         paddingTop: 18,
@@ -73,7 +74,7 @@ export const Uploaded: React.FC = () => {
             <Grid item onClick={onPreview}>
                 <File width={96} height={120} />
             </Grid>
-            <Grid item>
+            <Grid item sx={{ width: '100%' }}>
                 <FileName name={state.name} />
                 <Typography component="section" className={classes.meta}>
                     <p className={classes.info}>
diff --git a/packages/plugins/FileService/src/SNSAdaptor/components/Uploading.tsx b/packages/plugins/FileService/src/SNSAdaptor/components/Uploading.tsx
index 7ed8bf8799be..a9303af02391 100644
--- a/packages/plugins/FileService/src/SNSAdaptor/components/Uploading.tsx
+++ b/packages/plugins/FileService/src/SNSAdaptor/components/Uploading.tsx
@@ -31,7 +31,6 @@ const useStyles = makeStyles()({
         overflow: 'hidden',
         textOverflow: 'ellipsis',
         whiteSpace: 'nowrap',
-        width: 400,
     },
 })
 
@@ -119,7 +118,7 @@ export const Uploading: React.FC = () => {
             <Grid item>
                 <File width={96} height={120} />
             </Grid>
-            <Grid item>
+            <Grid item sx={{ width: '100%' }}>
                 <FileName name={state.name} />
                 <ProgressBar preparing={preparing} fileSize={state.size} sendSize={sendSize} startedAt={startedAt} />
             </Grid>