Keep headers in page editor sidepanels sticky

• Type: Bug
• Status: Closed
• Resolution: Fixed
• Affects Version/s: Master
• Fix Version/s: 7.4.3.40 CE GA40, Master
• Component/s: Pages > Page Editor
• Labels:
  • 7.4.13-u40
• Fix Priority: 3
• Git Pull Request: https://github.com/liferay-echo/liferay-portal/pull/9304, https://github.com/liferay-echo/liferay-portal/pull/9339
• Bug Type: UX / Visual - Desktop

When we are editing a page in page editor, the side panel headers should be sticky when we are scrolling.

This means that for all side panels:

• Section header, Search bar and Tabs should stay sticky while scrolling.
• The content below will be the only scrollable area.
• For sections without tabs, we will add a line/separator on scroll. This will make clear the separation between header and scrollable content.
• This header should be 54px height.
• Separator color is same as tab component line.

 

� Steps to reproduce:

1. Edit a page.
2. Go to any of the sections in the side panel.
3. The sidepanel should have enough scroll to check this behavior.

❌ Current behavior:

All the content in sidepanel is scrolling.

 

✅ Expected behavior:

Header, search bar and tabs should not scroll.