fix: fix reordering of services in vertical style layout

fixes #1833

2 files changed, 7 insertions, 2 deletions

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}