diff --git a/app/assets/javascripts/monitoring/components/charts/time_series.vue b/app/assets/javascripts/monitoring/components/charts/time_series.vue
index 78fe575717a..434debb67f5 100644
--- a/app/assets/javascripts/monitoring/components/charts/time_series.vue
+++ b/app/assets/javascripts/monitoring/components/charts/time_series.vue
@@ -1,17 +1,15 @@
 <script>
 import { s__, __ } from '~/locale';
-import { GlLink, GlButton, GlTooltip } from '@gitlab/ui';
+import { GlLink, GlButton, GlTooltip, GlResizeObserverDirective } from '@gitlab/ui';
 import { GlAreaChart, GlLineChart, GlChartSeriesLabel } from '@gitlab/ui/dist/charts';
 import dateFormat from 'dateformat';
-import { debounceByAnimationFrame, roundOffFloat } from '~/lib/utils/common_utils';
+import { roundOffFloat } from '~/lib/utils/common_utils';
 import { getSvgIconPathContent } from '~/lib/utils/icon_utils';
 import Icon from '~/vue_shared/components/icon.vue';
 import { chartHeight, graphTypes, lineTypes, symbolSizes, dateFormats } from '../../constants';
 import { makeDataSeries } from '~/helpers/monitor_helper';
 import { graphDataValidatorForValues } from '../../utils';
 
