[FIX] html_editor: correctly position close icon on file upload notification

**Problem**:
The close icon on the file upload notification is misplaced, appearing at the
top-left instead of the expected position on the right.

**Solution**:
Adjust the button's position to appear on the right side of the notification.

**Steps to Reproduce**:
1. Open the Editor.
2. Upload a file.
3. Observe that the close button appears on the top-left instead of the right.

opw-4512322

closes odoo/odoo#195209

Signed-off-by: David Monjoie (dmo) <dmo@odoo.com>

2 files changed, 22 insertions, 5 deletions

diff --git a/addons/html_editor/static/src/main/media/media_dialog/upload_progress_toast/upload_progress_toast.scss b/addons/html_editor/static/src/main/media/media_dialog/upload_progress_toast/upload_progress_toast.scss
index 998ffd9ec92..b6344499f74 100644
--- a/addons/html_editor/static/src/main/media/media_dialog/upload_progress_toast/upload_progress_toast.scss
+++ b/addons/html_editor/static/src/main/media/media_dialog/upload_progress_toast/upload_progress_toast.scss
@@ -7,3 +7,20 @@
         }
     }
 }
+
+$o-notification-max-width-sm: calc(400px - 3rem);
+$button-width: 3rem;
+
+.editor_notification_manager {
+    width: calc(100% - #{$button-width});
+    @include media-breakpoint-up(sm) {
+        width: calc(#{$o-notification-max-width-sm} + #{$button-width});
+    }
+}
+
+.editor_notification_body {
+    width: calc(100% - #{$button-width});
+    @include media-breakpoint-up(sm) {
+        width: $o-notification-max-width-sm;
+    }
+}
diff --git a/addons/html_editor/static/src/main/media/media_dialog/upload_progress_toast/upload_progress_toast.xml b/addons/html_editor/static/src/main/media/media_dialog/upload_progress_toast/upload_progress_toast.xml
index 275077d96b7..340567009ab 100644
--- a/addons/html_editor/static/src/main/media/media_dialog/upload_progress_toast/upload_progress_toast.xml
+++ b/addons/html_editor/static/src/main/media/media_dialog/upload_progress_toast/upload_progress_toast.xml
@@ -9,17 +9,16 @@
         <span t-if="props.uploaded" class="text-success"><i class="fa fa-check my-1 me-1"/> File has been uploaded</span>
         <span t-else="" class="text-danger"><i class="fa fa-times float-start my-1 me-1"/> <span class="o_we_error_text" t-esc="props.errorMessage ? props.errorMessage : 'File could not be saved'"/></span>
     </small>
-    <div t-else="" class="progress">
+    <div t-else="" class="progress mt-2">
         <div class="progress-bar bg-info progress-bar-striped progress-bar-animated" role="progressbar" t-attf-style="width: {{this.progress}}%;" aria-label="Progress bar"><span t-esc="this.progress + '%'"/></div>
     </div>
     <hr/>
 </t>
 
 <t t-name="html_editor.UploadProgressToast">
-    <div class="o_notification_manager o_upload_progress_toast">
-        <div t-if="state.isVisible" class="o_notification position-relative show fade mb-2 border border-info bg-white" role="alert" aria-live="assertive" aria-atomic="true">
-            <button type="button" class="btn btn-close o_notification_close p-2" aria-label="Close" t-on-click="props.close"/>
-            <div class="o_notification_body ps-2 pe-4 py-2">
+    <div class="editor_notification_manager o_notification_manager o_upload_progress_toast">
+        <div t-if="state.isVisible" class="o_notification position-relative show fade mb-2 border border-info bg-white d-flex justify-content-between" role="alert" aria-live="assertive" aria-atomic="true">
+            <div class="editor_notification_body o_notification_body ps-2 py-2">
                 <div class="me-auto o_notification_content">
                     <div t-foreach="state.files" t-as="file" t-key="file" class="o_we_progressbar">
                         <ProgressBar progress="file_value.progress"
@@ -31,6 +30,7 @@
                     </div>
                 </div>
             </div>
+            <button type="button" class="btn btn-close o_notification_close p-2" aria-label="Close" t-on-click="props.close"/>
         </div>
     </div>
 </t>