Allow pasting inside screens on screens tab and fix icon overflow in nav items

packages/builder/src/components/common/NavItem.svelte

@@ -135,8 +135,12 @@
     padding-left: var(--spacing-l);
   }
 
+  /* Needed to fully display the actions icon */
+  .nav-item.scrollable .nav-item-content {
+    padding-right: 1px;
+  }
+
   .icon {
-    font-size: 16px;
     flex: 0 0 24px;
     display: flex;
     flex-direction: row;
@@ -164,9 +168,6 @@
   .icon.arrow.opened {
     transform: rotate(90deg);
   }
-  .icon + .icon {
-    /*margin-left: -4px;*/
-  }
   .iconText {
     margin-top: 1px;
     font-size: var(--spectrum-global-dimension-font-size-50);

packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/ScreenDropdownMenu.svelte

@@ -21,6 +21,15 @@
   let screenDetailsModal
 
   $: screen = $store.screens.find(screen => screen._id === screenId)
+  $: noPaste = !$store.componentToPaste
+
+  const pasteComponent = mode => {
+    try {
+      store.actions.components.paste(screen.props, mode)
+    } catch (error) {
+      notifications.error("Error saving component")
+    }
+  }
 
   const duplicateScreen = () => {
     screenDetailsModal.show()
@@ -69,6 +78,13 @@
   <div slot="control" class="icon">
     <Icon size="S" hoverable name="MoreSmallList" />
   </div>
+  <MenuItem
+    icon="ShowOneLayer"
+    on:click={() => pasteComponent("inside")}
+    disabled={noPaste}
+  >
+    Paste inside
+  </MenuItem>
   <MenuItem icon="Duplicate" on:click={duplicateScreen}>Duplicate</MenuItem>
   <MenuItem icon="Delete" on:click={confirmDeleteDialog.show}>Delete</MenuItem>
 </ActionMenu>