diff --git a/src/components/Layout.vue b/src/components/Layout.vue
index f98419a9..55df4cac 100644
--- a/src/components/Layout.vue
+++ b/src/components/Layout.vue
@@ -34,7 +34,7 @@
 </template>
 
 <script>
-import { mapGetters, mapMutations } from 'vuex';
+import { mapGetters, mapActions } from 'vuex';
 import NavigationBar from './NavigationBar';
 import ButtonBar from './ButtonBar';
 import StatusBar from './StatusBar';
@@ -67,7 +67,7 @@ export default {
     },
   },
   methods: {
-    ...mapMutations('layout', [
+    ...mapActions('layout', [
       'updateBodySize',
     ]),
     saveSelection: () => editorSvc.saveSelection(true),
diff --git a/src/store/modules/layout.js b/src/store/modules/layout.js
index 0f008da1..56b7c339 100644
--- a/src/store/modules/layout.js
+++ b/src/store/modules/layout.js
@@ -145,4 +145,12 @@ export default {
       return computeStyles(state, localSettings, rootGetters);
     },
   },
+  actions: {
+    updateBodySize({ commit, dispatch, rootGetters }) {
+      commit('updateBodySize');
+      // Make sure both explorer and side bar are not open if body width is small
+      const localSettings = rootGetters['data/localSettings'];
+      dispatch('data/toggleExplorer', localSettings.showExplorer, { root: true });
+    },
+  },
 };