Merge branch 'project-readme-limited-width' into 'master'

Limit the width of project READMEs

Closes #20919

See merge request !12165

app/assets/stylesheets/framework/files.scss

@@ -12,6 +12,12 @@
 
   &.readme-holder {
     margin: $gl-padding 0;
+
+    &.limited-width-container .file-content {
+      max-width: $limited-layout-width-sm;
+      margin-left: auto;
+      margin-right: auto;
+    }
   }
 
   table {

app/assets/stylesheets/framework/layout.scss

@@ -53,7 +53,7 @@ body {
   }
 
   &.limit-container-width-sm {
-    max-width: 790px;
+    max-width: $limited-layout-width-sm;
   }
 }
 

app/assets/stylesheets/framework/variables.scss

@@ -161,6 +161,7 @@ $progress-color: #c0392b;
 $header-height: 50px;
 $fixed-layout-width: 1280px;
 $limited-layout-width: 990px;
+$limited-layout-width-sm: 790px;
 $gl-avatar-size: 40px;
 $error-exclamation-point: $red-500;
 $border-radius-default: 3px;

app/views/projects/tree/_readme.html.haml

 - if readme.rich_viewer
-  %article.file-holder.readme-holder
+  %article.file-holder.readme-holder{ class: ("limited-width-container" unless fluid_layout) }
     .js-file-title.file-title
       = blob_icon readme.mode, readme.name
       = link_to namespace_project_blob_path(@project.namespace, @project, tree_join(@ref, readme.path)) do

changelogs/unreleased/project-readme-limited-width.yml

+---
+title: Limit the width of the projects README text
+merge_request:
+author: