Remove unresolved class and fixed height in discussion header

2 files changed, 8 insertions, 19 deletions

diff --git a/app/assets/javascripts/notes/components/noteable_discussion.vue b/app/assets/javascripts/notes/components/noteable_discussion.vue
index 3fbd0a9f715..ac743d9f4b8 100644
--- a/app/assets/javascripts/notes/components/noteable_discussion.vue
+++ b/app/assets/javascripts/notes/components/noteable_discussion.vue
@@ -144,15 +144,6 @@ export default {
 
       return {};
     },
-    componentClassName() {
-      if (this.shouldRenderDiffs) {
-        if (!this.lastUpdatedAt && !this.discussion.resolved) {
-          return 'unresolved';
-        }
-      }
-
-      return '';
-    },
     isExpanded() {
       return this.discussion.expanded || this.alwaysExpanded;
     },
@@ -313,11 +304,11 @@ export default {
 </script>
 
 <template>
-  <timeline-entry-item class="note note-discussion" :class="componentClassName">
+  <timeline-entry-item class="note note-discussion">
     <div class="timeline-content">
       <div :data-discussion-id="discussion.id" class="discussion js-discussion-container">
         <div v-if="shouldRenderDiffs" class="discussion-header note-wrapper">
-          <div v-once class="timeline-icon">
+          <div v-once class="timeline-icon align-self-start flex-shrink-0">
             <user-avatar-link
               v-if="author"
               :link-href="author.path"
@@ -326,7 +317,7 @@ export default {
               :img-size="40"
             />
           </div>
-          <div class="timeline-content">
+          <div class="timeline-content w-100">
             <note-header
               :author="author"
               :created-at="firstNote.created_at"
diff --git a/app/assets/stylesheets/pages/notes.scss b/app/assets/stylesheets/pages/notes.scss
index 7bd1a4138e4..0cf8e4a7314 100644
--- a/app/assets/stylesheets/pages/notes.scss
+++ b/app/assets/stylesheets/pages/notes.scss
@@ -598,7 +598,8 @@ $note-form-margin-left: 72px;
 }
 
 .discussion-header {
-  min-height: 74px;
+  min-height: $line-height-base * 2em;
+  box-sizing: content-box;
 
   .note-header-info {
     padding-bottom: 0;
@@ -608,13 +609,10 @@ $note-form-margin-left: 72px;
     overflow-x: auto;
     overflow-y: hidden;
   }
-}
 
-.unresolved {
-  .discussion-header {
-    .note-header-info {
-      margin-top: $gl-padding-8;
-    }
+  &.note-wrapper {
+    display: flex;
+    align-items: center;
   }
 }