Steps to replicate the issue (include links if applicable):

1. Go to the Unified Dashboard on desktop
2. Select an article to expand by translation a new section (section translation)
3. Proceed to the "Compare the contents" step

What happens?:
The header in this step doesn't follow the design specifications as defined in T241589.

What should have happened instead?:
The spacing inside the header should follow the design specifications.

Design:

Screenshot from test wiki (screen size: 648px) (Elements overflow the row's width):

Screenshot from test wiki (screen size: 1090px) (Elements don’t occupy the full available width):

Screenshot from test wiki (screen size: 1256px) (Elements don’t occupy the full available width):

Derived Requirements

1. Ensure Correct Spacing for "Compare the Contents" Header
   • Update the spacing inside the header in the "Compare the Contents" step to match the design specifications from T241589.
   • Ensure that the elements inside the header do not overflow and align properly.

2. Ensure Responsive Behavior on Different Screen Sizes
   • On smaller screens (e.g., 648px width):
     • The elements should not overflow the row’s width.
   • On medium screens (e.g., 1090px width):
     • The elements should occupy the full available width instead of leaving excessive whitespace.
   • On larger screens (e.g., 1256px width):
     • The layout should scale properly without breaking.

3. Match the Design in Figma
   • Ensure the layout follows the specifications in the Compare contents - Header responsive.png design file.
   • Verify that spacing, alignment, and proportions match the intended layout.

Test Steps

Test Case: Verify Header Spacing in the "Compare the Contents" Step

1. Check Header Layout on Small Screens (648px width)
   • Resize the browser window to 648px width.
   • ✅❓❌⬜ AC1: Ensure that elements do not overflow the row’s width.

2. Check Header Layout on Medium Screens (1090px width)
   • Resize the browser window to 1090px width.
   • ✅❓❌⬜ AC2: Ensure that the elements occupy the full available width without unnecessary gaps.

3. Check Header Layout on Large Screens (1256px width)
   • Resize the browser window to 1256px width.
   • ✅❓❌⬜ AC3: Verify that the header scales properly and elements are correctly spaced.

4. Compare Design with Figma Specification
   • ✅❓❌⬜ AC4: Confirm that the header spacing aligns with the design in Compare contents - Header responsive.png.

QA Results - Test Wiki