From 4b624e37c4e6e2dcd607fce7da4f94e4b967fb43 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Tue, 26 Apr 2022 07:41:58 +0100
Subject: [PATCH] Fix overflow not scrolling properly in side panels

---
 .../app/[application]/design/_layout.svelte   |  7 +++++--
 .../ComponentNavigationPanel.svelte           | 21 +++++++++++++++++++
 .../_components/ComponentSettingsPanel.svelte |  5 +++++
 .../[screenId]/[componentId]/index.svelte     | 10 +++++++++
 .../components/[screenId]/_layout.svelte      |  0
 .../design/components/[screenId]/index.svelte |  0
 .../new/_components/ComponentListPanel.svelte | 21 +++++++++++++++++++
 .../new/_components}/componentStructure.json  |  0
 .../components/[screenId]/new/index.svelte    |  0
 9 files changed, 62 insertions(+), 2 deletions(-)
 create mode 100644 packages/builder/src/pages/builder/app/[application]/design/components/[screenId]/[componentId]/_components/ComponentNavigationPanel.svelte
 create mode 100644 packages/builder/src/pages/builder/app/[application]/design/components/[screenId]/[componentId]/_components/ComponentSettingsPanel.svelte
 create mode 100644 packages/builder/src/pages/builder/app/[application]/design/components/[screenId]/[componentId]/index.svelte
 create mode 100644 packages/builder/src/pages/builder/app/[application]/design/components/[screenId]/_layout.svelte
 create mode 100644 packages/builder/src/pages/builder/app/[application]/design/components/[screenId]/index.svelte
 create mode 100644 packages/builder/src/pages/builder/app/[application]/design/components/[screenId]/new/_components/ComponentListPanel.svelte
 rename packages/builder/src/{components/design/AppPanel => pages/builder/app/[application]/design/components/[screenId]/new/_components}/componentStructure.json (100%)
 create mode 100644 packages/builder/src/pages/builder/app/[application]/design/components/[screenId]/new/index.svelte

diff --git a/packages/builder/src/pages/builder/app/[application]/design/_layout.svelte b/packages/builder/src/pages/builder/app/[application]/design/_layout.svelte
index 01b21d8cc5..a29749472c 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/_layout.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/_layout.svelte
@@ -47,9 +47,11 @@
 <style>
   .design {
     flex: 1 1 auto;
-    display: grid;
-    grid-template-columns: auto 1fr;
+    display: flex;
+    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>
diff --git a/packages/builder/src/pages/builder/app/[application]/design/components/[screenId]/[componentId]/_components/ComponentNavigationPanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/components/[screenId]/[componentId]/_components/ComponentNavigationPanel.svelte
new file mode 100644
index 0000000000..ccaebb2dde
--- /dev/null
+++ b/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>
diff --git a/packages/builder/src/pages/builder/app/[application]/design/components/[screenId]/[componentId]/_components/ComponentSettingsPanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/components/[screenId]/[componentId]/_components/ComponentSettingsPanel.svelte
new file mode 100644
index 0000000000..335e46b447
--- /dev/null
+++ b/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" />
diff --git a/packages/builder/src/pages/builder/app/[application]/design/components/[screenId]/[componentId]/index.svelte b/packages/builder/src/pages/builder/app/[application]/design/components/[screenId]/[componentId]/index.svelte
new file mode 100644
index 0000000000..255678ab0b
--- /dev/null
+++ b/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 />
diff --git a/packages/builder/src/pages/builder/app/[application]/design/components/[screenId]/_layout.svelte b/packages/builder/src/pages/builder/app/[application]/design/components/[screenId]/_layout.svelte
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/packages/builder/src/pages/builder/app/[application]/design/components/[screenId]/index.svelte b/packages/builder/src/pages/builder/app/[application]/design/components/[screenId]/index.svelte
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/packages/builder/src/pages/builder/app/[application]/design/components/[screenId]/new/_components/ComponentListPanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/components/[screenId]/new/_components/ComponentListPanel.svelte
new file mode 100644
index 0000000000..e54925fbae
--- /dev/null
+++ b/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>
diff --git a/packages/builder/src/components/design/AppPanel/componentStructure.json b/packages/builder/src/pages/builder/app/[application]/design/components/[screenId]/new/_components/componentStructure.json
similarity index 100%
rename from packages/builder/src/components/design/AppPanel/componentStructure.json
rename to packages/builder/src/pages/builder/app/[application]/design/components/[screenId]/new/_components/componentStructure.json
diff --git a/packages/builder/src/pages/builder/app/[application]/design/components/[screenId]/new/index.svelte b/packages/builder/src/pages/builder/app/[application]/design/components/[screenId]/new/index.svelte
new file mode 100644
index 0000000000..e69de29bb2