From 0330228f3daeee4c9b47e3a6e215de4f7b39bbbb Mon Sep 17 00:00:00 2001 From: Sereza7 Date: Wed, 31 Jan 2024 14:34:00 +0100 Subject: [PATCH] XWIKI-21842: The search bar takes too much width when folded * Replaced the ScaleX transition with a width + padding one. Note: This is a heavier implementation because layout needs to be recalculated multiple times, but we actually want layout to move around depending on the state of the search toggle, so it's worth it. (cherry picked from commit c1cf1a1fa1a620f1e1b3aa5abcd782188cb2893e) --- .../src/main/resources/flamingo/less/action-menus.less | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/xwiki-platform-core/xwiki-platform-flamingo/xwiki-platform-flamingo-skin/xwiki-platform-flamingo-skin-resources/src/main/resources/flamingo/less/action-menus.less b/xwiki-platform-core/xwiki-platform-flamingo/xwiki-platform-flamingo-skin/xwiki-platform-flamingo-skin-resources/src/main/resources/flamingo/less/action-menus.less index 64e76021e457..582fff14e366 100644 --- a/xwiki-platform-core/xwiki-platform-flamingo/xwiki-platform-flamingo-skin/xwiki-platform-flamingo-skin-resources/src/main/resources/flamingo/less/action-menus.less +++ b/xwiki-platform-core/xwiki-platform-flamingo/xwiki-platform-flamingo-skin/xwiki-platform-flamingo-skin-resources/src/main/resources/flamingo/less/action-menus.less @@ -121,8 +121,7 @@ border-radius: 0; border: 0; min-width: 0; - transform-origin: 100% 50%; - transition: transform 300ms ease-in-out; + transition: width 300ms ease-in-out, padding 300ms ease-in-out; width: 200px; // we need to set a width in pixels otherwise the transition is not applied nicely } @@ -144,7 +143,8 @@ } // The input has no width (it's hidden basically, but we need to set the width to 0 to have the nice transition) & + #headerglobalsearchinput { // we need to be that specific to be applied - transform: scaleX(0); + width: 0; + padding: 0; } } }