diff --git a/app/assets/javascripts/jobs/components/job_app.vue b/app/assets/javascripts/jobs/components/job_app.vue
index 859f839741f062d681e8d9215d826c4292e33579..809b3d5f57eb9ceee377ce179e790677610eeb65 100644
--- a/app/assets/javascripts/jobs/components/job_app.vue
+++ b/app/assets/javascripts/jobs/components/job_app.vue
@@ -2,9 +2,9 @@
 import _ from 'underscore';
 import { mapGetters, mapState, mapActions } from 'vuex';
 import { GlLoadingIcon } from '@gitlab/ui';
+import { GlBreakpointInstance as bp } from '@gitlab/ui/dist/utils';
 import { isScrolledToBottom } from '~/lib/utils/scroll_utils';
 import { polyfillSticky } from '~/lib/utils/sticky';
-import bp from '~/breakpoints';
 import CiHeader from '~/vue_shared/components/header_ci_component.vue';
 import Callout from '~/vue_shared/components/callout.vue';
 import Icon from '~/vue_shared/components/icon.vue';
@@ -200,7 +200,8 @@ export default {
       this.updateScroll();
     },
     updateSidebar() {
-      if (bp.getBreakpointSize() === 'xs') {
+      const breakpoint = bp.getBreakpointSize();
+      if (breakpoint === 'xs' || breakpoint === 'sm') {
         this.hideSidebar();
       } else if (!this.isSidebarOpen) {
         this.showSidebar();