[FIX]: Solve container width and scroll issue

Author: JinSSJ3

src/components/dropzone/components/Dropzone/Dropzone.scss

@@ -45,7 +45,7 @@
   align-items: center;
   justify-content: center;
   //overflow: hidden;
-  padding: 24px 0;
+ // padding: 24px 0;
   &.drag {
     border: none;
   }
@@ -78,7 +78,7 @@
     cursor: text;
     top: 0;
     display: flex;
-    width: 100%;
+    width: calc(100% - 10px);
     flex-direction: row;
     align-items: center;
     justify-content: flex-end;
@@ -95,7 +95,7 @@
     position: absolute;
     cursor: text;
     bottom: 0;
-    width: 100%;
+    width: calc(100% - 10px);
     display: flex;
     flex-direction: column;
     align-items: flex-start;

src/components/dropzone/components/Dropzone/Dropzone.tsx

@@ -111,11 +111,14 @@ const Dropzone: React.FC<DropzoneProps> = (props: DropzoneProps) => {
   //ClassName for dynamic style
   const [onUploadingStart, setOnUploadingStart] = useState<boolean>(false);
   // const [queueFiles, setQueueFiles] = useState<FileValidated[]>([]);
+  // const offset:number= header && footer? 50: (!header && footer?23:(header && !footer?22:0)) ;
+
   const classNameCreated: string = useDropzoneStyles(
     color,
     backgroundColor,
     disableScroll ? undefined : maxHeight,
-    minHeight
+    minHeight,
+    header && footer ? 50 : !header && footer ? 23 : header && !footer ? 22 : 0
   );
   const finalClassName: string = `dropzone-ui${classNameCreated}${
     isDragging ? ` drag` : ``
@@ -326,9 +329,9 @@ const Dropzone: React.FC<DropzoneProps> = (props: DropzoneProps) => {
       localValidator
     );
     if (!disableRipple) {
-      createRippleFromElement(dz_ui_ripple_ref.current, evt,color as string);
+      createRippleFromElement(dz_ui_ripple_ref.current, evt, color as string);
 
-     // createRipple(evt, color as string);
+      // createRipple(evt, color as string);
     }
     setIsDragging(false);
     handleFilesChange(output);
@@ -417,7 +420,7 @@ const Dropzone: React.FC<DropzoneProps> = (props: DropzoneProps) => {
     let referenceInput = inputRef.current;
     referenceInput?.click();
     if (!disableRipple) {
-      createRippleFromElement(dz_ui_ripple_ref.current,e, color as string);
+      createRippleFromElement(dz_ui_ripple_ref.current, e, color as string);
       //createRipple(e, color as string);
     }
     onClick?.(e);
@@ -465,6 +468,8 @@ const Dropzone: React.FC<DropzoneProps> = (props: DropzoneProps) => {
           style={{
             minHeight: minHeight,
             maxHeight: disableScroll ? undefined : maxHeight,
+            marginBottom: footer ? "23px" : undefined,
+            marginTop: header ? "22px" : undefined,
           }}
           disableScroll={disableScroll}
         >

src/components/dropzone/components/hooks/useDropzoneStyles.ts

@@ -15,25 +15,30 @@ const useDropzoneStyles = (
     color: string | undefined,
     backgroundColor: string | undefined,
     maxHeight: string | undefined,
-    minHeight: string | undefined
+    minHeight: string | undefined,
+    offset: number
 ): string => {
     const [idStyles, setIdStyles] = useState<string>("");
     const [styleInjected, setStyleInjected] = useState<boolean>(false);
     const [classNameCreated, setClassNameCreated] = useState<string>("");
 
     useEffect(() => {
-       /*  const removeStyle = () => {
-            if (styleInjected) {
-                DynamiCSS.removeStyleSheet(idStyles);
-                setStyleInjected(false);
-                setIdStyles("");
-            }
-        }; */
+        /*  const removeStyle = () => {
+             if (styleInjected) {
+                 DynamiCSS.removeStyleSheet(idStyles);
+                 setStyleInjected(false);
+                 setIdStyles("");
+             }
+         }; */
         const handleInserStyle = (
-            color: DropzoneProps["color"],backgroundColor: string | undefined,
+            color: DropzoneProps["color"], backgroundColor: string | undefined,
             maxHeight: string | undefined,
-            minHeight: string | undefined
+            minHeight: string | undefined, 
+            offset: number
         ) => {
+            console.log("offset: ", offset);
+            console.log("result",(offset === 0 || offset === 50) ? "center" : "flex-start");
+            console.log("minHeight",`calc(${minHeight} + ${offset}px)`);
             let styleSheet: DynamicSheet = {
                 id: "dropzone-ui-styles",
                 sheetRules: [
@@ -46,7 +51,9 @@ const useDropzoneStyles = (
                             )}`,
                             backgroundColor: backgroundColor,
                             maxHeight: maxHeight,
-                            minHeight: `calc(${minHeight} + 50px)`
+                            //minHeight: `calc(${minHeight} + 50px)`
+                            minHeight: `calc(${minHeight} + ${offset}px)`,
+                            //justifyContent: (offset === 0 || offset === 50) ? "center" : "flex-start",
                         },
                     },
                     {
@@ -83,12 +90,12 @@ const useDropzoneStyles = (
         };
 
 
-        handleInserStyle(color,backgroundColor, maxHeight,minHeight);
-      /*   return () => {
-            removeStyle();
-        } */
+        handleInserStyle(color, backgroundColor, maxHeight, minHeight, offset);
+        /*   return () => {
+              removeStyle();
+          } */
         // eslint-disable-next-line
-    }, [color, backgroundColor, maxHeight,minHeight]);
+    }, [color, backgroundColor, maxHeight, minHeight, offset]);
 
     return classNameCreated;
 }

src/components/file-item/components/FileItemContainer/FileItemContainer.scss

@@ -17,7 +17,8 @@
   background-color: transparent;
   color: black;
   min-height: 280px;
-  width: 100%;
+  //width: 100%;
+  width: calc(100% - 10px);
   //margin: 100px 0;
   //width: inherit;