Fix overflow not scrolling properly in side panels

packages/builder/src/pages/builder/app/[application]/design/_layout.svelte

@@ -47,9 +47,11 @@
 <style>
   .design {
     flex: 1 1 auto;
-    display: grid;
+    display: flex;
-    grid-template-columns: auto 1fr;
+    flex-direction: row;
+    justify-content: flex-start;
     align-items: stretch;
+    height: 0;
   }
   .icon-nav {
     background: var(--background);
@@ -60,5 +62,6 @@
     flex-direction: row;
     justify-content: flex-start;
     align-items: stretch;
+    flex: 1 1 auto;
   }
 </style>

packages/builder/src/pages/builder/app/[application]/design/components/[screenId]/[componentId]/_components/ComponentNavigationPanel.svelte

@@ -0,0 +1,21 @@
+<script>
+  import NavigationPanel from "components/design/NavigationPanel/NavigationPanel.svelte"
+  import { goto } from "@roxi/routify"
+  import { Layout, Search } from "@budibase/bbui"
+
+  let searchString
+</script>
+
+<NavigationPanel
+  title="Components"
+  showAddButton
+  onClickAddButton={() => $goto("./new")}
+>
+  <Layout paddingX="L" paddingY="XL" gap="S">
+    <Search
+      placeholder="Search"
+      value={searchString}
+      on:change={e => (searchString = e.detail)}
+    />
+  </Layout>
+</NavigationPanel>

packages/builder/src/pages/builder/app/[application]/design/components/[screenId]/[componentId]/_components/ComponentSettingsPanel.svelte

@@ -0,0 +1,5 @@
+<script>
+  import SettingsPanel from "components/design/SettingsPanel/SettingsPanel.svelte"
+</script>
+
+<SettingsPanel title="Components" />

packages/builder/src/pages/builder/app/[application]/design/components/[screenId]/[componentId]/index.svelte

@@ -0,0 +1,10 @@
+<script>
+  import { store } from "builderStore"
+  import AppPanel from "components/design/AppPanel/AppPanel.svelte"
+  import ComponentNavigationPanel from "./_components/ComponentNavigationPanel.svelte"
+  import ComponentSettingsPanel from "./_components/ComponentSettingsPanel.svelte"
+</script>
+
+<ComponentNavigationPanel />
+<AppPanel />
+<ComponentSettingsPanel />

packages/builder/src/pages/builder/app/[application]/design/components/[screenId]/new/_components/ComponentListPanel.svelte

@@ -0,0 +1,21 @@
+<script>
+  import NavigationPanel from "components/design/NavigationPanel/NavigationPanel.svelte"
+  import { goto } from "@roxi/routify"
+  import { Layout, Search } from "@budibase/bbui"
+
+  let searchString
+</script>
+
+<NavigationPanel
+  title="Components"
+  showAddButton
+  onClickAddButton={() => $goto("../new")}
+>
+  <Layout paddingX="L" paddingY="XL" gap="S">
+    <Search
+      placeholder="Search"
+      value={searchString}
+      on:change={e => (searchString = e.detail)}
+    />
+  </Layout>
+</NavigationPanel>