Merge branch '56543-project-lists-further-iteration-improvements' into 'master'

Resolve "Project lists: further iteration & improvements"

Closes #56543

See merge request gitlab-org/gitlab-ce!24855

3 files changed, 12 insertions, 9 deletions

diff --git a/app/assets/javascripts/pages/dashboard/projects/index.js b/app/assets/javascripts/pages/dashboard/projects/index.js
index 8f98be79640..01001d4f3ff 100644
--- a/app/assets/javascripts/pages/dashboard/projects/index.js
+++ b/app/assets/javascripts/pages/dashboard/projects/index.js
@@ -1,7 +1,5 @@
 import ProjectsList from '~/projects_list';
-import Star from '../../../star';
 
 document.addEventListener('DOMContentLoaded', () => {
   new ProjectsList(); // eslint-disable-line no-new
-  new Star('.project-row'); // eslint-disable-line no-new
 });
diff --git a/app/assets/javascripts/pages/explore/projects/index.js b/app/assets/javascripts/pages/explore/projects/index.js
index 8f98be79640..01001d4f3ff 100644
--- a/app/assets/javascripts/pages/explore/projects/index.js
+++ b/app/assets/javascripts/pages/explore/projects/index.js
@@ -1,7 +1,5 @@
 import ProjectsList from '~/projects_list';
-import Star from '../../../star';
 
 document.addEventListener('DOMContentLoaded', () => {
   new ProjectsList(); // eslint-disable-line no-new
-  new Star('.project-row'); // eslint-disable-line no-new
 });
diff --git a/app/assets/stylesheets/pages/projects.scss b/app/assets/stylesheets/pages/projects.scss
index 2342c284a5e..3eb02cd4358 100644
--- a/app/assets/stylesheets/pages/projects.scss
+++ b/app/assets/stylesheets/pages/projects.scss
@@ -946,6 +946,11 @@ pre.light-well {
     .flex-wrapper {
       min-width: 0;
       margin-top: -$gl-padding-8; // negative margin required for flex-wrap
+      flex: 1 1 100%;
+
+      .project-title {
+        line-height: 20px;
+      }
     }
 
     p,
@@ -984,14 +989,16 @@ pre.light-well {
   }
 
   .controls {
-    margin-top: $gl-padding-8;
+    @include media-breakpoint-down(xs) {
+      margin-top: $gl-padding-8;
+    }
 
-    @include media-breakpoint-down(md) {
+    @include media-breakpoint-up(sm) {
       margin-top: 0;
     }
 
-    @include media-breakpoint-down(xs) {
-      margin-top: $gl-padding-8;
+    @include media-breakpoint-up(lg) {
+      flex: 1 1 40%;
     }
 
     .icon-wrapper {
@@ -1041,7 +1048,7 @@ pre.light-well {
       min-height: 40px;
       min-width: 40px;
 
-      .identicon.s64 {
+      .identicon.s48 {
         font-size: 16px;
       }
     }