Skip to content
Snippets Groups Projects

Prevent links in project descriptions from making project rows too wide

What does this MR do and why?

When project descriptions contain links, they can cause the rows on a user's contributed projects page to get too wide.

Screenshots or screen recordings

Viewport size Before After
xs (<576px) unaffected unaffected
sm (>=576px)
(note that the content is wider than the viewport)
gitlab.com_users_pgascouvaillancourt_contributed__2_ gitlab.com_users_pgascouvaillancourt_contributed__9_
md (>=768px)
(note that the content is wider than the viewport)
gitlab.com_users_pgascouvaillancourt_contributed__3_ gitlab.com_users_pgascouvaillancourt_contributed__8_
lg (>=992px) gitlab.com_users_pgascouvaillancourt_contributed__4_ gitlab.com_users_pgascouvaillancourt_contributed__7_
xl (>=1200px) gitlab.com_users_pgascouvaillancourt_contributed__5_ gitlab.com_users_pgascouvaillancourt_contributed__6_

How to set up and validate locally

Note that this bug is very difficult to reproduce with test data. This bug depends on a combination of data conditions:

  • There must be a long link in the project description
  • The project must have a lot of activity -- this makes the width of the last column in the table that contains star, fork, MR and issue counts wider.

One reliable way to reproduce this is to apply the following patch to fake this data:

Patch
diff --git a/app/views/shared/projects/_project.html.haml b/app/views/shared/projects/_project.html.haml
index f21e41b33146..2995fc15d6b3 100644
--- a/app/views/shared/projects/_project.html.haml
+++ b/app/views/shared/projects/_project.html.haml
@@ -63,7 +63,8 @@
           = link_to_markdown(project.commit.title, project_commit_path(project, project.commit), class: "commit-row-message")
       - elsif project.description.present?
         .description.gl-hidden.sm:gl-block.gl-overflow-hidden.gl-mr-3.gl-mt-2.gl-text-sm
-          = markdown_field(project, :description)
+          -# = markdown_field(project, :description)
+          = link_to "https://gitlab.com/gitlab-org/release/docs/-/blob/master/general/security/engineer.md", "https://gitlab.com/gitlab-org/release/docs/-/blob/master/general/security/engineer.md"
 
       - if project.topics.any?
         .gl-mt-2
@@ -100,19 +101,23 @@
       - if stars
         = link_to project_starrers_path(project), class: "#{css_metadata_classes} stars", title: _('Stars'), data: { container: 'body', placement: 'top' } do
           = sprite_icon('star-o', size: 14, css_class: 'gl-mr-2')
-          = badge_count(project.star_count)
+          -# = badge_count(project.star_count)
+          = 999
       - if show_count?(disabled: !forks, compact_mode: compact_mode)
         = link_to project_forks_path(project), class: "#{css_metadata_classes} forks", title: _('Forks'), data: { container: 'body', placement: 'top' } do
           = sprite_icon('fork', size: 14, css_class: 'gl-mr-2')
-          = badge_count(project.forks_count)
+          -# = badge_count(project.forks_count)
+          = 999
       - if show_count?(disabled: !merge_requests, compact_mode: compact_mode)
         = link_to project_merge_requests_path(project), class: "#{css_metadata_classes} merge-requests", title: _('Merge requests'), data: { container: 'body', placement: 'top' } do
           = sprite_icon('merge-request', size: 14, css_class: 'gl-mr-2')
-          = badge_count(project.open_merge_requests_count)
+          -# = badge_count(project.open_merge_requests_count)
+          = 999
       - if show_count?(disabled: !issues, compact_mode: compact_mode)
         = link_to project_issues_path(project), class: "#{css_metadata_classes} issues", title: _('Issues'), data: { container: 'body', placement: 'top' } do
           = sprite_icon('issues', size: 14, css_class: 'gl-mr-2')
-          = badge_count(project.open_issues_count)
+          -# = badge_count(project.open_issues_count)
+          = 999
       = render_if_exists 'shared/projects/actions', project: project
     .updated-note.gl-text-sm.gl-whitespace-nowrap.gl-justify-end
       %span
  1. Check out this branch
  2. Apply the patch above
  3. Visit http://gdk.test:3000/users/root/contributed in the gdk (or any user's contributed page in the GDK)
  4. Use devtools to resize your viewport to exact breakpoints like 768, 992, and 1200
  5. You will see that at these smallest possible widths for a given breakpoint range, the layout of the list of projects is not broken
  6. Freely resize the width of the viewport, you should not be able to find a size range where the links cause a layout issue

Related to #474921 (closed)

Edited by Chad Lavimoniere

Merge request reports

Loading
Loading

Activity

Filter activity
  • Approvals
  • Assignees & reviewers
  • Comments (from bots)
  • Comments (from users)
  • Commits & branches
  • Edits
  • Labels
  • Lock status
  • Mentions
  • Merge request status
  • Tracking
Please register or sign in to reply
Loading