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

@@ -65,6 +65,7 @@
     margin-right: 20px;
     background: none;
     outline: none;
+    font-family: Inter;
   }
 
   .switcher > .selected {

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;
   }

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;
   }

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 {