1 files changed, 14 insertions, 3 deletions
diff --git a/app/assets/javascripts/packages_and_registries/package_registry/components/details/package_title.vue b/app/assets/javascripts/packages_and_registries/package_registry/components/details/package_title.vue
index 65547af3913..44d7807639d 100644
--- a/app/assets/javascripts/packages_and_registries/package_registry/components/details/package_title.vue
+++ b/app/assets/javascripts/packages_and_registries/package_registry/components/details/package_title.vue
@@ -1,5 +1,5 @@
 <script>
-import { GlIcon, GlSprintf, GlBadge } from '@gitlab/ui';
+import { GlIcon, GlSprintf, GlBadge, GlResizeObserverDirective } from '@gitlab/ui';
 import { GlBreakpointInstance } from '@gitlab/ui/dist/utils';
 import { numberToHumanSize } from '~/lib/utils/number_utils';
 import { __ } from '~/locale';
@@ -21,6 +21,9 @@ export default {
     GlBadge,
     TimeAgoTooltip,
   },
+  directives: {
+    GlResizeObserver: GlResizeObserverDirective,
+  },
   i18n: {
     packageInfo: __('v%{version} published %{timeAgo}'),
   },
@@ -60,18 +63,26 @@ export default {
     },
   },
   mounted() {
-    this.isDesktop = GlBreakpointInstance.isDesktop();
+    this.checkBreakpoints();
   },
   methods: {
     dynamicSlotName(index) {
       return `metadata-tag${index}`;
     },
+    checkBreakpoints() {
+      this.isDesktop = GlBreakpointInstance.isDesktop();
+    },
   },
 };
 </script>
 
 <template>
-  <title-area :title="packageEntity.name" :avatar="packageIcon" data-qa-selector="package_title">
+  <title-area
+    v-gl-resize-observer="checkBreakpoints"
+    :title="packageEntity.name"
+    :avatar="packageIcon"
+    data-qa-selector="package_title"
+  >
     <template #sub-header>
       <gl-icon name="eye" class="gl-mr-3" />
       <span data-testid="sub-header">