Positioned note-actions absolutely

In order to properly position elements on the small screens as well as
on the larger ones, we should take note-actions out of the document's
flow and position absolutely. This way we can provide proper responsive
behavior for the discussions.

5 files changed, 37 insertions, 18 deletions

diff --git a/app/assets/javascripts/notes/components/note_actions.vue b/app/assets/javascripts/notes/components/note_actions.vue
index c9c40cb6acf..b4afd367c7c 100644
--- a/app/assets/javascripts/notes/components/note_actions.vue
+++ b/app/assets/javascripts/notes/components/note_actions.vue
@@ -121,8 +121,10 @@ export default {
 </script>
 
 <template>
-  <div class="note-actions">
-    <span v-if="accessLevel" class="note-role user-access-role">{{ accessLevel }}</span>
+  <div class="note-actions position-absolute d-inline-flex">
+    <span v-if="accessLevel" class="note-role user-access-role d-none d-sm-inline-block">{{
+      accessLevel
+    }}</span>
     <div v-if="canResolve" class="note-actions-item">
       <button
         ref="resolveButton"
diff --git a/app/assets/javascripts/notes/components/note_header.vue b/app/assets/javascripts/notes/components/note_header.vue
index 5c59c0c32dd..f59c3c0073f 100644
--- a/app/assets/javascripts/notes/components/note_header.vue
+++ b/app/assets/javascripts/notes/components/note_header.vue
@@ -37,6 +37,11 @@ export default {
       required: false,
       default: true,
     },
+    noTruncate: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
   computed: {
     toggleChevronClass() {
@@ -62,7 +67,14 @@ export default {
 </script>
 
 <template>
-  <div class="note-header-info">
+  <div
+    class="note-header-info"
+    :class="{
+      'overflow-hidden': !noTruncate,
+      'text-truncate': !noTruncate,
+      'mr-0': noTruncate,
+    }"
+  >
     <div v-if="includeToggle" class="discussion-actions">
       <button
         class="note-action-button discussion-toggle-button js-vue-toggle-button"
diff --git a/app/assets/javascripts/notes/components/noteable_discussion.vue b/app/assets/javascripts/notes/components/noteable_discussion.vue
index 2c549e7abdd..b9153fce849 100644
--- a/app/assets/javascripts/notes/components/noteable_discussion.vue
+++ b/app/assets/javascripts/notes/components/noteable_discussion.vue
@@ -328,6 +328,7 @@ Please check your network connection and try again.`;
               :note-id="firstNote.id"
               :include-toggle="true"
               :expanded="discussion.expanded"
+              :no-truncate="true"
               @toggleHandler="toggleDiscussionHandler"
             >
               <span v-html="actionText"></span>
diff --git a/app/assets/javascripts/vue_shared/components/notes/system_note.vue b/app/assets/javascripts/vue_shared/components/notes/system_note.vue
index 3c86b7e4c61..4a67e695480 100644
--- a/app/assets/javascripts/vue_shared/components/notes/system_note.vue
+++ b/app/assets/javascripts/vue_shared/components/notes/system_note.vue
@@ -87,7 +87,12 @@ export default {
     <div class="timeline-icon" v-html="iconHtml"></div>
     <div class="timeline-content">
       <div class="note-header">
-        <note-header :author="note.author" :created-at="note.created_at" :note-id="note.id">
+        <note-header
+          :author="note.author"
+          :created-at="note.created_at"
+          :note-id="note.id"
+          :no-truncate="true"
+        >
           <span v-html="actionTextHtml"></span>
         </note-header>
       </div>
diff --git a/app/assets/stylesheets/pages/notes.scss b/app/assets/stylesheets/pages/notes.scss
index 50a8c4345d2..f904d6d68b9 100644
--- a/app/assets/stylesheets/pages/notes.scss
+++ b/app/assets/stylesheets/pages/notes.scss
@@ -549,6 +549,17 @@ $note-form-margin-left: 72px;
   }
 }
 
+.note-header-info {
+  margin-right: 110px;
+
+  @media (min-width: map-get($grid-breakpoints, sm)) {
+    margin-right: 200px;
+  }
+  @media (min-width: map-get($grid-breakpoints, md)) {
+    margin-right: 0;
+  }
+}
+
 .note-header-author-name {
   display: none;
 
@@ -655,21 +666,9 @@ $note-form-margin-left: 72px;
 }
 
 .note-actions {
-  display: flex;
-  align-self: flex-start;
-  flex-shrink: 0;
-  justify-content: flex-end;
-  width: 100%;
-  padding-bottom: $gl-padding-8;
+  top: 0;
+  right: 0;
   color: $gray-600;
-
-  @include media-breakpoint-up(md) {
-    display: inline-flex;
-    align-items: center;
-    width: auto;
-    margin-left: 10px;
-    padding-bottom: 0;
-  }
 }
 
 .more-actions {