Responsivity Styled Panel

app/static/app/js/components/NewTaskPanel.jsx

@@ -153,7 +153,7 @@ class NewTaskPanel extends React.Component {
 
             {this.state.editTaskFormLoaded && this.props.showResize ?
               <div>
-                <div className="form-group resize-images-container" style={{display: "block"}}>
+                <div className="form-group resize-images-container">
                   <label className="col-sm-2 control-label">{_("Resize Images")}</label>
                   <div className="col-sm-10">
                       <div className="btn-group">

app/static/app/js/css/EditTaskForm.scss

@@ -48,9 +48,6 @@
     }
 
     .form-group {
-        display: flex;
-        justify-content: center;
-        align-items: center;
         width: 100%;
     }
     
@@ -85,5 +82,11 @@
     .fa-tag {
         color: #14A5A2;
         transform: scale(1.2);
+        transition: all 0.5s;
+    }
+
+    .fa-tag:hover {
+        color: #0d7e7c;
+        transform: scale(1.3);
     }
 }

app/static/app/js/css/NewTaskPanel.scss

@@ -60,7 +60,7 @@
     }
     
     .resize-images-container {
-        display: flex;
+        display: block;
         flex-wrap: wrap;
 
         .col-sm-10 {
@@ -135,4 +135,40 @@
         justify-content: space-between;
         outline: none;
     }
+
+    @media (max-width: 600px) {
+        .resize-images-container {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+
+            .col-sm-10 {
+                width: 100%;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+            }
+        }
+
+        .files-text {
+            font-size: 15px;
+            text-align: center;
+        }
+    
+        .resize-control {
+            width: 100%;
+        }
+    
+        .btn-confirm {
+            padding: 15px 20px;
+        }
+
+        .btn-danger {
+            padding: 10px 15px;
+        }
+
+        .text-right {
+            justify-content: center;
+        }
+    }
 }