Merge branch '55206-discussion-text-alignment' into 'master'

Correctly align resolved discussion text

Closes #55206

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

app/assets/javascripts/notes/components/noteable_discussion.vue

@@ -363,6 +363,7 @@ Please check your network connection and try again.`;
               :img-size="40"
             />
           </div>
+          <div class="timeline-content">
             <note-header
               :author="author"
               :created-at="initialDiscussion.created_at"
@@ -388,6 +389,7 @@ Please check your network connection and try again.`;
               class-name="discussion-headline-light js-discussion-headline"
             />
           </div>
+        </div>
         <div v-if="shouldShowDiscussions" class="discussion-body">
           <component
             :is="wrapperComponent"

app/assets/stylesheets/pages/notes.scss

@@ -550,6 +550,11 @@ $note-form-margin-left: 72px;
   .note-header-info {
     padding-bottom: 0;
   }
+
+  .timeline-content {
+    overflow-x: auto;
+    overflow-y: hidden;
+  }
 }
 
 .unresolved {
@@ -597,7 +602,6 @@ $note-form-margin-left: 72px;
 
 .note-headline-meta {
   display: inline-block;
-  white-space: nowrap;
 
   .system-note-message {
     white-space: normal;
@@ -607,6 +611,10 @@ $note-form-margin-left: 72px;
     color: $gl-text-color-disabled;
   }
 
+  .note-timestamp {
+    white-space: nowrap;
+  }
+
   a:hover {
     text-decoration: underline;
   }