From 87b739556a72a262fdbf6dd5771c0212e1f6e08a Mon Sep 17 00:00:00 2001
From: sumn2u <sumn2u@gmail.com>
Date: Sat, 6 Jul 2024 08:38:12 -0500
Subject: [PATCH 1/4] increase the input width of the label inputs in the
 configuration.

---
 client/src/ConfigureImageClassification/index.jsx | 5 +++++
 client/src/ConfigureImageSegmentation/index.jsx   | 5 +++++
 2 files changed, 10 insertions(+)

diff --git a/client/src/ConfigureImageClassification/index.jsx b/client/src/ConfigureImageClassification/index.jsx
index 207f7ea..c11529a 100644
--- a/client/src/ConfigureImageClassification/index.jsx
+++ b/client/src/ConfigureImageClassification/index.jsx
@@ -79,6 +79,11 @@ export default ({ config, onChange }) => {
           height: '2.2rem !important',
           minHeight: '2.2rem !important',
           lineHeight: '2.2rem !important',
+        },
+        '@media (min-width: 600px)': {
+          '.MuiInputBase-input': {
+            width: '350px !important',
+          }
         }
       }} />
    
diff --git a/client/src/ConfigureImageSegmentation/index.jsx b/client/src/ConfigureImageSegmentation/index.jsx
index c50acf9..d129a9a 100644
--- a/client/src/ConfigureImageSegmentation/index.jsx
+++ b/client/src/ConfigureImageSegmentation/index.jsx
@@ -86,6 +86,11 @@ export default ({ config, onChange }) => {
             height: '2.2rem !important',
             minHeight: '2.2rem !important',
             lineHeight: '2.2rem !important',
+            },
+            '@media (min-width: 600px)': {
+              '.MuiInputBase-input': {
+                width: '350px !important',
+              }
             }
         }} />
         <Survey

From e1db4810249019876f92024c359072a931132b42 Mon Sep 17 00:00:00 2001
From: sumn2u <sumn2u@gmail.com>
Date: Sat, 6 Jul 2024 08:39:37 -0500
Subject: [PATCH 2/4] fix the label title information

---
 client/src/ConfigureImageClassification/index.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/src/ConfigureImageClassification/index.jsx b/client/src/ConfigureImageClassification/index.jsx
index c11529a..e440124 100644
--- a/client/src/ConfigureImageClassification/index.jsx
+++ b/client/src/ConfigureImageClassification/index.jsx
@@ -37,7 +37,7 @@ export default ({ config, onChange }) => {
           {
             cellType: "text",
             name: "description",
-            title: t("configuration.labels.option.id"),
+            title: t("configuration.labels.option.description"),
           },
         ],
       }

From fa936613b237554bf6ce13fee8307b1fd168cfe6 Mon Sep 17 00:00:00 2001
From: sumn2u <sumn2u@gmail.com>
Date: Sat, 6 Jul 2024 08:46:36 -0500
Subject: [PATCH 3/4] increase the settings container width

---
 client/src/ImageUpload/index.jsx | 2 +-
 client/src/SetupPage/index.jsx   | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/client/src/ImageUpload/index.jsx b/client/src/ImageUpload/index.jsx
index 89f6d89..7f7de82 100644
--- a/client/src/ImageUpload/index.jsx
+++ b/client/src/ImageUpload/index.jsx
@@ -156,7 +156,7 @@ const ImageUpload = ({ onImageUpload, settingsImages }) => {
           flexDirection: 'column',
           borderRadius: '4px',
           minHeight: '200px',
-          width: isSmallDevice ? 'auto': '400px'
+          width: isSmallDevice ? 'auto': '52vw'
         }}
       >
         <input {...getInputProps()} data-testid="file-input" />
