Multiple Ui improvements (#5349)

* PLT-5277 - Adjusting textbox on tablet view

* PLT-5277 - Adjusting text area on mobile view

* PLT-5097 - Updating styles for remove image

* PLT-5217 - Updating styles for mobile code block

3 files changed, 28 insertions, 53 deletions

diff --git a/webapp/sass/components/_files.scss b/webapp/sass/components/_files.scss
index f4911ef8e..906c5e273 100644
--- a/webapp/sass/components/_files.scss
+++ b/webapp/sass/components/_files.scss
@@ -20,24 +20,6 @@
     position: relative;
     width: 120px;
 
-    &:after {
-        @include opacity(0);
-        @include alpha-property(background, $black, .4);
-        content: '';
-        height: 100%;
-        left: 0;
-        opacity: 0;
-        position: absolute;
-        top: 0;
-        width: 100%;
-    }
-
-    &:hover {
-        &:after {
-            @include opacity(1);
-        }
-    }
-
     &:first-child {
         margin-left: 0;
     }
@@ -60,21 +42,24 @@
 }
 
 .file-preview__remove {
-    height: 100%;
-    left: 0;
+    background: alpha-color($black, .5);
+    border-radius: 0 0 0 2px;
+    height: 28px;
     position: absolute;
+    right: 0;
+    text-align: center;
     top: 0;
-    width: 100%;
+    width: 28px;
 
     i {
         color: $white;
         cursor: pointer;
         font-size: 16px;
-        opacity: inherit;
-        position: absolute;
-        right: 5px;
+        line-height: 29px;
+        position: relative;
+        right: auto;
         text-shadow: 0 0 3px alpha-color($black, .7);
-        top: 5px;
+        top: auto;
         z-index: 5;
     }
 }
diff --git a/webapp/sass/responsive/_mobile.scss b/webapp/sass/responsive/_mobile.scss
index 0914e2a18..4ce100836 100644
--- a/webapp/sass/responsive/_mobile.scss
+++ b/webapp/sass/responsive/_mobile.scss
@@ -1,6 +1,14 @@
 @charset 'UTF-8';
 
 @media screen and (max-width: 768px) {
+    .post-create__container {
+        padding-bottom: 10px;
+
+        .msg-typing {
+            display: none;
+        }
+    }
+
     .suggestion-list__content {
         max-height: 145px;
     }
@@ -138,6 +146,14 @@
         display: block;
     }
 
+    .post-code {
+        &:hover {
+            .post-code__language {
+                @include opacity(.6);
+            }
+        }
+    }
+
     .backstage-filters {
         display: block;
 
@@ -738,28 +754,6 @@
         margin-top: 0;
     }
 
-    .file-preview__remove {
-        @include alpha-property(background, $black, .5);
-        height: 28px;
-        left: auto;
-        right: 0;
-        text-align: center;
-        top: 0;
-        width: 28px;
-
-        &:after {
-            display: none;
-        }
-
-        i {
-            font-size: 16px;
-            line-height: 29px;
-            position: relative;
-            right: auto;
-            top: auto;
-        }
-    }
-
     // Since system console is not responsive we're overriding bootstrap styles for it
     .admin-sidebar {
         .navbar-nav {
diff --git a/webapp/sass/responsive/_tablet.scss b/webapp/sass/responsive/_tablet.scss
index f8ca019e0..96a71694f 100644
--- a/webapp/sass/responsive/_tablet.scss
+++ b/webapp/sass/responsive/_tablet.scss
@@ -22,15 +22,11 @@
 
     .post-create__container {
         form {
-            padding: .5em 0;
+            padding: .5em 0 0;
         }
 
         .post-create-footer {
-            padding: 0 45px 0 45px;
-
-            .msg-typing {
-                display: none;
-            }
+            padding: 0 45px;
 
             .post-error {
                 position: relative;