Fixes project list lines breaking

This will only hapen in certain situations ie. when the star count is a
lot. We were previously fixing it by hard coding a max-width.

This changes it to use flexbox which allows the content to decide when
it should be truncated. The rows don't always need truncating, so we
shouldn't hard code a width.

Closes #29018

app/assets/stylesheets/pages/projects.scss

@@ -582,54 +582,54 @@ pre.light-well {
 /*
  * Projects list rendered on dashboard and user page
  */
-
 .projects-list {
   @include basic-list;
+  display: flex;
+  flex-direction: column;
 
-  .project-row {
-    border-color: $white-normal;
-
-    .project-full-name {
-      @include str-truncated;
+  > li {
+    display: flex;
+    align-items: center;
+  }
 
-      @media (max-width: $screen-xs-max) {
-        max-width: 50%;
+  h3 {
+    font-size: $gl-font-size;
   }
+
+  a {
+    color: $gl-text-color;
   }
 
+  .avatar-container,
   .controls {
-      line-height: $list-text-height;
-
-      .badge {
-        @media (max-width: $screen-xs-max) {
-          display: none;
-        }
+    flex: 0 0 auto;
   }
 
-      a:hover {
-        text-decoration: none;
+  .avatar-container {
+    align-self: flex-start;
   }
 
-      > span {
-        margin-left: 10px;
-      }
+  .project-details {
+    min-width: 0;
 
-      svg {
-        position: relative;
-        top: 2px;
+    p {
+      @include str-truncated(100%);
+      margin-bottom: 0;
     }
   }
 
-    .description p {
-      @media (max-width: $screen-xs-max) {
-        max-width: 50%;
-      }
-    }
+  .controls {
+    margin-left: auto;
   }
 
-  .bottom {
-    padding-top: $gl-padding;
-    padding-bottom: 0;
+  .ci-status-link {
+    display: inline-block;
+    line-height: 17px;
+    vertical-align: middle;
+
+    &:hover {
+      text-decoration: none;
+    }
   }
 }
 

app/views/shared/projects/_list.html.haml

@@ -10,7 +10,7 @@
 
 .js-projects-list-holder
   - if projects.any?
-    %ul.projects-list.content-list
+    %ul.projects-list
       - projects.each_with_index do |project, i|
         - css_class = (i >= projects_limit) ? 'hide' : nil
         = render "shared/projects/project", project: project, skip_namespace: skip_namespace,

app/views/shared/projects/_project.html.haml

@@ -10,32 +10,15 @@
 
 %li.project-row{ class: css_class }
   = cache(cache_key) do
-    .controls
-      - if project.archived
-        %span.label.label-warning archived
-      - if project.pipeline_status.has_status?
-        %span
-          = render_project_pipeline_status(project.pipeline_status)
-      - if forks
-        %span
-          = icon('code-fork')
-          = number_with_delimiter(project.forks_count)
-      - if stars
-        %span
-          = icon('star')
-          = number_with_delimiter(project.star_count)
-      %span.visibility-icon.has-tooltip{ data: { container: 'body', placement: 'left' }, title: visibility_icon_description(project) }
-        = visibility_level_icon(project.visibility_level, fw: true)
-
-    .title
-      = link_to project_path(project), class: dom_class(project) do
     - if avatar
-          .dash-project-avatar
       .avatar-container.s40
         - if use_creator_avatar
           = image_tag avatar_icon(project.creator.email, 40), class: "avatar s40", alt:''
         - else
           = project_icon(project, alt: '', class: 'avatar project-avatar s40')
+    .project-details
+      %h3.prepend-top-0.append-bottom-0
+        = link_to project_path(project), class: dom_class(project) do
           %span.project-full-name
             %span.namespace-name
               - if project.namespace && !skip_namespace
@@ -45,9 +28,26 @@
               = project.name
 
       - if show_last_commit_as_description
-      .description
+        .description.prepend-top-5
           = link_to_gfm project.commit.title, namespace_project_commit_path(project.namespace, project, project.commit),
             class: "commit-row-message"
       - elsif project.description.present?
-      .description
+        .description.prepend-top-5
           = markdown_field(project, :description)
+
+    .controls
+      - if project.archived
+        %span.prepend-left-10.label.label-warning archived
+      - if project.pipeline_status.has_status?
+        %span.prepend-left-10
+          = render_project_pipeline_status(project.pipeline_status)
+      - if forks
+        %span.prepend-left-10
+          = icon('code-fork')
+          = number_with_delimiter(project.forks_count)
+      - if stars
+        %span.prepend-left-10
+          = icon('star')
+          = number_with_delimiter(project.star_count)
+      %span.prepend-left-10.visibility-icon.has-tooltip{ data: { container: 'body', placement: 'left' }, title: visibility_icon_description(project) }
+        = visibility_level_icon(project.visibility_level, fw: true)

changelogs/unreleased/projects-list-line-breaks.yml

+---
+title: Fixed projects list lines breaking
+merge_request:
+author: