From 0e2bb2cf841dad0a6a1a085b6147ae6e9d804d84 Mon Sep 17 00:00:00 2001
From: Joe <49767913+joebudi@users.noreply.github.com>
Date: Tue, 14 Jul 2020 14:52:11 +0100
Subject: [PATCH] Layout update

The backend table was pushing the right panel out of sight on smaller screens. I have added css grid to control the layout, including a minimax section so the content does not dictate the size of the middle screen.
---
 packages/builder/src/components/common/Switcher.svelte         | 1 +
 .../builder/src/pages/[application]/backend/_layout.svelte     | 3 ++-
 .../builder/src/pages/[application]/workflow/_layout.svelte    | 3 ++-
 packages/standard-components/src/DataTable.svelte              | 2 ++
 4 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/packages/builder/src/components/common/Switcher.svelte b/packages/builder/src/components/common/Switcher.svelte
index 59c44190af..9119aada4b 100644
--- a/packages/builder/src/components/common/Switcher.svelte
+++ b/packages/builder/src/components/common/Switcher.svelte
@@ -65,6 +65,7 @@
     margin-right: 20px;
     background: none;
     outline: none;
+    font-family: Inter;
   }
 
   .switcher > .selected {
diff --git a/packages/builder/src/pages/[application]/backend/_layout.svelte b/packages/builder/src/pages/[application]/backend/_layout.svelte
index c099289972..82f0d5a9e8 100644
--- a/packages/builder/src/pages/[application]/backend/_layout.svelte
+++ b/packages/builder/src/pages/[application]/backend/_layout.svelte
@@ -22,7 +22,8 @@
 <style>
   .root {
     height: 100%;
-    display: flex;
+    display: grid;
+    grid-template-columns: 300px minmax(0, 1fr) 300px;
     background: var(--grey-1);
     line-height: 1;
   }
diff --git a/packages/builder/src/pages/[application]/workflow/_layout.svelte b/packages/builder/src/pages/[application]/workflow/_layout.svelte
index 2746a82d2f..c56d6e4a1a 100644
--- a/packages/builder/src/pages/[application]/workflow/_layout.svelte
+++ b/packages/builder/src/pages/[application]/workflow/_layout.svelte
@@ -27,7 +27,8 @@
 
   .root {
     height: 100%;
-    display: flex;
+    display: grid;
+    grid-template-columns: 300px minmax(0, 1fr) 300px;
     background: var(--grey-1);
     line-height: 1;
   }
diff --git a/packages/standard-components/src/DataTable.svelte b/packages/standard-components/src/DataTable.svelte
index 6782a9925c..22c0e202b7 100644
--- a/packages/standard-components/src/DataTable.svelte
+++ b/packages/standard-components/src/DataTable.svelte
@@ -71,6 +71,8 @@
     background: #fff;
     border-radius: 3px;
     border-collapse: collapse;
+    overflow: scroll; /* Scrollbar are always visible */
+    overflow: auto; /* Scrollbar is displayed as it's needed */
   }
 
   thead {