Re-arrange split view panes when tab order changes (#2428)

3 files changed, 9 insertions, 20 deletions

diff --git a/src/components/services/content/ServiceView.js b/src/components/services/content/ServiceView.js
index 3ea36ae97..a9a013ced 100644
--- a/src/components/services/content/ServiceView.js
+++ b/src/components/services/content/ServiceView.js
@@ -96,7 +96,7 @@ class ServiceView extends Component {
     }
 
     return (
-      <div className={webviewClasses} data-name={service.name}>
+      <div className={webviewClasses} data-name={service.name} style={{order: service.order}}>
         {service.isActive && service.isEnabled && (
           <>
             {service.hasCrashed && (
diff --git a/src/styles/config.scss b/src/styles/config.scss
index 7aa2d674f..6316acbe3 100644
--- a/src/styles/config.scss
+++ b/src/styles/config.scss
@@ -1 +1,4 @@
 @import './colors.scss';
+
+$split-columns-min: 1;
+$split-columns-max: 5;
diff --git a/src/styles/services.scss b/src/styles/services.scss
index cedfcbdd1..d8f8b9327 100644
--- a/src/styles/services.scss
+++ b/src/styles/services.scss
@@ -25,28 +25,14 @@
 
     .services__webview {
       position: relative;
-      flex: 1 0 33.33%;
+      flex: 1 0 33.3333%;
     }
   }
 
-  &[data-columns="1"] .services .services__webview {
-    flex-basis: 100%;
-  }
-
-  &[data-columns="2"] .services .services__webview {
-    flex-basis: 50%;
-  }
-
-  &[data-columns="3"] .services .services__webview {
-    flex-basis: 33.33%;
-  }
-
-  &[data-columns="4"] .services .services__webview {
-    flex-basis: 25%;
-  }
-
-  &[data-columns="5"] .services .services__webview {
-    flex-basis: 20%;
+  @for $i from $split-columns-min through $split-columns-max {
+    &[data-columns="#{$i}"] .services .services__webview {
+      flex-basis: calc(100% / $i);
+    }
   }
 }