Fix segmented control in file header for markdown files

app/assets/javascripts/blob/viewer/index.js

@@ -132,16 +132,16 @@ export default class BlobViewer {
     const newViewer = this.$fileHolder[0].querySelector(`.blob-viewer[data-type='${name}']`);
     if (this.activeViewer === newViewer) return;
 
-    const oldButton = document.querySelector('.js-blob-viewer-switch-btn.active');
+    const oldButton = document.querySelector('.js-blob-viewer-switch-btn.selected');
     const newButton = document.querySelector(`.js-blob-viewer-switch-btn[data-viewer='${name}']`);
     const oldViewer = this.$fileHolder[0].querySelector(`.blob-viewer:not([data-type='${name}'])`);
 
     if (oldButton) {
-      oldButton.classList.remove('active');
+      oldButton.classList.remove('selected');
     }
 
     if (newButton) {
-      newButton.classList.add('active');
+      newButton.classList.add('selected');
       newButton.blur();
     }
 

app/views/projects/blob/_viewer_switcher.html.haml

@@ -8,5 +8,5 @@
       = sprite_icon(simple_viewer.switcher_icon)
 
     - rich_label = "Display #{rich_viewer.switcher_title}"
-    %button.btn.gl-button.btn-default.btn-sm.js-blob-viewer-switch-btn.has-tooltip{ 'aria-label' => rich_label, title: rich_label, data: { viewer: 'rich', container: 'body' } }>
+    %button.btn.gl-button.btn-default.btn-sm.js-blob-viewer-switch-btn.gl-mr-3.has-tooltip{ 'aria-label' => rich_label, title: rich_label, data: { viewer: 'rich', container: 'body' } }>
       = sprite_icon(rich_viewer.switcher_icon)

changelogs/unreleased/290597-segmented-control-in-file-header-for-markdown-files-does-not-have-.yml

+---
+title: Fix margin and selected state in file header
+merge_request: 49059
+author:
+type: fixed

spec/frontend/blob/viewer/index_spec.js

@@ -154,7 +154,7 @@ describe('Blob viewer', () => {
 
       blob.switchToViewer('simple');
 
-      expect(simpleBtn.classList.contains('active')).toBeTruthy();
+      expect(simpleBtn.classList.contains('selected')).toBeTruthy();
 
       expect(simpleBtn.blur).toHaveBeenCalled();
     });