Enable Split View Mode (#1926)

2 files changed, 23 insertions, 1 deletions

diff --git a/src/styles/layout.scss b/src/styles/layout.scss
index 49e041022..b5d4d86d0 100644
--- a/src/styles/layout.scss
+++ b/src/styles/layout.scss
@@ -82,6 +82,10 @@ body.win32:not(.isFullScreen) .app .app__content {
   height: calc(100% - 28px);
 }
 
+.mode__split .app .app__service {
+  overflow-x: auto;
+}
+
 .app {
   .app__content {
     display: flex;
diff --git a/src/styles/services.scss b/src/styles/services.scss
index 8b8c27e10..dd053e93d 100644
--- a/src/styles/services.scss
+++ b/src/styles/services.scss
@@ -18,6 +18,24 @@
   }
 }
 
+.mode__split .services {
+  display: flex;
+  overflow: visible;
+
+  .services__webview {
+    position: relative;
+    flex: 1 0 50%;
+
+    @media (min-width: 1280px) {
+      flex-basis: 33.33%;
+    }
+
+    @media (min-width: 2048px) {
+      flex-basis: 25%;
+    }
+  }
+}
+
 .services {
   background: #FFF;
   flex: 1;
@@ -71,7 +89,7 @@
   }
 
   .services__info-layer {
-    position: absolut;
+    position: absolute;
     z-index: 110;
   }