Merge branch 'fix-review-bar-component-height' into 'master'

Fix review-bar-component height

See merge request gitlab-org/gitlab!64668

app/assets/javascripts/batch_comments/components/review_bar.vue

@@ -26,7 +26,7 @@ export default {
 </script>
 <template>
   <div v-show="draftsCount > 0">
-    <nav class="review-bar-component">
+    <nav class="review-bar-component" data-testid="review_bar_component">
       <div
         class="review-bar-content d-flex gl-justify-content-end"
         data-qa-selector="review_bar_content"

app/assets/stylesheets/components/batch_comments/review_bar.scss

@@ -2,13 +2,15 @@
   position: fixed;
   bottom: 0;
   left: 0;
-  width: 100%;
-  background: $white;
   z-index: $zindex-dropdown-menu;
-  padding: 7px 0 6px; // to keep aligned with "collapse sidebar" button on the left sidebar
-  border-top: 1px solid $border-color;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: $toggle-sidebar-height;
   padding-left: $contextual-sidebar-width;
   padding-right: $gutter_collapsed_width;
+  background: $white;
+  border-top: 1px solid $border-color;
   transition: padding $sidebar-transition-duration;
 
   .page-with-icon-sidebar & {

spec/features/merge_request/batch_comments_spec.rb

@@ -24,7 +24,7 @@ RSpec.describe 'Merge request > Batch comments', :js do
     end
 
     it 'has review bar' do
-      expect(page).to have_css('.review-bar-component', visible: false)
+      expect(page).to have_selector('[data-testid="review_bar_component"]', visible: false)
     end
 
     it 'adds draft note' do
@@ -32,7 +32,7 @@ RSpec.describe 'Merge request > Batch comments', :js do
 
       expect(find('.draft-note-component')).to have_content('Line is wrong')
 
-      expect(page).to have_css('.review-bar-component')
+      expect(page).to have_selector('[data-testid="review_bar_component"]')
 
       expect(find('.review-bar-content .btn-confirm')).to have_content('1')
     end