Page MenuHomePhabricator

Main page layout breaks when image height exceeds container height
Open, HighPublic2 Estimated Story PointsBUG REPORT

Description

Description
While testing the Main Page Customization feature, we noticed a layout issue when an image's height in a template on the wiki exceeds the height of its parent container. In such cases, the image overflows outside the container and affects the positioning of subsequent content blocks, causing the columns below to become misaligned.

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?:
The image overflows beyond the bounds of the container, causing the column elements in the following section to shift and become misaligned.

What should have happened instead?:
The image should remain contained within its parent element (or the container should expand appropriately), and the layout of subsequent sections should remain aligned.

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

Screenshot_2026-05-21_at_6.14.03 PM.png (2,094×1,162 px, 569 KB)

Details

Related Changes in GitLab:
TitleReferenceAuthorSource BranchDest Branch
Fix: Contain overflowing images in Main Page templatesrepos/lpl/starterkit-v1!106ngkountasfix/main-page-image-overflow-T429063main
Customize query in GitLab

Event Timeline

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