diff --git a/packages/bbui/src/Modal/ModalContent.svelte b/packages/bbui/src/Modal/ModalContent.svelte
index 3ca584504c..189ef70c2b 100644
--- a/packages/bbui/src/Modal/ModalContent.svelte
+++ b/packages/bbui/src/Modal/ModalContent.svelte
@@ -40,7 +40,7 @@
     loading = false
   }
 
-  async function confirm() {
+  export async function confirm() {
     loading = true
     if (!onConfirm || (await onConfirm()) !== keepOpen) {
       hide()
diff --git a/packages/builder/src/components/design/ScreenDetailsModal.svelte b/packages/builder/src/components/design/ScreenDetailsModal.svelte
index 7d0c58ce56..f31cc8a99c 100644
--- a/packages/builder/src/components/design/ScreenDetailsModal.svelte
+++ b/packages/builder/src/components/design/ScreenDetailsModal.svelte
@@ -13,6 +13,7 @@
   const appPrefix = "/app"
   let touched = false
   let error
+  let modal
 
   $: appUrl = screenUrl
     ? `${window.location.origin}${appPrefix}${screenUrl}`
@@ -50,6 +51,7 @@
 </script>
 
 <ModalContent
+  bind:this={modal}
   size="M"
   title={"Screen details"}
   {confirmText}
@@ -58,15 +60,17 @@
   cancelText={"Back"}
   disabled={!screenUrl || error || !touched}
 >
-  <Input
-    label="Enter a URL for the new screen"
-    {error}
-    bind:value={screenUrl}
-    on:change={routeChanged}
-  />
-  <div class="app-server" title={appUrl}>
-    {appUrl}
-  </div>
+  <form on:submit|preventDefault={() => modal.confirm()}>
+    <Input
+      label="Enter a URL for the new screen"
+      {error}
+      bind:value={screenUrl}
+      on:change={routeChanged}
+    />
+    <div class="app-server" title={appUrl}>
+      {appUrl}
+    </div>
+  </form>
 </ModalContent>
 
 <style>