Mobile UI broken on Community contributions report page

Everyone can contribute. Help move this issue forward while earning points, leveling up and collecting rewards.

Summary

Community contributions report page has multiple layout issues on mobile (broken text below participants section and content overflow).

Steps to reproduce

  • Open the Community contributions report page on mobile
  • Scroll through the Participants section and the Development section
  • You can see that the text box below particpants section is broken and content is overflowing in development section

Example Project

Not project-specific

What is the current bug behavior?

On mobile devices, the page has multiple layout issues:

  • Participants section

    • The container below participants is broken

    • Layout appears misaligned

  • Development section

    • Items inside the Development container overflow horizontally

    • Content does not properly wrap within the available screen width

What is the expected correct behavior?

  • All sections should render correctly within their containers on mobile

  • No UI elements should overflow or break layout on small screens

Relevant logs and/or screenshots

image

Output of checks

This bug happens on GitLab.com

Results of GitLab environment info

Expand for output related to GitLab environment info 
(For installations with omnibus-gitlab package run and paste the output of:
`sudo gitlab-rake gitlab:env:info`)

(For installations from source run and paste the output of:
`sudo -u git -H bundle exec rake gitlab:env:info RAILS_ENV=production`)

Results of GitLab application Check

Expand for output related to the GitLab application check 
(For installations with omnibus-gitlab package run and paste the output of:
sudo gitlab-rake gitlab:check SANITIZE=true)


(For installations from source run and paste the output of:
sudo -u git -H bundle exec rake gitlab:check RAILS_ENV=production SANITIZE=true)


(we will only investigate if the tests are passing)

Possible fixes

Likely related to missing or incorrect responsive CSS rules for the Community contributions report page.

Patch release information for backports

If the bug fix needs to be backported in a patch release to a version under the maintenance policy, please follow the steps on the patch release runbook for GitLab engineers.

Refer to the internal "Release Information" dashboard for information about the next patch release, including the targeted versions, expected release date, and current status.

High-severity bug remediation

To remediate high-severity issues requiring an internal release for single-tenant SaaS instances, refer to the internal release process for engineers.

Edited by 🤖 GitLab Bot 🤖