-let debouncedResize;
-
 export default {
   components: {
     GlAreaChart,
@@ -22,6 +20,9 @@ export default {
     GlLink,
     Icon,
   },
+  directives: {
+    GlResizeObserverDirective,
+  },
   inheritAttrs: false,
   props: {
     graphData: {
@@ -29,10 +30,6 @@ export default {
       required: true,
       validator: graphDataValidatorForValues.bind(null, false),
     },
-    containerWidth: {
-      type: Number,
-      required: true,
-    },
     deploymentData: {
       type: Array,
       required: false,
@@ -206,21 +203,13 @@ export default {
       return `${this.graphData.y_label}`;
     },
   },
-  watch: {
-    containerWidth: 'onResize',
-  },
   mounted() {
     const graphTitleEl = this.$refs.graphTitle;
     if (graphTitleEl && graphTitleEl.scrollWidth > graphTitleEl.offsetWidth) {
       this.showTitleTooltip = true;
     }
   },
-  beforeDestroy() {
-    window.removeEventListener('resize', debouncedResize);
-  },
   created() {
-    debouncedResize = debounceByAnimationFrame(this.onResize);
-    window.addEventListener('resize', debouncedResize);
     this.setSvg('rocket');
     this.setSvg('scroll-handle');
   },
@@ -276,7 +265,7 @@ export default {
 </script>
 
 <template>
-  <div class="prometheus-graph">
+  <div v-gl-resize-observer-directive="onResize" class="prometheus-graph">
     <div class="prometheus-graph-header">
       <h5
         ref="graphTitle"
diff --git a/app/assets/javascripts/monitoring/components/dashboard.vue b/app/assets/javascripts/monitoring/components/dashboard.vue
index b4ea415bb51..725af920691 100644
--- a/app/assets/javascripts/monitoring/components/dashboard.vue
+++ b/app/assets/javascripts/monitoring/components/dashboard.vue
@@ -22,12 +22,9 @@ import MonitorTimeSeriesChart from './charts/time_series.vue';
 import MonitorSingleStatChart from './charts/single_stat.vue';
 import GraphGroup from './graph_group.vue';
 import EmptyState from './empty_state.vue';
-import { sidebarAnimationDuration } from '../constants';
 import TrackEventDirective from '~/vue_shared/directives/track_event';
 import { getTimeDiff, isValidDate, downloadCSVOptions, generateLinkToChartOptions } from '../utils';
 
-let sidebarMutationObserver;
-
 export default {
   components: {
     VueDraggable,
@@ -167,7 +164,6 @@ export default {
   data() {
     return {
       state: 'gettingStarted',
-      elWidth: 0,
       formIsValid: null,
       selectedTimeWindow: {},
       isRearrangingPanels: false,
@@ -214,11 +210,6 @@ export default {
       projectPath: this.projectPath,
     });
   },
-  beforeDestroy() {
-    if (sidebarMutationObserver) {
-      sidebarMutationObserver.disconnect();
-    }
-  },
   mounted() {
     if (!this.hasMetrics) {
       this.setGettingStartedEmptyState();
@@ -239,13 +230,6 @@ export default {
       } else {
         this.fetchData(range);
       }
-
-      sidebarMutationObserver = new MutationObserver(this.onSidebarMutation);
-      sidebarMutationObserver.observe(document.querySelector('.layout-page'), {
-        attributes: true,
-        childList: false,
-        subtree: false,
-      });
     }
   },
   methods: {
@@ -306,11 +290,6 @@ export default {
     hideAddMetricModal() {
       this.$refs.addMetricModal.hide();
     },
-    onSidebarMutation() {
-      setTimeout(() => {
-        this.elWidth = this.$el.clientWidth;
-      }, sidebarAnimationDuration);
-    },
     toggleRearrangingPanels() {
       this.isRearrangingPanels = !this.isRearrangingPanels;
     },
@@ -503,7 +482,6 @@ export default {
                     generateLink(groupData.group, graphData.title, graphData.y_label)
                   "
                   :graph-data="graphData"
-                  :dashboard-width="elWidth"
                   :alerts-endpoint="alertsEndpoint"
                   :prometheus-alerts-available="prometheusAlertsAvailable"
                   :index="`${index}-${graphIndex}`"
@@ -520,7 +498,6 @@ export default {
             :graph-data="graphData"
             :deployment-data="deploymentData"
             :thresholds="getGraphAlertValues(graphData.queries)"
-            :container-width="elWidth"
             :project-path="projectPath"
             group-id="monitor-time-series-chart"
           >
diff --git a/app/assets/javascripts/monitoring/components/graph_group.vue b/app/assets/javascripts/monitoring/components/graph_group.vue
index ee3a2bae79b..3cb6ccb64b1 100644
--- a/app/assets/javascripts/monitoring/components/graph_group.vue
+++ b/app/assets/javascripts/monitoring/components/graph_group.vue
@@ -45,7 +45,7 @@ export default {
   <div v-if="showPanels" class="card prometheus-panel">
     <div class="card-header d-flex align-items-center">
       <h4 class="flex-grow-1">{{ name }}</h4>
-      <a role="button" @click="collapse">
+      <a role="button" class="js-graph-group-toggle" @click="collapse">
         <icon :size="16" :aria-label="__('Toggle collapse')" :name="caretIcon" />
       </a>
     </div>
diff --git a/app/assets/javascripts/monitoring/components/panel_type.vue b/app/assets/javascripts/monitoring/components/panel_type.vue
index 1a14d06f4c8..2c56966f120 100644
--- a/app/assets/javascripts/monitoring/components/panel_type.vue
+++ b/app/assets/javascripts/monitoring/components/panel_type.vue
@@ -40,10 +40,6 @@ export default {
       type: Object,
       required: true,
     },
-    dashboardWidth: {
-      type: Number,
-      required: true,
-    },
     index: {
       type: String,
       required: false,
@@ -103,7 +99,6 @@ export default {
     :deployment-data="deploymentData"
     :project-path="projectPath"
     :thresholds="getGraphAlertValues(graphData.queries)"
-    :container-width="dashboardWidth"
     group-id="monitor-area-chart"
   >
     <div class="d-flex align-items-center">
diff --git a/changelogs/unreleased/33268-updated-operations-metrics-charts-do-not-load-properly.yml b/changelogs/unreleased/33268-updated-operations-metrics-charts-do-not-load-properly.yml
new file mode 100644
index 00000000000..e1a24404372
--- /dev/null
+++ b/changelogs/unreleased/33268-updated-operations-metrics-charts-do-not-load-properly.yml
@@ -0,0 +1,5 @@
+---
+title: Fix empty chart in collapsed sections
+merge_request: 18699
+author:
+type: fixed
diff --git a/changelogs/unreleased/jlenny-master-patch-21737.yml b/changelogs/unreleased/jlenny-master-patch-21737.yml
new file mode 100644
index 00000000000..f1c5b3a8645
--- /dev/null
+++ b/changelogs/unreleased/jlenny-master-patch-21737.yml
@@ -0,0 +1,5 @@
+---
+title: Improve clarity of text for merge train position
+merge_request: 19031
+author:
+type: changed
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index 7eb6d211cb7..07d54a9a696 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -20040,9 +20040,6 @@ msgstr ""
 msgid "mrWidget|%{metricsLinkStart} Memory %{metricsLinkEnd} usage is %{emphasisStart} unchanged %{emphasisEnd} at %{memoryFrom}MB"
 msgstr ""
 
-msgid "mrWidget|Added to the merge train at position %{mergeTrainPosition}"
-msgstr ""
-
 msgid "mrWidget|Added to the merge train by"
 msgstr ""
 
@@ -20124,6 +20121,9 @@ msgstr ""
 msgid "mrWidget|If the %{missingBranchName} branch exists in your local repository, you can merge this merge request manually using the command line"
 msgstr ""
 
+msgid "mrWidget|In the merge train at position %{mergeTrainPosition}"
+msgstr ""
+
 msgid "mrWidget|Loading deployment statistics"
 msgstr ""
 
diff --git a/spec/javascripts/monitoring/components/dashboard_spec.js b/spec/javascripts/monitoring/components/dashboard_spec.js
index 75df2ce3103..be7ab24185d 100644
--- a/spec/javascripts/monitoring/components/dashboard_spec.js
+++ b/spec/javascripts/monitoring/components/dashboard_spec.js
@@ -539,42 +539,67 @@ describe('Dashboard', () => {
     });
   });
 
-  describe('when the window resizes', () => {
+  describe('responds to window resizes', () => {
+    let promPanel;
+    let promGroup;
+    let panelToggle;
+    let chart;
     beforeEach(() => {
       mock.onGet(mockApiEndpoint).reply(200, metricsGroupsAPIResponse);
-      jasmine.clock().install();
-    });
 
-    afterEach(() => {
-      jasmine.clock().uninstall();
-    });
-
-    it('sets elWidth to page width when the sidebar is resized', done => {
       component = new DashboardComponent({
         el: document.querySelector('.prometheus-graphs'),
         propsData: {
           ...propsData,
           hasMetrics: true,
-          showPanels: false,
+          showPanels: true,
         },
         store,
       });
 
-      expect(component.elWidth).toEqual(0);
+      component.$store.dispatch('monitoringDashboard/setFeatureFlags', {
+        prometheusEndpoint: false,
+      });
 
-      const pageLayoutEl = document.querySelector('.layout-page');
-      pageLayoutEl.classList.add('page-with-icon-sidebar');
+      component.$store.commit(
+        `monitoringDashboard/${types.RECEIVE_ENVIRONMENTS_DATA_SUCCESS}`,
+        environmentData,
+      );
 
-      Vue.nextTick()
-        .then(() => {
-          jasmine.clock().tick(1000);
-          return Vue.nextTick();
-        })
-        .then(() => {
-          expect(component.elWidth).toEqual(pageLayoutEl.clientWidth);
-          done();
-        })
-        .catch(done.fail);
+      component.$store.commit(
+        `monitoringDashboard/${types.RECEIVE_METRICS_DATA_SUCCESS}`,
+        singleGroupResponse,
+      );
+
+      component.$store.commit(
+        `monitoringDashboard/${types.SET_ALL_DASHBOARDS}`,
+        dashboardGitResponse,
+      );
+
+      return Vue.nextTick().then(() => {
+        promPanel = component.$el.querySelector('.prometheus-panel');
+        promGroup = promPanel.querySelector('.prometheus-graph-group');
+        panelToggle = promPanel.querySelector('.js-graph-group-toggle');
+        chart = promGroup.querySelector('.position-relative svg');
+      });
+    });
+
+    it('setting chart size to zero when panel group is hidden', () => {
+      expect(promGroup.style.display).toBe('');
+      expect(chart.clientWidth).toBeGreaterThan(0);
+
+      panelToggle.click();
+      return Vue.nextTick().then(() => {
+        expect(promGroup.style.display).toBe('none');
+        expect(chart.clientWidth).toBe(0);
+        promPanel.style.width = '500px';
+      });
+    });
+
+    it('expanding chart panel group after resize displays chart', () => {
+      panelToggle.click();
+
+      expect(chart.clientWidth).toBeGreaterThan(0);
     });
   });
 
diff --git a/spec/presenters/ci/bridge_presenter_spec.rb b/spec/presenters/ci/bridge_presenter_spec.rb
index 986818a7b9e..1c2eeced20c 100644
--- a/spec/presenters/ci/bridge_presenter_spec.rb
+++ b/spec/presenters/ci/bridge_presenter_spec.rb
@@ -1,3 +1,5 @@
+# frozen_string_literal: true
+
 require 'spec_helper'
 
 describe Ci::BridgePresenter do
diff --git a/spec/presenters/ci/build_presenter_spec.rb b/spec/presenters/ci/build_presenter_spec.rb
index e202f7a9b5f..11f96962075 100644
--- a/spec/presenters/ci/build_presenter_spec.rb
+++ b/spec/presenters/ci/build_presenter_spec.rb
@@ -1,3 +1,5 @@
+# frozen_string_literal: true
+
 require 'spec_helper'
 
 describe Ci::BuildPresenter do
diff --git a/spec/presenters/ci/build_runner_presenter_spec.rb b/spec/presenters/ci/build_runner_presenter_spec.rb
index fa8791f2257..017e94d04f1 100644
--- a/spec/presenters/ci/build_runner_presenter_spec.rb
+++ b/spec/presenters/ci/build_runner_presenter_spec.rb
@@ -1,3 +1,5 @@
+# frozen_string_literal: true
+
 require 'spec_helper'
 
 describe Ci::BuildRunnerPresenter do
diff --git a/spec/presenters/ci/group_variable_presenter_spec.rb b/spec/presenters/ci/group_variable_presenter_spec.rb
index cb58a757564..3b81a425f5b 100644
--- a/spec/presenters/ci/group_variable_presenter_spec.rb
+++ b/spec/presenters/ci/group_variable_presenter_spec.rb
@@ -1,3 +1,5 @@
+# frozen_string_literal: true
+
 require 'spec_helper'
 
 describe Ci::GroupVariablePresenter do
diff --git a/spec/presenters/ci/pipeline_presenter_spec.rb b/spec/presenters/ci/pipeline_presenter_spec.rb
index 8cfcd9befb3..eca5d3e05fe 100644
--- a/spec/presenters/ci/pipeline_presenter_spec.rb
+++ b/spec/presenters/ci/pipeline_presenter_spec.rb
@@ -1,3 +1,5 @@
+# frozen_string_literal: true
+
 require 'spec_helper'
 
 describe Ci::PipelinePresenter do
diff --git a/spec/presenters/ci/trigger_presenter_spec.rb b/spec/presenters/ci/trigger_presenter_spec.rb
index 231b539c188..ac3967f4f77 100644
--- a/spec/presenters/ci/trigger_presenter_spec.rb
+++ b/spec/presenters/ci/trigger_presenter_spec.rb
@@ -1,3 +1,5 @@
+# frozen_string_literal: true
+
 require 'spec_helper'
 
 describe Ci::TriggerPresenter do
diff --git a/spec/presenters/ci/variable_presenter_spec.rb b/spec/presenters/ci/variable_presenter_spec.rb
index e3ce88372ea..70cf2f539b6 100644
--- a/spec/presenters/ci/variable_presenter_spec.rb
+++ b/spec/presenters/ci/variable_presenter_spec.rb
@@ -1,3 +1,5 @@
+# frozen_string_literal: true
+
 require 'spec_helper'
 
 describe Ci::VariablePresenter do
diff --git a/spec/presenters/clusters/cluster_presenter_spec.rb b/spec/presenters/clusters/cluster_presenter_spec.rb
index 6b988e2645b..8bc5374f2db 100644
--- a/spec/presenters/clusters/cluster_presenter_spec.rb
+++ b/spec/presenters/clusters/cluster_presenter_spec.rb
@@ -1,3 +1,5 @@
+# frozen_string_literal: true
+
 require 'spec_helper'
 
 describe Clusters::ClusterPresenter do
diff --git a/spec/presenters/commit_status_presenter_spec.rb b/spec/presenters/commit_status_presenter_spec.rb
index 2b7742ddbb8..b02497d4c11 100644
--- a/spec/presenters/commit_status_presenter_spec.rb
+++ b/spec/presenters/commit_status_presenter_spec.rb
@@ -1,3 +1,5 @@
+# frozen_string_literal: true
+
 require 'spec_helper'
 
 describe CommitStatusPresenter do
diff --git a/spec/presenters/conversational_development_index/metric_presenter_spec.rb b/spec/presenters/conversational_development_index/metric_presenter_spec.rb
index b8b68a676e6..ac18d5203e5 100644
--- a/spec/presenters/conversational_development_index/metric_presenter_spec.rb
+++ b/spec/presenters/conversational_development_index/metric_presenter_spec.rb
@@ -1,3 +1,5 @@
+# frozen_string_literal: true
+
 require 'spec_helper'
 
 describe ConversationalDevelopmentIndex::MetricPresenter do
diff --git a/spec/presenters/group_member_presenter_spec.rb b/spec/presenters/group_member_presenter_spec.rb
index bb66523a83d..382b1881ab7 100644
--- a/spec/presenters/group_member_presenter_spec.rb
+++ b/spec/presenters/group_member_presenter_spec.rb
@@ -1,3 +1,5 @@
+# frozen_string_literal: true
+
 require 'spec_helper'
 
 describe GroupMemberPresenter do
diff --git a/spec/presenters/merge_request_presenter_spec.rb b/spec/presenters/merge_request_presenter_spec.rb
index 6408b0bd748..ce437090d43 100644
--- a/spec/presenters/merge_request_presenter_spec.rb
+++ b/spec/presenters/merge_request_presenter_spec.rb
@@ -1,3 +1,5 @@
+# frozen_string_literal: true
+
 require 'spec_helper'
 
 describe MergeRequestPresenter do
diff --git a/spec/presenters/project_member_presenter_spec.rb b/spec/presenters/project_member_presenter_spec.rb
index 73ef113a1c5..743c89fc7c2 100644
--- a/spec/presenters/project_member_presenter_spec.rb
+++ b/spec/presenters/project_member_presenter_spec.rb
@@ -1,3 +1,5 @@
+# frozen_string_literal: true
+
 require 'spec_helper'
 
 describe ProjectMemberPresenter do
diff --git a/spec/presenters/project_presenter_spec.rb b/spec/presenters/project_presenter_spec.rb
index 2a00548c2c3..87345270100 100644
--- a/spec/presenters/project_presenter_spec.rb
+++ b/spec/presenters/project_presenter_spec.rb
@@ -1,3 +1,5 @@
+# frozen_string_literal: true
+
 require 'spec_helper'
 
 describe ProjectPresenter do
diff --git a/spec/presenters/projects/settings/deploy_keys_presenter_spec.rb b/spec/presenters/projects/settings/deploy_keys_presenter_spec.rb
index b4bf39f3cdb..de58733c8ea 100644
--- a/spec/presenters/projects/settings/deploy_keys_presenter_spec.rb
+++ b/spec/presenters/projects/settings/deploy_keys_presenter_spec.rb
@@ -1,3 +1,5 @@
+# frozen_string_literal: true
+
 require 'spec_helper'
 
 describe Projects::Settings::DeployKeysPresenter do