Merge branch '334791-display-correct-container-width' into 'master'

Display correct container width for blobs

See merge request gitlab-org/gitlab!69277

app/assets/javascripts/repository/constants.js

@@ -11,3 +11,5 @@ export const TOGGLE_CREATE_MR_LABEL = __('Start a new merge request with these c
 
 export const COMMIT_MESSAGE_SUBJECT_MAX_LENGTH = 52;
 export const COMMIT_MESSAGE_BODY_MAX_LENGTH = 72;
+
+export const LIMITED_CONTAINER_WIDTH_CLASS = 'limit-container-width';

app/assets/javascripts/repository/pages/blob.vue

@@ -3,11 +3,25 @@
 // https://gitlab.com/gitlab-org/gitlab/-/issues/323200
 
 import BlobContentViewer from '../components/blob_content_viewer.vue';
+import { LIMITED_CONTAINER_WIDTH_CLASS } from '../constants';
 
 export default {
   components: {
     BlobContentViewer,
   },
+  beforeRouteEnter(to, from, next) {
+    next(({ $options }) => {
+      $options.limitedContainerElements.forEach((el) =>
+        el.classList.remove(LIMITED_CONTAINER_WIDTH_CLASS),
+      );
+    });
+  },
+  beforeRouteLeave(to, from, next) {
+    this.$options.limitedContainerElements.forEach((el) =>
+      el.classList.add(LIMITED_CONTAINER_WIDTH_CLASS),
+    );
+    next();
+  },
   props: {
     path: {
       type: String,
@@ -18,6 +32,7 @@ export default {
       required: true,
     },
   },
+  limitedContainerElements: document.querySelectorAll(`.${LIMITED_CONTAINER_WIDTH_CLASS}`),
 };
 </script>