Fix not being able to add components when either the screen or layout are selected

packages/builder/src/builderStore/store/frontend.js

@@ -769,7 +769,7 @@ export const getFrontendStore = () => {
           await store.actions.screens.patch(screen => {
             // Find the selected component
             let selectedComponentId = state.selectedComponentId
-            if (["navigation", "screen"].includes(selectedComponentId)) {
+            if (selectedComponentId.startsWith(`${screen._id}-`)) {
               selectedComponentId = screen?.props._id
             }
             const currentComponent = findComponent(

packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/new/_components/NewComponentPanel.svelte

@@ -1,6 +1,6 @@
 <script>
   import Panel from "components/design/Panel.svelte"
-  import { goto, url } from "@roxi/routify"
+  import { goto } from "@roxi/routify"
   import { Layout, Search, Icon, Body, notifications } from "@budibase/bbui"
   import structure from "./componentStructure.json"
   import { store, selectedComponent, selectedScreen } from "builderStore"
@@ -31,6 +31,10 @@
   $: orderMap = createComponentOrderMap(componentList)
 
   const getAllowedComponents = (allComponents, screen, component) => {
+    // Default to using the root screen container if no component specified
+    if (!component) {
+      component = screen.props
+    }
     const path = findComponentPath(screen?.props, component?._id)
     if (!path?.length) {
       return []