1 files changed, 19 insertions, 7 deletions
diff --git a/app/assets/javascripts/abuse_reports/components/abuse_category_selector.vue b/app/assets/javascripts/abuse_reports/components/abuse_category_selector.vue
index c716afbbcf0..4a7c12e5e51 100644
--- a/app/assets/javascripts/abuse_reports/components/abuse_category_selector.vue
+++ b/app/assets/javascripts/abuse_reports/components/abuse_category_selector.vue
@@ -18,14 +18,17 @@ export default {
     reportAbusePath: {
       default: '',
     },
+  },
+  props: {
     reportedUserId: {
-      default: '',
+      type: Number,
+      required: true,
     },
     reportedFromUrl: {
+      type: String,
+      required: false,
       default: '',
     },
-  },
-  props: {
     showDrawer: {
       type: Boolean,
       required: true,
@@ -39,8 +42,8 @@ export default {
   },
   categoryOptions: [
     { value: 'spam', text: s__("ReportAbuse|They're posting spam.") },
-    { value: 'offensive', text: s__("ReportAbuse|They're being offsensive or abusive.") },
-    { value: 'phishing', text: s__("ReportAbuse|They're phising.") },
+    { value: 'offensive', text: s__("ReportAbuse|They're being offensive or abusive.") },
+    { value: 'phishing', text: s__("ReportAbuse|They're phishing.") },
     { value: 'crypto', text: s__("ReportAbuse|They're crypto mining.") },
     {
       value: 'credentials',
@@ -53,13 +56,22 @@ export default {
   data() {
     return {
       selected: '',
+      mounted: false,
     };
   },
   computed: {
     drawerOffsetTop() {
+      // avoid calculating this in advance because it causes layout thrashing
+      // https://gitlab.com/gitlab-org/gitlab/-/issues/331172#note_1269378396
+      if (!this.showDrawer) return '0';
       return getContentWrapperHeight('.content-wrapper');
     },
   },
+  mounted() {
+    // this is required for the component to properly animate
+    // when it is shown with v-if
+    this.mounted = true;
+  },
   methods: {
     closeDrawer() {
       this.$emit('close-drawer');
@@ -71,7 +83,7 @@ export default {
   <gl-drawer
     :header-height="drawerOffsetTop"
     :z-index="300"
-    :open="showDrawer"
+    :open="showDrawer && mounted"
     @close="closeDrawer"
   >
     <template #title>
@@ -94,7 +106,7 @@ export default {
           data-testid="input-referer"
         />
 
-        <gl-form-group :label="$options.i18n.label">
+        <gl-form-group :label="$options.i18n.label" label-class="gl-text-black-normal">
           <gl-form-radio-group
             v-model="selected"
             :options="$options.categoryOptions"