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 {
+  > li {
-    border-color: $white-normal;
+    display: flex;
+    align-items: center;
+  }
 
-    .project-full-name {
+  h3 {
-      @include str-truncated;
+    font-size: $gl-font-size;
+  }
 
-      @media (max-width: $screen-xs-max) {
+  a {
-        max-width: 50%;
+    color: $gl-text-color;
-      }
+  }
-    }
 
-    .controls {
+  .avatar-container,
-      line-height: $list-text-height;
+  .controls {
+    flex: 0 0 auto;
+  }
 
-      .badge {
+  .avatar-container {
-        @media (max-width: $screen-xs-max) {
+    align-self: flex-start;
-          display: none;
+  }
-        }
-      }
 
-      a:hover {
+  .project-details {
-        text-decoration: none;
+    min-width: 0;
-      }
 
-      > span {
+    p {
-        margin-left: 10px;
+      @include str-truncated(100%);
-      }
+      margin-bottom: 0;
-
-      svg {
-        position: relative;
-        top: 2px;
-      }
-    }
-
-    .description p {
-      @media (max-width: $screen-xs-max) {
-        max-width: 50%;
-      }
     }
   }
 
-  .bottom {
+  .controls {
-    padding-top: $gl-padding;
+    margin-left: auto;
-    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,44 +10,44 @@
 
 %li.project-row{ class: css_class }
   = cache(cache_key) do
+    - if 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
+                = project.namespace.human_name
+                \/
+            %span.project-name.filter-title
+              = project.name
+
+      - if show_last_commit_as_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.prepend-top-5
+          = markdown_field(project, :description)
+
     .controls
       - if project.archived
-        %span.label.label-warning archived
+        %span.prepend-left-10.label.label-warning archived
       - if project.pipeline_status.has_status?
-        %span
+        %span.prepend-left-10
           = render_project_pipeline_status(project.pipeline_status)
       - if forks
-        %span
+        %span.prepend-left-10
           = icon('code-fork')
           = number_with_delimiter(project.forks_count)
       - if stars
-        %span
+        %span.prepend-left-10
           = icon('star')
           = number_with_delimiter(project.star_count)
-      %span.visibility-icon.has-tooltip{ data: { container: 'body', placement: 'left' }, title: visibility_icon_description(project) }
+      %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)
-
-    .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')
-        %span.project-full-name
-          %span.namespace-name
-            - if project.namespace && !skip_namespace
-              = project.namespace.human_name
-              \/
-          %span.project-name.filter-title
-            = project.name
-
-    - if show_last_commit_as_description
-      .description
-        = link_to_gfm project.commit.title, namespace_project_commit_path(project.namespace, project, project.commit),
-          class: "commit-row-message"
-    - elsif project.description.present?
-      .description
-        = markdown_field(project, :description)

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

@@ -0,0 +1,4 @@
+---
+title: Fixed projects list lines breaking
+merge_request:
+author: