diff --git a/client/src/components/highlights/HighlightSidebar.vue b/client/src/components/highlights/HighlightSidebar.vue
index 3f313379..fbe5d43f 100644
--- a/client/src/components/highlights/HighlightSidebar.vue
+++ b/client/src/components/highlights/HighlightSidebar.vue
@@ -42,6 +42,8 @@ export interface Props {
   highlight: HighlightNode;
 }
 
+import vAutoGrow from '@/directives/auto-grow';
+
 const emits = defineEmits(['close', 'update-text']);
 const close = () => emits('close');
 
diff --git a/client/src/helpers/highlight-sidebar.ts b/client/src/helpers/highlight-sidebar.ts
index 4e49a552..58cc1e53 100644
--- a/client/src/helpers/highlight-sidebar.ts
+++ b/client/src/helpers/highlight-sidebar.ts
@@ -1,6 +1,5 @@
 import { App, createApp, ref } from 'vue';
 import HighlightSidebar from '@/components/highlights/HighlightSidebar.vue';
-import autoGrow from '@/directives/auto-grow';
 import { HighlightNode } from '@/__generated__/graphql';
 
 interface Options {
@@ -54,8 +53,6 @@ export default {
       cleanUp: cleanUp,
     };
 
-    sidebar.directive('auto-grow', autoGrow); // todo: can this be done a different way? maybe use this declaration inside the component itself
-
     sidebar.mount(mountEl);
 
     setTimeout(() => {