From d83f775d061223688f8d808b23dc26d78e11f9f1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Grabowski?= <michal.grabowski@ibexa.co>
Date: Tue, 10 Oct 2023 12:49:56 +0200
Subject: [PATCH] IBX-6725: Autosave notification is in wrong place

---
 .../Resources/public/scss/_edit-header.scss   | 22 ++++++-------------
 .../themes/admin/ui/edit_header.html.twig     |  8 +++----
 2 files changed, 10 insertions(+), 20 deletions(-)

diff --git a/src/bundle/Resources/public/scss/_edit-header.scss b/src/bundle/Resources/public/scss/_edit-header.scss
index 71ad2675a6..47e8d5a20b 100644
--- a/src/bundle/Resources/public/scss/_edit-header.scss
+++ b/src/bundle/Resources/public/scss/_edit-header.scss
@@ -62,6 +62,8 @@
             flex-direction: column;
             justify-content: center;
             padding-left: 0;
+            margin-top: calculateRem(20px);
+            height: calculateRem(48px);
 
             .ibexa-icon {
                 margin-right: calculateRem(8px);
@@ -77,14 +79,6 @@
                 color: $ibexa-color-dark-400;
             }
         }
-
-        &--right {
-            .ibexa-autosave {
-                position: absolute;
-                top: calculateRem(96px);
-                right: calculateRem(64px);
-            }
-        }
     }
 
     &__context-actions {
@@ -110,6 +104,7 @@
         color: $ibexa-color-dark-400;
         opacity: 1;
         transition: all $ibexa-admin-transition-duration $ibexa-admin-transition;
+        margin: 0;
     }
 
     &__subtitle {
@@ -137,8 +132,10 @@
     }
 
     .ibexa-autosave {
-        opacity: 1;
-        transition: all $ibexa-admin-transition-duration $ibexa-admin-transition;
+        display: inline-block;
+        border-left: calculateRem(1px) solid $ibexa-color-light;
+        padding-left: calculateRem(12px);
+        margin-left: calculateRem(12px);
     }
 
     &--slim {
@@ -193,10 +190,5 @@
                 }
             }
         }
-
-        .ibexa-autosave {
-            opacity: 0;
-            height: 0;
-        }
     }
 }
diff --git a/src/bundle/Resources/views/themes/admin/ui/edit_header.html.twig b/src/bundle/Resources/views/themes/admin/ui/edit_header.html.twig
index a760bcc257..06e0850bcf 100644
--- a/src/bundle/Resources/views/themes/admin/ui/edit_header.html.twig
+++ b/src/bundle/Resources/views/themes/admin/ui/edit_header.html.twig
@@ -16,6 +16,9 @@
                         {{ action_object|default('') }}
                         {{ content_type_name|default('') }}
                     </label>
+                    {% if show_autosave_status|default(false) %}
+                        {% include '@ibexadesign/ui/autosave.html.twig' %}
+                    {% endif %}
                 </div>
             </div>
             <div class="col-3 ibexa-edit-header__column ibexa-context-menu-wrapper">
@@ -58,11 +61,6 @@
                     <div class="ibexa-edit-header__subtitle">{{ subtitle }}</div>
                 {% endif %}
             </div>
-            <div class="ibexa-edit-header__column ibexa-edit-header__column--right">
-                {% if show_autosave_status|default(false) %}
-                    {% include '@ibexadesign/ui/autosave.html.twig' %}
-                {% endif %}
-            </div>
             {% if show_extra_bottom_content %}
                 <div class="ibexa-edit-header__extra-bottom-content">
                     {{ block('extra_bottom_content') }}