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

Limit the width of commit & snippet comment sections

Closes #20920

See merge request !12088

7 files changed, 23 insertions, 12 deletions

diff --git a/app/assets/stylesheets/pages/issuable.scss b/app/assets/stylesheets/pages/issuable.scss
index 20f2eec9af5..0d1a360d12c 100644
--- a/app/assets/stylesheets/pages/issuable.scss
+++ b/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;
   }
 
diff --git a/app/views/projects/commit/show.html.haml b/app/views/projects/commit/show.html.haml
index 3a1be3fa4b6..b778e8af121 100644
--- a/app/views/projects/commit/show.html.haml
+++ b/app/views/projects/commit/show.html.haml
@@ -1,6 +1,6 @@
 - @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,7 +13,8 @@
     .block-connector
   = render "projects/diffs/diffs", diffs: @diffs, environment: @environment
 
-  = render "shared/notes/notes_with_form", :autocomplete => true
-  - if can_collaborate_with_project?
-    - %w(revert cherry-pick).each do |type|
-      = render "projects/commit/change", type: type, commit: @commit, title: @commit.title
+  .limited-width-notes
+    = render "shared/notes/notes_with_form", :autocomplete => true
+    - if can_collaborate_with_project?
+      - %w(revert cherry-pick).each do |type|
+        = render "projects/commit/change", type: type, commit: @commit, title: @commit.title
diff --git a/app/views/projects/snippets/show.html.haml b/app/views/projects/snippets/show.html.haml
index 847f3c2f348..d8e448dd2af 100644
--- a/app/views/projects/snippets/show.html.haml
+++ b/app/views/projects/snippets/show.html.haml
@@ -1,3 +1,4 @@
+- @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
diff --git a/app/views/shared/snippets/_header.html.haml b/app/views/shared/snippets/_header.html.haml
index 813d8d69d8d..17b34c5eeb3 100644
--- a/app/views/shared/snippets/_header.html.haml
+++ b/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)
 
diff --git a/app/views/snippets/show.html.haml b/app/views/snippets/show.html.haml
index 216184eb839..8818590362d 100644
--- a/app/views/snippets/show.html.haml
+++ b/app/views/snippets/show.html.haml
@@ -1,3 +1,4 @@
+- @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
diff --git a/changelogs/unreleased/commit-comments-limited-width.yml b/changelogs/unreleased/commit-comments-limited-width.yml
new file mode 100644
index 00000000000..97f50105495
--- /dev/null
+++ b/changelogs/unreleased/commit-comments-limited-width.yml
@@ -0,0 +1,4 @@
+---
+title: Limit commit & snippets comments width
+merge_request:
+author:
diff --git a/spec/views/projects/commit/show.html.haml_spec.rb b/spec/views/projects/commit/show.html.haml_spec.rb
index 122075cc10e..92b4aa12d49 100644
--- a/spec/views/projects/commit/show.html.haml_spec.rb
+++ b/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