Merge branch '49110-update-mr-widget-styles' into 'master'

Resolve "Follow up to "Styling of the MR widget's info and pipeline sections""

Closes #49110

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

1 files changed, 21 insertions, 18 deletions

diff --git a/app/assets/stylesheets/pages/merge_requests.scss b/app/assets/stylesheets/pages/merge_requests.scss
index 5631d943984..7b8cad254c7 100644
--- a/app/assets/stylesheets/pages/merge_requests.scss
+++ b/app/assets/stylesheets/pages/merge_requests.scss
@@ -195,6 +195,7 @@
     .ci-widget-content {
       display: flex;
       align-items: center;
+      flex: 1;
     }
   }
 
@@ -222,6 +223,7 @@
 
   .normal {
     flex: 1;
+    flex-basis: auto;
   }
 
   .capitalize {
@@ -235,22 +237,23 @@
     font-weight: normal;
     overflow: hidden;
     word-break: break-all;
+  }
 
-    &.label-truncated {
-      position: relative;
-      display: inline-block;
-      width: 250px;
-      margin-bottom: -3px;
-      white-space: nowrap;
-      text-overflow: clip;
-      line-height: 14px;
-
-      &::after {
-        position: absolute;
-        content: '...';
-        right: 0;
-        font-family: $regular-font;
-        background-color: $gray-light;
+  .deploy-link,
+  .label-branch {
+    &.label-truncate {
+      // NOTE: This selector targets its children because some of the HTML comes from
+      // 'source_branch_link'. Once this external HTML is no longer used, we could
+      // simplify this.
+      > a,
+      > span {
+        display: inline-block;
+        max-width: 12.5em;
+        margin-bottom: -3px;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        line-height: 14px;
+        overflow: hidden;
       }
     }
   }
@@ -582,7 +585,7 @@
 
     @include media-breakpoint-down(md) {
       flex-direction: column;
-      align-items: flex-start;
+      align-items: stretch;
 
       .branch-actions {
         margin-top: 16px;
@@ -593,13 +596,13 @@
       .branch-actions {
         align-self: center;
         margin-left: $gl-padding;
+        white-space: nowrap;
       }
     }
   }
 
   .diverged-commits-count {
     color: $gl-text-color-secondary;
-    font-size: 12px;
   }
 }
 
@@ -918,7 +921,7 @@
   flex: 1;
   flex-direction: row;
 
-  @include media-breakpoint-down(md) {
+  @include media-breakpoint-down(sm) {
     flex-direction: column;
 
     .stage-cell .stage-container {