Page MenuHomePhabricator

Uneven column heights cause visually misaligned layout
Open, HighPublic2 Estimated Story PointsBUG REPORT

Description

Description
While testing the Main Page Customization feature, we noticed a layout issue when content blocks placed side-by-side contain different amounts of content.

If one column contains significantly more content than the adjacent column, the sections are rendered with mismatched heights. This causes the overall page layout to appear visually unbalanced.

In the example below, the left column is substantially taller than the right column, resulting in an uneven presentation and poor visual consistency.

Steps to replicate the issue (include links if applicable):
Observe the image on the featured image section on the homepage of the Tyap Wikipedia. Also see attached screenshot in the task description.

What happens?:
Columns are rendered at different heights based on their content. The row appears visually uneven, creating an unbalanced layout.

What should have happened instead?:
Columns within the same row should maintain a visually consistent layout. Height differences should not make the page appear misaligned.

Other information (browser name/version, screenshots, etc.):

Screenshot_2026-05-21_at_6.09.37 PM.png (2,154×800 px, 474 KB)

Details

Related Changes in GitLab:
TitleReferenceAuthorSource BranchDest Branch
Fix: Equalize side-by-side column heights on generated Main Pagerepos/lpl/starterkit-v1!107ngkountasfix/uneven-column-heights-T429064main
Customize query in GitLab

Event Timeline

srishakatux set the point value for this task to 2.
srishakatux moved this task from Backlog to Enhancements on the Starter Kit board.
MaryMunyoki raised the priority of this task from Medium to High.Fri, Jul 3, 5:01 PM