fix: fix reordering of services in vertical style layout

fixes #1833

3 files changed, 11 insertions, 2 deletions

diff --git a/CHANGELOG.md b/CHANGELOG.md
index ed14b3cf9..1848b3ee9 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,9 @@
 # [v5.6.1-nightly.39](https://github.com/getferdi/ferdi/compare/v5.6.1-nightly.38...v5.6.1-nightly.39) (2021-08-26)
 
+### Bug Fixes
+
+- Fix reordering of services in vertical style layout (#1833) 💖 @vraravam
+
 ### Internal
 
 - Upgraded `electron-builder` to `22.13.0` 💖 @vraravam
diff --git a/src/components/layout/Sidebar.js b/src/components/layout/Sidebar.js
index a9fb73f33..a1a4ab64f 100644
--- a/src/components/layout/Sidebar.js
+++ b/src/components/layout/Sidebar.js
@@ -134,6 +134,7 @@ export default @inject('stores', 'actions') @observer class Sidebar extends Comp
           {...this.props}
           enableToolTip={() => this.enableToolTip()}
           disableToolTip={() => this.disableToolTip()}
+          useVerticalStyle={stores.settings.all.app.useVerticalStyle}
         />
         { isLoggedIn ? (
           <>
diff --git a/src/components/services/tabs/Tabbar.js b/src/components/services/tabs/Tabbar.js
index ab1e46c9f..c1421a2b1 100644
--- a/src/components/services/tabs/Tabbar.js
+++ b/src/components/services/tabs/Tabbar.js
@@ -20,6 +20,7 @@ export default @observer class TabBar extends Component {
     updateService: PropTypes.func.isRequired,
     hibernateService: PropTypes.func.isRequired,
     wakeUpService: PropTypes.func.isRequired,
+    useVerticalStyle: PropTypes.bool.isRequired,
     showMessageBadgeWhenMutedSetting: PropTypes.bool.isRequired,
     showMessageBadgesEvenWhenMuted: PropTypes.bool.isRequired,
   };
@@ -81,10 +82,13 @@ export default @observer class TabBar extends Component {
       toggleAudio,
       toggleDarkMode,
       deleteService,
+      useVerticalStyle,
       showMessageBadgeWhenMutedSetting,
       showMessageBadgesEvenWhenMuted,
     } = this.props;
 
+    const axis = useVerticalStyle ? 'x' : 'y';
+
     return (
       <div>
         <TabBarSortableList
@@ -104,8 +108,8 @@ export default @observer class TabBar extends Component {
           wakeUpService={(args) => this.wakeUpService(args)}
           openSettings={openSettings}
           distance={20}
-          axis="y"
-          lockAxis="y"
+          axis={axis}
+          lockAxis={axis}
           helperClass="is-reordering"
           showMessageBadgeWhenMutedSetting={showMessageBadgeWhenMutedSetting}
           showMessageBadgesEvenWhenMuted={showMessageBadgesEvenWhenMuted}