Merge branch '20250123-clavimoniere-MR-sidebar-scrollbar-shown-fix' into 'master'

Take scrollbar width into account when calculating collapsed sidebar

See merge request https://gitlab.com/gitlab-org/gitlab/-/merge_requests/178913



Merged-by: Simon Knox <simon@gitlab.com>
Approved-by: Simon Knox <simon@gitlab.com>
Co-authored-by: Chad Lavimoniere <clavimoniere@gitlab.com>

app/assets/javascripts/right_sidebar.js

@@ -6,7 +6,12 @@ import { hide, fixTitle } from '~/tooltips';
 import { __ } from './locale';
 
 const updateSidebarClasses = (layoutPage, rightSidebar, windowSize = window.innerWidth) => {
-  if (windowSize >= 992) {
+  let scrollBarWidth = 0;
+
+  if (window.innerWidth && document?.documentElement?.clientWidth) {
+    scrollBarWidth = window.innerWidth - document.documentElement.clientWidth;
+  }
+  if (windowSize + scrollBarWidth >= 992) {
     layoutPage.classList.remove('right-sidebar-expanded', 'right-sidebar-collapsed');
     rightSidebar.classList.remove('right-sidebar-collapsed');
     rightSidebar.classList.add('right-sidebar-expanded');

app/views/shared/issuable/_sidebar.html.haml

@@ -11,7 +11,7 @@
 - add_page_specific_style 'page_bundles/labels'
 - sidebar_header_classes = 'md:gl-flex lg:!gl-hidden gl-justify-end' if is_merge_request
 
-%aside.right-sidebar.js-right-sidebar.js-issuable-sidebar{ data: { auto_collapse: true, always_show_toggle: true, signed: { in: signed_in }, issuable_type: issuable_type }, class: "#{sidebar_gutter_collapsed_class(is_merge_request)} #{'right-sidebar-merge-requests' if is_merge_request}", 'aria-live' => 'polite', 'aria-label': issuable_type }
+%aside.right-sidebar.js-right-sidebar.js-issuable-sidebar{ data: { auto_collapse: true, always_show_toggle: true, signed: { in: signed_in }, issuable_type: issuable_type }, class: "#{sidebar_gutter_collapsed_class(is_merge_request)} #{'right-sidebar-merge-requests right-sidebar-collapsed' if is_merge_request}", 'aria-live' => 'polite', 'aria-label': issuable_type }
   .issuable-sidebar{ class: "#{'is-merge-request' if is_merge_request}" }
     .issuable-sidebar-header{ class: sidebar_header_classes }
       = render Pajamas::ButtonComponent.new(button_options: { class: "gutter-toggle gl-float-right js-sidebar-toggle has-tooltip !gl-border-0" , type: 'button', 'aria-label' => _('Toggle sidebar'), title: sidebar_gutter_tooltip_text, data: { container: 'body', placement: 'left', boundary: 'viewport' } }) do