From 4603c9d626cbb9a90481bdc996f3357493e816ca Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Grabowski?= <michal.grabowski@ibexa.co>
Date: Thu, 16 Jul 2026 13:32:54 +0200
Subject: [PATCH] IBX-12103: Changed styles for back to top on enter page

---
 .../public/js/scripts/admin.back.to.top.js        |  4 +++-
 .../Resources/public/scss/_back-to-top.scss       | 15 ++++++++++-----
 2 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/src/bundle/Resources/public/js/scripts/admin.back.to.top.js b/src/bundle/Resources/public/js/scripts/admin.back.to.top.js
index f57bb5119b..f21ee0d775 100644
--- a/src/bundle/Resources/public/js/scripts/admin.back.to.top.js
+++ b/src/bundle/Resources/public/js/scripts/admin.back.to.top.js
@@ -16,11 +16,13 @@
         return backToTopBtn.classList.contains('ibexa-back-to-top__btn--visible');
     };
     let currentBackToTopAnchorHeight = backToTopAnchor.offsetHeight;
+    const AT_TOP_THRESHOLD = 4;
     const setBackToTopBtnVisibility = (container) => {
-        const shouldBeVisible = container.scrollTop !== 0;
+        const shouldBeVisible = container.scrollTop > AT_TOP_THRESHOLD;
 
         if (backToTopBtn.classList.contains('ibexa-back-to-top__btn--visible') && !shouldBeVisible) {
             backToTopBtn.classList.remove('ibexa-back-to-top__btn--visible');
+            ibexa.quickAction.recalculateButtonsLayout();
         }
 
         if (!backToTopBtn.classList.contains('ibexa-back-to-top__btn--visible') && shouldBeVisible) {
diff --git a/src/bundle/Resources/public/scss/_back-to-top.scss b/src/bundle/Resources/public/scss/_back-to-top.scss
index 18d3476c7d..e8bf402cae 100644
--- a/src/bundle/Resources/public/scss/_back-to-top.scss
+++ b/src/bundle/Resources/public/scss/_back-to-top.scss
@@ -7,14 +7,15 @@
         min-width: calculateRem(62px);
         border-radius: calculateRem(31px);
         padding: calculateRem(15px) calculateRem(18px);
-        display: flex;
         justify-content: center;
         align-items: center;
         background-color: $ibexa-color-white;
-        opacity: 0;
-        visibility: hidden;
-        transition: opacity $ibexa-admin-transition-duration $ibexa-admin-transition;
         box-shadow: $ibexa-edit-header-box-shadow;
+        display: none;
+        opacity: 0;
+        transition:
+            opacity $ibexa-admin-transition-duration $ibexa-admin-transition,
+            display $ibexa-admin-transition-duration $ibexa-admin-transition allow-discrete;
 
         &:hover {
             .ibexa-back-to-top__title {
@@ -23,8 +24,12 @@
         }
 
         &--visible {
+            display: flex;
             opacity: 1;
-            visibility: visible;
+
+            @starting-style {
+                opacity: 0;
+            }
         }
     }