Centered Markdown Preview in Web IDE and Set a Max-Width

app/assets/javascripts/vue_shared/components/content_viewer/viewers/markdown_viewer.vue

@@ -111,6 +111,6 @@ export default {
 <template>
   <div ref="markdownPreview" class="md-previewer" data-testid="md-previewer">
     <gl-skeleton-loading v-if="isLoading" />
-    <div v-else class="md" v-html="previewContent"></div>
+    <div v-else class="md gl-ml-auto gl-mr-auto" v-html="previewContent"></div>
   </div>
 </template>

app/assets/stylesheets/page_bundles/ide.scss

@@ -179,6 +179,10 @@ $ide-commit-header-height: 48px;
     overflow: auto;
     padding: $gl-padding;
     background-color: var(--ide-empty-state-background, transparent);
+
+    .md {
+      max-width: $limited-layout-width;
+    }
   }
 
   .file-container {

changelogs/unreleased/webide-markdown-center.yml

+---
+title: Centered Markdown Preview in Web IDE with a set max width to limit the container size
+merge_request: 50291
+author: Mehul Sharma
+type: other