From c908eaa1cdf6ae57a07a2c5d8f8aae840893f6e7 Mon Sep 17 00:00:00 2001
From: Ciaran Ainsworth <ciaranainsworth@outlook.com>
Date: Thu, 20 May 2021 18:59:31 +0100
Subject: [PATCH] Add width listener for responsive conditional rendering

---
 front/src/App.vue | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/front/src/App.vue b/front/src/App.vue
index 85c9391a5..5ac09cb8e 100644
--- a/front/src/App.vue
+++ b/front/src/App.vue
@@ -67,6 +67,7 @@ export default {
       showShortcutsModal: false,
       showSetInstanceModal: false,
       initialTitle: document.title,
+      width: window.innerWidth
     }
   },
   async created () {
@@ -82,7 +83,8 @@ export default {
         }
       );
     }
-
+    window.addEventListener('resize', this.handleResize);
+    this.handleResize();
     this.openWebsocket()
     let self = this
     if (!this.$store.state.ui.selectedLanguage) {
@@ -293,6 +295,9 @@ export default {
       this.$store.commit('ui/serviceWorker', {updateAvailable: false})
       if (!this.serviceWorker.registration || !this.serviceWorker.registration.waiting) { return; }
       this.serviceWorker.registration.waiting.postMessage({command: 'skipWaiting'})
+    },
+    handleResize() {
+      this.width = window.innerWidth
     }
   },
   computed: {