diff --git a/client/src/SetupPage/index.jsx b/client/src/SetupPage/index.jsx
index c285109..d3c92c1 100644
--- a/client/src/SetupPage/index.jsx
+++ b/client/src/SetupPage/index.jsx
@@ -153,7 +153,7 @@ export const SetupPage = ({setConfiguration, settings, setShowLabel, showAnnotat
             </Tabs>
           </Box>
             {currentTab === "datatype" && (
-               <Box minWidth="35vw" paddingTop={"2rem"}>
+               <Box minWidth="55vw" paddingTop={"2rem"}>
                   <ConfigurationTask config={settings} onChange={updateTaskInfo} />  
                   <NoteSection 
                   icon={Info} 
@@ -196,7 +196,7 @@ export const SetupPage = ({setConfiguration, settings, setShowLabel, showAnnotat
             )}
             {currentTab === "images" && (
               <>
-               <Box sx={{ padding: '2rem' }} maxWidth={"600px"}>
+               <Box sx={{ padding: '2rem' }} width={"55vw"}>
                 <Typography gutterBottom sx={{ fontWeight: 'bold', color: 'rgb(66, 66, 66)', fontSize: '18px' }}>
                   {t("btn.upload_images")}
                 </Typography>

From f2587e967a4472ec1b8173dd65255cb4670c3762 Mon Sep 17 00:00:00 2001
From: sumn2u <sumn2u@gmail.com>
Date: Sat, 6 Jul 2024 08:59:57 -0500
Subject: [PATCH 4/4] updated design for mobile devices

---
 client/src/ImageUpload/index.jsx | 12 ++++++------
 client/src/SetupPage/index.jsx   |  2 +-
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/client/src/ImageUpload/index.jsx b/client/src/ImageUpload/index.jsx
index 7f7de82..bb6aa53 100644
--- a/client/src/ImageUpload/index.jsx
+++ b/client/src/ImageUpload/index.jsx
@@ -141,12 +141,12 @@ const ImageUpload = ({ onImageUpload, settingsImages }) => {
   });
 
   return (
-    <Box>
+    <>
       <Box
         {...getRootProps()}
         sx={{
           border: '2px dashed #ccc',
-          padding: '1rem',
+          padding: isSmallDevice ? '0.5rem' :'1rem',
           textAlign: 'center',
           cursor: 'pointer',
           marginBottom: '1rem',
@@ -156,7 +156,7 @@ const ImageUpload = ({ onImageUpload, settingsImages }) => {
           flexDirection: 'column',
           borderRadius: '4px',
           minHeight: '200px',
-          width: isSmallDevice ? 'auto': '52vw'
+          width: isSmallDevice ? 'auto': '52vw',
         }}
       >
         <input {...getInputProps()} data-testid="file-input" />
@@ -197,8 +197,8 @@ const ImageUpload = ({ onImageUpload, settingsImages }) => {
               alt="preview"
               onError={() => handleImageError(index)}
               style={{
-                width: '100px',
-                height: '100px',
+                width: isSmallDevice ? '65px' : '82px', 
+                height: isSmallDevice ? '65px' : '82px',
                 objectFit: 'cover',
                 borderRadius: '4px',
                 marginBottom: '0.5rem',
@@ -214,7 +214,7 @@ const ImageUpload = ({ onImageUpload, settingsImages }) => {
           </Box>
         ))}
       </Box>
-    </Box>
+    </>
   );
 };
 
diff --git a/client/src/SetupPage/index.jsx b/client/src/SetupPage/index.jsx
index d3c92c1..8e419e9 100644
--- a/client/src/SetupPage/index.jsx
+++ b/client/src/SetupPage/index.jsx
@@ -196,7 +196,7 @@ export const SetupPage = ({setConfiguration, settings, setShowLabel, showAnnotat
             )}
             {currentTab === "images" && (
               <>
-               <Box sx={{ padding: '2rem' }} width={"55vw"}>
+               <Box sx={{ padding: '2rem' }} width={isSmallDevice ? "auto" : "55vw"}>
                 <Typography gutterBottom sx={{ fontWeight: 'bold', color: 'rgb(66, 66, 66)', fontSize: '18px' }}>
                   {t("btn.upload_images")}
                 </Typography>