Merge branch 'commit-comments-limited-width' into 'master'

Limit the width of commit & snippet comment sections

Closes #20920

See merge request !12088

app/assets/stylesheets/pages/issuable.scss

@@ -11,7 +11,9 @@
   .commit-box,
   .info-well,
   .commit-ci-menu,
-  .files-changed {
+  .files-changed,
+  .limited-header-width,
+  .limited-width-notes {
     @extend .fixed-width-container;
   }
 

app/views/projects/commit/show.html.haml

 - @no_container = true
 - container_class = !fluid_layout && diff_view == :inline ? 'container-limited' : ''
-- limited_container_width = fluid_layout || diff_view == :inline ? '' : 'limit-container-width'
+- limited_container_width = fluid_layout ? '' : 'limit-container-width'
 - page_title        "#{@commit.title} (#{@commit.short_id})", "Commits"
 - page_description  @commit.description
 = render "projects/commits/head"
@@ -13,6 +13,7 @@
     .block-connector
   = render "projects/diffs/diffs", diffs: @diffs, environment: @environment
 
+  .limited-width-notes
     = render "shared/notes/notes_with_form", :autocomplete => true
     - if can_collaborate_with_project?
       - %w(revert cherry-pick).each do |type|

app/views/projects/snippets/show.html.haml

+- @content_class = "limit-container-width limited-inner-width-container" unless fluid_layout
 - page_title "#{@snippet.title} (#{@snippet.to_reference})", "Snippets"
 
 = render 'shared/snippets/header'
@@ -9,4 +10,4 @@
   .row-content-block.top-block.content-component-block
     = render 'award_emoji/awards_block', awardable: @snippet, inline: true
 
-  #notes= render "shared/notes/notes_with_form", :autocomplete => true
+  #notes.limited-width-notes= render "shared/notes/notes_with_form", :autocomplete => true

app/views/shared/snippets/_header.html.haml

@@ -16,7 +16,7 @@
     - else
       = render "snippets/actions"
 
-.snippet-header
+.snippet-header.limited-header-width
   %h2.snippet-title.prepend-top-0.append-bottom-0
     = markdown_field(@snippet, :title)
 

app/views/snippets/show.html.haml

+- @content_class = "limit-container-width limited-inner-width-container" unless fluid_layout
 - page_title "#{@snippet.title} (#{@snippet.to_reference})", "Snippets"
 
 = render 'shared/snippets/header'
@@ -9,4 +10,4 @@
   .row-content-block.top-block.content-component-block
     = render 'award_emoji/awards_block', awardable: @snippet, inline: true
 
-  #notes= render "shared/notes/notes_with_form", :autocomplete => false
+  #notes.limited-width-notes= render "shared/notes/notes_with_form", :autocomplete => false

changelogs/unreleased/commit-comments-limited-width.yml

+---
+title: Limit commit & snippets comments width
+merge_request:
+author:

spec/views/projects/commit/show.html.haml_spec.rb

@@ -21,24 +21,26 @@ describe 'projects/commit/show.html.haml', :view do
   context 'inline diff view' do
     before do
       allow(view).to receive(:diff_view).and_return(:inline)
+      allow(view).to receive(:diff_view).and_return(:inline)
 
       render
     end
 
-    it 'keeps container-limited' do
-      expect(rendered).not_to have_selector('.limit-container-width')
+    it 'has limited width' do
+      expect(rendered).to have_selector('.limit-container-width')
     end
   end
 
   context 'parallel diff view' do
     before do
       allow(view).to receive(:diff_view).and_return(:parallel)
+      allow(view).to receive(:fluid_layout).and_return(true)
 
       render
     end
 
     it 'spans full width' do
-      expect(rendered).to have_selector('.limit-container-width')
+      expect(rendered).not_to have_selector('.limit-container-width')
     end
   end
 end