fix: Fix modal responsiveness (#4149)

app/javascript/dashboard/components/layout/Sidebar.vue

@@ -19,23 +19,6 @@
       :current-role="currentRole"
       @add-label="showAddLabelPopup"
     />
-    <woot-key-shortcut-modal
-      v-if="showShortcutModal"
-      @close="closeKeyShortcutModal"
-      @clickaway="closeKeyShortcutModal"
-    />
-    <account-selector
-      :show-account-modal="showAccountModal"
-      @close-account-modal="toggleAccountModal"
-      @show-create-account-modal="openCreateAccountModal"
-    />
-    <add-account-modal
-      :show="showCreateAccountModal"
-      @close-account-create-modal="closeCreateAccountModal"
-    />
-    <woot-modal :show.sync="showAddLabelModal" :on-close="hideAddLabelPopup">
-      <add-label-modal @close="hideAddLabelPopup" />
-    </woot-modal>
   </aside>
 </template>
 
@@ -46,12 +29,8 @@ import adminMixin from '../../mixins/isAdmin';
 import { getSidebarItems } from './config/default-sidebar';
 import alertMixin from 'shared/mixins/alertMixin';
 
-import AccountSelector from './sidebarComponents/AccountSelector.vue';
-import AddAccountModal from './sidebarComponents/AddAccountModal.vue';
-import AddLabelModal from '../../routes/dashboard/settings/labels/AddLabel';
 import PrimarySidebar from './sidebarComponents/Primary';
 import SecondarySidebar from './sidebarComponents/Secondary';
-import WootKeyShortcutModal from 'components/widgets/modal/WootKeyShortcutModal';
 import {
   hasPressedAltAndCKey,
   hasPressedAltAndRKey,
@@ -65,21 +44,13 @@ import router from '../../routes';
 
 export default {
   components: {
-    AccountSelector,
-    AddAccountModal,
-    AddLabelModal,
     PrimarySidebar,
     SecondarySidebar,
-    WootKeyShortcutModal,
   },
   mixins: [adminMixin, alertMixin, eventListenerMixins],
   data() {
     return {
       showOptionsMenu: false,
-      showAccountModal: false,
-      showCreateAccountModal: false,
-      showAddLabelModal: false,
-      showShortcutModal: false,
     };
   },
 
@@ -162,10 +133,10 @@ export default {
       }
     },
     toggleKeyShortcutModal() {
-      this.showShortcutModal = true;
+      this.$emit('open-key-shortcut-modal');
     },
     closeKeyShortcutModal() {
-      this.showShortcutModal = false;
+      this.$emit('close-key-shortcut-modal');
     },
     handleKeyEvents(e) {
       if (hasPressedCommandAndForwardSlash(e)) {
@@ -200,20 +171,10 @@ export default {
       window.$chatwoot.toggle();
     },
     toggleAccountModal() {
-      this.showAccountModal = !this.showAccountModal;
-    },
-    openCreateAccountModal() {
-      this.showAccountModal = false;
-      this.showCreateAccountModal = true;
-    },
-    closeCreateAccountModal() {
-      this.showCreateAccountModal = false;
+      this.$emit('toggle-account-modal');
     },
     showAddLabelPopup() {
-      this.showAddLabelModal = true;
-    },
-    hideAddLabelPopup() {
-      this.showAddLabelModal = false;
+      this.$emit('show-add-label-popup');
     },
   },
 };

app/javascript/dashboard/routes/dashboard/Dashboard.vue

@@ -1,9 +1,33 @@
 <template>
   <div class="row app-wrapper">
-    <sidebar :route="currentRoute" :class="sidebarClassName"></sidebar>
+    <sidebar
+      :route="currentRoute"
+      :class="sidebarClassName"
+      @toggle-account-modal="toggleAccountModal"
+      @open-key-shortcut-modal="toggleKeyShortcutModal"
+      @close-key-shortcut-modal="closeKeyShortcutModal"
+      @show-add-label-popup="showAddLabelPopup"
+    ></sidebar>
     <section class="app-content columns" :class="contentClassName">
       <router-view></router-view>
       <command-bar />
+      <account-selector
+        :show-account-modal="showAccountModal"
+        @close-account-modal="toggleAccountModal"
+        @show-create-account-modal="openCreateAccountModal"
+      />
+      <add-account-modal
+        :show="showCreateAccountModal"
+        @close-account-create-modal="closeCreateAccountModal"
+      />
+      <woot-key-shortcut-modal
+        v-if="showShortcutModal"
+        @close="closeKeyShortcutModal"
+        @clickaway="closeKeyShortcutModal"
+      />
+      <woot-modal :show.sync="showAddLabelModal" :on-close="hideAddLabelPopup">
+        <add-label-modal @close="hideAddLabelPopup" />
+      </woot-modal>
     </section>
   </div>
 </template>
@@ -12,16 +36,28 @@
 import Sidebar from '../../components/layout/Sidebar';
 import CommandBar from './commands/commandbar.vue';
 import { BUS_EVENTS } from 'shared/constants/busEvents';
+import WootKeyShortcutModal from 'dashboard/components/widgets/modal/WootKeyShortcutModal';
+import AddAccountModal from 'dashboard/components/layout/sidebarComponents/AddAccountModal';
+import AccountSelector from 'dashboard/components/layout/sidebarComponents/AccountSelector';
+import AddLabelModal from 'dashboard/routes/dashboard/settings/labels/AddLabel.vue';
 
 export default {
   components: {
     Sidebar,
     CommandBar,
+    WootKeyShortcutModal,
+    AddAccountModal,
+    AccountSelector,
+    AddLabelModal,
   },
   data() {
     return {
       isSidebarOpen: false,
       isOnDesktop: true,
+      showAccountModal: false,
+      showCreateAccountModal: false,
+      showAddLabelModal: false,
+      showShortcutModal: false,
     };
   },
   computed: {
@@ -68,6 +104,28 @@ export default {
     toggleSidebar() {
       this.isSidebarOpen = !this.isSidebarOpen;
     },
+    openCreateAccountModal() {
+      this.showAccountModal = false;
+      this.showCreateAccountModal = true;
+    },
+    closeCreateAccountModal() {
+      this.showCreateAccountModal = false;
+    },
+    toggleAccountModal() {
+      this.showAccountModal = !this.showAccountModal;
+    },
+    toggleKeyShortcutModal() {
+      this.showShortcutModal = true;
+    },
+    closeKeyShortcutModal() {
+      this.showShortcutModal = false;
+    },
+    showAddLabelPopup() {
+      this.showAddLabelModal = true;
+    },
+    hideAddLabelPopup() {
+      this.showAddLabelModal = false;
+    },
   },
 };
 </script>