As part of the work on the MinT for Wiki Readers MVP (T359072), an option to "Explore languages" (T359863) is provided so that users can identify the languages where there is more content available, and which sections are covered. In this way, they can decide which language version to pick to machine translate and learn the most relevant aspects on the topic.

The initial implementation is not supporting the following aspect from the original spec:

The elements on top (comprising the "Header" and the "Access to all languages") are sticky. Scrolling will keep them visible on top.

The mockup below illustrates the sticky behavior for the header:

However, the current implementation does not keep the header sticky as illustrated in the video below:

Derived Requirements

1. Make the Header Sticky for the "Explore Languages" Option
   • Ensure that the header and "Access to all languages" section remain visible while scrolling.
   • Implement the sticky behavior as per the [mockup](Scrolling.png).

2. Ensure Smooth Scrolling Behavior
   • The header should remain fixed at the top without jumping or overlapping content.
   • The scrolling experience should remain seamless across different screen sizes.

3. Maintain UI Consistency with Design Specifications
   • Apply appropriate z-index, padding, and styling to match the intended layout.
   • Ensure the header does not obstruct any interactive elements.

4. Test Across Different Screen Sizes
   • Ensure the sticky behavior works correctly on desktop, tablet, and mobile views.

Test Steps

Test Case: Verify Sticky Header in "Explore Languages" Option

1. Scroll Down and Observe the Header Behavior
   • Slowly scroll down the language list.
   • ✅❓❌⬜ AC1: Ensure the header and "Access to all languages" section remain visible and sticky.

2. Verify Responsiveness on Different Devices
   • Resize the screen to mobile, tablet, and desktop views.
   • ✅❓❌⬜ AC2: Ensure the sticky behavior remains consistent across all screen sizes.

QA Results - Test Wiki