Responsive dialogs

package.json

@@ -51,7 +51,7 @@
     "yup": "^0.32.9"
   },
   "scripts": {
-    "start": "react-scripts start",
+    "start": "react-scripts --openssl-legacy-provider start",
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject",

src/assets/styles/components/_files.scss

@@ -53,16 +53,16 @@
   align-self: flex-start;
 }
 
-.pdf-canvas canvas{
+.pdf-canvas canvas {
   width: 100% !important;
 }
 
-.pg-viewer-wrapper .document-container{
+.pg-viewer-wrapper .document-container {
   width: 100% !important;
   background: none;
 }
 
-.document-container{
+.document-container {
   height: 100%;
 }
 
@@ -71,7 +71,7 @@
   flex-wrap: wrap;
 }
 
-.files-page-categories-responsive{
+.files-page-categories-responsive {
   display: flex;
   flex-wrap: wrap;
 }
@@ -147,6 +147,9 @@
 
 .files-custom-modal {
   width: 500px !important;
+  @include media-below($bp-xl) {
+    width: 250px !important;
+  }
 }
 
 .files-edit-note {
@@ -222,6 +225,9 @@
   display: flex;
   justify-content: flex-end;
   margin-top: 12px;
+  @include media-below($bp-xl) {
+    justify-content: center;
+  }
 }
 
 .files-category-custom-modal-buttons button {

src/assets/styles/components/_modal.scss

@@ -171,7 +171,6 @@ $header-height-mobile: pxToRemMd(74px);
   text-transform: uppercase;
   letter-spacing: 1px !important;
   font-size: 12px !important;
-  min-width: 200px !important;
 }
 
 .dialog-btn:last-of-type{
@@ -199,3 +198,7 @@ $header-height-mobile: pxToRemMd(74px);
     padding: 20px 0px 15px 0px;
   }
 }
+
+.confirm-dialog-responsive h5 {
+  text-align: left !important;
+}

src/components/MUI/ConfirmDialog.js

@@ -60,7 +60,17 @@ const ConfirmDialog = ({
                   }}
                   src={imgSrc}
                 />
-                <h5 style={{ textAlign: "start" }}>{title}</h5>
+                <div className="confirm-dialog-responsive" style={{display: "flex", flexDirection: "column", alignItems: "flex-start"}}>
+                  <h5>{title}</h5>
+
+                  <p
+                    className="dialog-subtitle"
+                    style={{ marginTop: "-10px", wordBreak: "break-word", margin: 0, width: "100%" }}
+                    data-testid="full-screen-elem"
+                  >
+                    | {subtitle}
+                  </p>
+                </div>
                 <div style={{ justifySelf: "stretch", flex: "1" }}></div>
                 <IconButton onClick={onClose}>
                   <img
@@ -72,13 +82,6 @@ const ConfirmDialog = ({
                   />
                 </IconButton>
               </div>
-              <p
-                className="dialog-subtitle"
-                style={{ paddingLeft: "23px", marginTop: "-10px" }}
-                data-testid="full-screen-elem"
-              >
-                | {subtitle}
-              </p>
             </>
           ) : (
             <div