Adjust number of columns for Split Mode (#2208)

Co-authored-by: Vijay A <vraravam@users.noreply.github.com>

2 files changed, 27 insertions, 8 deletions

diff --git a/src/stores/ServicesStore.js b/src/stores/ServicesStore.js
index 926ee36f0..a34390d88 100644
--- a/src/stores/ServicesStore.js
+++ b/src/stores/ServicesStore.js
@@ -171,6 +171,13 @@ export default class ServicesStore extends Store {
     );
 
     reaction(
+      () => this.stores.settings.app.splitColumns,
+      () => {
+        this._shareSettingsWithServiceProcess();
+      },
+    );
+
+    reaction(
       () => this.stores.settings.app.searchEngine,
       () => {
         this._shareSettingsWithServiceProcess();
diff --git a/src/stores/UIStore.js b/src/stores/UIStore.js
index 779f89b9f..9c194aa91 100644
--- a/src/stores/UIStore.js
+++ b/src/stores/UIStore.js
@@ -54,6 +54,13 @@ export default class UIStore extends Store {
       },
       { fireImmediately: true },
     );
+    reaction(
+      () => this.splitColumnsNo,
+      () => {
+        this._setupColumnsInDOM();
+      },
+      { fireImmediately: true },
+    );
   }
 
   @computed get showMessageBadgesEvenWhenMuted() {
@@ -84,6 +91,10 @@ export default class UIStore extends Store {
     return this.stores.settings.app.splitMode;
   }
 
+  @computed get splitColumnsNo() {
+    return this.stores.settings.app.splitColumns;
+  }
+
   @computed get theme() {
     const themeId =
       this.isDarkThemeActive || this.stores.settings.app.darkMode
@@ -113,22 +124,23 @@ export default class UIStore extends Store {
 
   // Reactions
   _setupThemeInDOM() {
-    const body = document.querySelector('body');
-
     if (!this.isDarkThemeActive) {
-      body?.classList.remove('theme__dark');
+      document.body.classList.remove('theme__dark');
     } else {
-      body?.classList.add('theme__dark');
+      document.body.classList.add('theme__dark');
     }
   }
 
   _setupModeInDOM() {
-    const body = document.querySelector('body');
-
     if (!this.isSplitModeActive) {
-      body?.classList.remove('mode__split');
+      document.body.classList.remove('mode__split');
     } else {
-      body?.classList.add('mode__split');
+      document.body.classList.add('mode__split');
+      document.body.dataset.columns = this.splitColumnsNo;
     }
   }
+
+  _setupColumnsInDOM() {
+    document.body.dataset.columns = this.splitColumnsNo;
+  }
 }