Fix horizontal overflow on work item page at mobile viewports

skkzshrequested to merge
gitlab-community/gitlab-org/gitlab:skkzsh/work-item-mobile-overflow into master

What does this MR do and why?

Fixes #602337 (closed).

Cause

Likely introduced by Add DetailLayout component to work items detail... (!233018 - merged).

.gl-detail-layout-container always applies display: grid. Below 992px, however, no grid-template-columns is specified, so the column width is determined automatically by the content.

When wide or unwrappable content such as the Development widget is present, the grid stretches beyond its parent container. The parent's overflow-x: hidden then clips the right side, with no horizontal scroll available:

work-item-devtools-before

MR pages do not have this issue because they switch to display: block on mobile.

Changes

Add grid-template-columns: minmax(0, 1fr) below the lg breakpoint (992px), constraining the grid column to the parent's width instead of the content.

Screenshots

Visually verified that right-side clipping is resolved using Chrome DevTools mobile emulation:

work-item-devtools-after

DevTools-only verification

Verified by injecting the equivalent CSS directly in DevTools, not via SCSS compilation.

Notes

I do not work on the frontend regularly, so feel free to adjust the CSS as needed.

MR acceptance checklist

Evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.

Edited by skkzsh

Merge request reports