LITE-28659: Listen to "containerSize" event via the toolkit to set th…

…e minHeight of the extension

ui/src/pages/App.vue

@@ -1,11 +1,31 @@
 <template lang="pug">
-  .app
+  .app(:style="styles")
     portal-target(name="destination", multiple)
     router-view
 
 </template>
 
 <script>
 export default {
+  props: {
+    // This is the toolkit instance itself
+    toolkit: Object,
+  },
+
+  data: () => ({
+    height: '',
+  }),
+
+  computed: {
+    styles: vm => ({
+      minHeight: vm.height,
+    }),
+  },
+
+  created() {
+    this.toolkit.listen('containerSize', ({ height }) => {
+      this.height = height;
+    });
+  },
 };
 </script>

ui/src/pages/index.js

@@ -30,18 +30,21 @@ createApp({
   'ui-tab': Tab,
   'ui-tabs': Tabs,
   'ui-pad': Pad,
-});
+}).then(toolkit => {
+  const router = new VueRouter({
+    mode: 'hash',
+    routes,
+  });
 
-const router = new VueRouter({
-  mode: 'hash',
-  routes,
-});
+  Vue.filter('utcToLocal', utcToLocal);
 
-Vue.filter('utcToLocal', utcToLocal);
+  const app = new Vue({
+    render: h => h(App, {
+      props: { toolkit },
+    }),
 
-const app = new Vue({
-  render: h => h(App),
-  router,
-});
+    router,
+  });
 
-app.$mount('#app');
+  app.$mount('#app');
+});