Fix oppia#21987: Resolve mobile thumbnail modal glitch issue in blog post editor. (oppia#22036)

* resolve mobile UI glitch in blog post thumbnail upload

* resolve mobile UI glitch in blog post thumbnail upload

* resolve mobile UI glitch in blog post thumbnail upload

* improve button UI

* update mobile screenshots for blog editor error message on duplicate titles

* adjust failureTrigger increment in puppeteer utils

* update

* update

Author: ojasvi004

core/templates/components/forms/custom-forms-directives/image-receiver.component.html

@@ -92,7 +92,7 @@
     border-radius: 2px;
     bottom: 6px;
     cursor: pointer;
-    display: inline;
+    display: inline-block;
     font-size: 16px;
     font-weight: normal;
     padding: 4px 8px;
@@ -126,7 +126,7 @@
   .image-receiver-error-message {
     color: red;
     display: inline-block;
-    font-size: 16;
+    font-size: 16px;
     padding: 4px;
   }
 
@@ -157,38 +157,59 @@
     width: 100%;
   }
 
-  @media(max-width:768px) {
+  @media (max-width: 768px) {
     .mat-icon {
       font-size: 30px;
       height: 30px;
       width: 30px;
     }
 
-    .font-weight-light {
-      font-size: 12px;
-      font-weight: 300 !important;
-    }
-
     .image-receiver-license-warning {
-      bottom: 50px;
+      bottom: auto;
+      left: auto;
+      margin: 10px auto;
+      padding: 8px;
+      position: relative;
+      right: auto;
+      width: calc(100% - 20px);
     }
 
     .image-receiver-drop-area {
-      padding-top: 8px;
-      text-align: left;
+      align-items: center;
+      display: flex;
+      flex-direction: column;
+      height: auto;
+      justify-content: flex-start;
+      min-height: 320px;
+      padding: 15px 10px;
     }
 
-    label.image-receiver-upload-label-button {
-      left: 8px;
-      right: auto;
+    .image-receiver-text {
+      font-size: 14px;
+      margin: 10px 0;
     }
 
-    .image-receiver-drop-area.image-receiver-is-narrow {
-      height: 35px;
+    .image-upload-instructions {
+      padding-left: 15px;
+    }
+
+    .image-upload-instructions li {
+      margin-bottom: 3px;
+    }
+
+    label.image-receiver-upload-label-button {
+      bottom: auto;
+      display: block;
+      margin: 10px auto;
+      max-width: 200px;
+      position: relative;
+      right: auto;
+      width: 80%;
     }
 
     .image-receiver-error-message {
       font-size: 10px;
+      margin: 5px 0;
     }
 
     .image-receiver-error-message i {

core/templates/pages/blog-dashboard-page/modal-templates/upload-blog-post-thumbnail.component.html

@@ -89,8 +89,20 @@
 
     .narrow-image-uploader {
       padding-left: 0;
-      padding-top: 10px
+      padding-top: 10px;
     }
-  }
 
+    .btn-secondary.e2e-test-photo-upload-cancel,
+    .btn-success.e2e-test-photo-upload-submit {
+      align-items: center;
+      display: flex;
+      font-size: 12px;
+      height: 45px;
+      justify-content: center;
+      padding: 7px;
+      text-align: center;
+      white-space: nowrap;
+      width: 130px;
+    }
+  }
 </style>

core/tests/puppeteer-acceptance-tests/specs/blog-editor/dev-mobile-screenshots/blogEditorPageWithErrorMessageForDuplicateBlogPostTitle-snap.png

@@ -733,7 +733,7 @@ export class BaseUser {
       } else {
         dirName = '/dev-mobile-screenshots';
       }
-      failureTrigger += 0.042;
+      failureTrigger += 0.048;
       if (await currentPage.$(backgroundBanner)) {
         failureTrigger += 0.0352;
       } else if (await currentPage.$(libraryBanner)) {