From 92ef79b607ff787b4cb0301abf9e2bf0e96dff5a Mon Sep 17 00:00:00 2001
From: Allan Lasser <lasser.allan@gmail.com>
Date: Thu, 11 Dec 2025 11:11:50 -0500
Subject: [PATCH 01/10] Adds nvmrc

I'm always using the wrong node version on my system, so this gives more hints for which node to build for
---
 .nvmrc | 1 +
 1 file changed, 1 insertion(+)
 create mode 100644 .nvmrc

diff --git a/.nvmrc b/.nvmrc
new file mode 100644
index 000000000..8fdd954df
--- /dev/null
+++ b/.nvmrc
@@ -0,0 +1 @@
+22
\ No newline at end of file

From 973c9a933149b1769a5c893e8ceaf14f22647189 Mon Sep 17 00:00:00 2001
From: Allan Lasser <lasser.allan@gmail.com>
Date: Thu, 11 Dec 2025 12:13:34 -0500
Subject: [PATCH 02/10] Support variable-size share dialog

---
 src/lib/components/documents/Share.svelte     | 25 +++++++++------
 .../documents/stories/Share.stories.svelte    | 31 +++++++++++++------
 src/lib/components/layouts/Modal.svelte       | 19 ++++++++++--
 3 files changed, 53 insertions(+), 22 deletions(-)

diff --git a/src/lib/components/documents/Share.svelte b/src/lib/components/documents/Share.svelte
index 4ba32bd52..dcb891cde 100644
--- a/src/lib/components/documents/Share.svelte
+++ b/src/lib/components/documents/Share.svelte
@@ -283,16 +283,18 @@
 
 <style>
   .container {
+    margin: 0 auto;
+    aspect-ratio: 2 / 3;
     width: 100%;
-    height: 32rem;
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    grid-template-rows: auto 1fr;
-    gap: 0 1rem;
+    height: 100%;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 1rem;
+    padding: 1.5rem;
+    overflow-y: auto;
   }
   .banner {
-    grid-column: 1/3;
-    grid-row: 1/2;
+    flex: 1 1 100%;
     margin-bottom: 1rem;
   }
   .privateWarning {
@@ -325,18 +327,21 @@
     display: flex;
     flex-direction: column;
     flex: 1 1 12rem;
-    grid-row: 2/3;
     min-width: 0;
   }
   .right {
-    flex: 2 1 24rem;
+    flex: 2 1 32rem;
+  }
+  .left {
+    flex: 1 1 20rem;
+    min-height: 20rem;
   }
   .right header {
     padding: 0.375rem 0;
     /* margin-bottom: .25rem; */
   }
   .right main {
-    min-height: 0;
+    min-height: 36rem;
     height: 100%;
     width: 100%;
   }
diff --git a/src/lib/components/documents/stories/Share.stories.svelte b/src/lib/components/documents/stories/Share.stories.svelte
index 960606b38..40ac6667d 100644
--- a/src/lib/components/documents/stories/Share.stories.svelte
+++ b/src/lib/components/documents/stories/Share.stories.svelte
@@ -1,7 +1,7 @@
 <script context="module" lang="ts">
   import type { Document } from "$lib/api/types";
 
-  import { Story } from "@storybook/addon-svelte-csf";
+  import { Story, Template } from "@storybook/addon-svelte-csf";
   import Share from "../Share.svelte";
   import Toaster from "../../layouts/Toaster.svelte";
 
@@ -15,10 +15,17 @@
   };
 </script>
 
-<Story name="Document">
-  <Share {document} currentTab="document" />
-  <Toaster />
-</Story>
+<Template let:args>
+  <div class="vh-100 vw-100">
+    <Share
+      document={args.document}
+      currentTab={args.currentTab}
+    />
+    <Toaster />
+  </div>
+</Template>
+
+<Story name="Document" args={{document, currentTab: 'document'}}></Story>
 
 <Story name="Private Document">
   <Share
@@ -49,7 +56,13 @@
   <Toaster />
 </Story>
 
-<Story name="Note">
-  <Share {document} currentTab="note" />
-  <Toaster />
-</Story>
+<Story name="Note" args={{ document, currentTab: "note" }} />
+
+<style>
+  .vh-100 {
+    height: 100vh;
+  }
+  .vw-100 {
+    width: 100vw;
+  }
+</style>
diff --git a/src/lib/components/layouts/Modal.svelte b/src/lib/components/layouts/Modal.svelte
index 492c5918d..02c54f74a 100644
--- a/src/lib/components/layouts/Modal.svelte
+++ b/src/lib/components/layouts/Modal.svelte
@@ -35,6 +35,10 @@ of the $modal store. These are used to set the active modal on any given page.
 
   const dispatch = createEventDispatcher();
 
+  export let maxWidth: string = "48rem";
+  export let maxHeight: string = "90vh";
+  export let fillViewport: boolean = false;
+
   function onKeydown(e: KeyboardEvent) {
     if (e.key === "Escape") {
       dispatch("close");
@@ -47,6 +51,9 @@ of the $modal store. These are used to set the active modal on any given page.
 <div class="backdrop" transition:fade={{ duration: 200 }}>
   <div
     class="dialog card"
+    class:fill-viewport={fillViewport}
+    style:max-width={maxWidth}
+    style:max-height={maxHeight}
     transition:fly={{ duration: 400, easing: quintOut, y: "25vw" }}
   >
     <header>
@@ -87,22 +94,28 @@ of the $modal store. These are used to set the active modal on any given page.
   .card {
     display: flex;
     flex-direction: column;
-    gap: 1rem;
-    max-width: 48rem;
+    gap: 0 1rem;
     overflow-x: hidden;
     overflow-y: auto;
     position: relative;
-    padding: 1.5rem;
+    padding: 0;
     border-radius: var(--font-md, 1rem);
     background: var(--white, #fff);
     box-shadow: 0px 4px 16px 4px #99a8b3;
   }
 
+  .card.fill-viewport {
+    width: 100%;
+    height: auto;
+  }
+
   .card > header {
     display: flex;
     align-items: center;
     justify-content: space-between;
     flex-direction: row-reverse;
+    padding: 1rem;
+    border-bottom: 1px solid var(--gray-2, #d8dee2);
   }
 
   .content {

From 880aa3c67cfee02efe1454ec3b5c03fb918f64b1 Mon Sep 17 00:00:00 2001
From: Allan Lasser <lasser.allan@gmail.com>
Date: Thu, 11 Dec 2025 12:13:58 -0500
Subject: [PATCH 03/10] Update Share modal instances with variable sizing

---
 src/lib/components/notes/Note.svelte              | 2 +-
 src/lib/components/sidebar/DocumentActions.svelte | 2 +-
 src/lib/components/sidebar/ViewerActions.svelte   | 7 ++++++-
 src/lib/components/viewer/PageActions.svelte      | 2 +-
 4 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/src/lib/components/notes/Note.svelte b/src/lib/components/notes/Note.svelte
index aa82bfb19..d4183d7ec 100644
--- a/src/lib/components/notes/Note.svelte
+++ b/src/lib/components/notes/Note.svelte
@@ -102,7 +102,7 @@
 </div>
 {#if !embed && shareNoteOpen}
   <Portal>
-    <Modal on:close={() => (shareNoteOpen = false)}>
+    <Modal on:close={() => (shareNoteOpen = false)} fillViewport maxWidth="66rem" maxHeight="80vh">
       <h1 slot="title">{$_("dialog.share")}</h1>
       <Share document={doc} note_id={note.id} currentTab="note" />
     </Modal>
diff --git a/src/lib/components/sidebar/DocumentActions.svelte b/src/lib/components/sidebar/DocumentActions.svelte
index 5d238fb90..5610e6a7b 100644
--- a/src/lib/components/sidebar/DocumentActions.svelte
+++ b/src/lib/components/sidebar/DocumentActions.svelte
@@ -167,7 +167,7 @@ Most actual actions are deferred to their own forms, so this is more of a switch
 
 {#if visible}
   <Portal>
-    <Modal on:close={close}>
+    <Modal on:close={close} fillViewport={visible === "share"} maxWidth="90vw" maxHeight="80vh">
       <h1 slot="title">{$_(labels[visible])}</h1>
 
       {#if visible === "share"}
diff --git a/src/lib/components/sidebar/ViewerActions.svelte b/src/lib/components/sidebar/ViewerActions.svelte
index c0274a93e..342212011 100644
--- a/src/lib/components/sidebar/ViewerActions.svelte
+++ b/src/lib/components/sidebar/ViewerActions.svelte
@@ -149,7 +149,12 @@
 
 {#if visible}
   <Portal>
-    <Modal on:close={close}>
+    <Modal
+      on:close={close}
+      fillViewport={visible === "share"}
+      maxWidth={visible === "share" ? "90vw" : "48rem"}
+      maxHeight={visible === "share" ? "80vh" : "90vh"}
+    >
       <h1 slot="title">
         {$_(labels[visible])}
         {#if visible === "revisions"}
diff --git a/src/lib/components/viewer/PageActions.svelte b/src/lib/components/viewer/PageActions.svelte
index 01912719f..fe72429cd 100644
--- a/src/lib/components/viewer/PageActions.svelte
+++ b/src/lib/components/viewer/PageActions.svelte
@@ -103,7 +103,7 @@
 </div>
 {#if pageShareOpen}
   <Portal>
-    <Modal on:close={() => (pageShareOpen = false)}>
+    <Modal on:close={() => (pageShareOpen = false)} fillViewport maxWidth="90vw" maxHeight="80vh">
       <h1 slot="title">{$_("dialog.share")}</h1>
       <Share {document} page={page_number} currentTab="page" />
     </Modal>

From 01e519508e46b4e007954fe81094c33533cb96fd Mon Sep 17 00:00:00 2001
From: Allan Lasser <lasser.allan@gmail.com>
Date: Thu, 11 Dec 2025 12:29:30 -0500
Subject: [PATCH 04/10] Padding for all forms used in Modals

---
 src/lib/components/accounts/Mailkey.svelte    | 34 +++++++++++--------
 src/lib/components/forms/ChangeOwner.svelte   |  1 +
 src/lib/components/forms/ConfirmDelete.svelte |  1 +
 .../components/forms/ConfirmRedaction.svelte  |  4 +++
 src/lib/components/forms/DeleteProject.svelte |  1 +
 src/lib/components/forms/Edit.svelte          |  1 +
 src/lib/components/forms/EditAccess.svelte    |  1 +
 src/lib/components/forms/EditMany.svelte      |  1 +
 src/lib/components/forms/EditNote.svelte      |  6 ++++
 src/lib/components/forms/EditProject.svelte   |  1 +
 .../forms/InviteCollaborator.svelte           |  1 +
 src/lib/components/forms/Projects.svelte      |  1 +
 .../forms/RemoveCollaborator.svelte           |  1 +
 src/lib/components/forms/Reprocess.svelte     |  1 +
 .../forms/UpdateCollaborator.svelte           |  1 +
 src/lib/components/forms/UserFeedback.svelte  |  1 +
 16 files changed, 43 insertions(+), 14 deletions(-)

diff --git a/src/lib/components/accounts/Mailkey.svelte b/src/lib/components/accounts/Mailkey.svelte
index c032c5d04..84f3c5345 100644
--- a/src/lib/components/accounts/Mailkey.svelte
+++ b/src/lib/components/accounts/Mailkey.svelte
@@ -55,23 +55,29 @@
 
 <Modal on:close>
   <h1 slot="title">{$_("mailkey.title")}</h1>
-  <div class="description">{@html $_("mailkey.description")}</div>
-  {#if message}
-    <p class="message" class:error>
-      {@html message}
-    </p>
-  {/if}
-  <Flex gap={1} wrap justify="center">
-    <Button mode="primary" on:click={create}>
-      {$_("mailkey.create.button")}
-    </Button>
-    <Button mode="danger" on:click={destroy}>
-      {$_("mailkey.destroy.button")}
-    </Button>
-  </Flex>
+  <div class="content">
+    <div class="description">{@html $_("mailkey.description")}</div>
+    {#if message}
+      <p class="message" class:error>
+        {@html message}
+      </p>
+    {/if}
+    <Flex gap={1} wrap justify="center">
+      <Button mode="primary" on:click={create}>
+        {$_("mailkey.create.button")}
+      </Button>
+      <Button mode="danger" on:click={destroy}>
+        {$_("mailkey.destroy.button")}
+      </Button>
+    </Flex>
+  </div>
 </Modal>
 
 <style>
+  .content {
+    padding: 1rem;
+  }
+
   .description {
     columns: 2;
     column-gap: 2rem;
diff --git a/src/lib/components/forms/ChangeOwner.svelte b/src/lib/components/forms/ChangeOwner.svelte
index 585ab9f60..c62d47013 100644
--- a/src/lib/components/forms/ChangeOwner.svelte
+++ b/src/lib/components/forms/ChangeOwner.svelte
@@ -226,6 +226,7 @@ Change owner of one or more documents.
   form {
     color: var(--gray-5, #233944);
     width: 100%;
+    padding: 1rem;
   }
 
   label {
diff --git a/src/lib/components/forms/ConfirmDelete.svelte b/src/lib/components/forms/ConfirmDelete.svelte
index f5c6912a1..4f856b355 100644
--- a/src/lib/components/forms/ConfirmDelete.svelte
+++ b/src/lib/components/forms/ConfirmDelete.svelte
@@ -114,5 +114,6 @@ Confirm deletion or one or more documents.
   form {
     color: var(--gray-5, #233944);
     width: 100%;
+    padding: 1rem;
   }
 </style>
diff --git a/src/lib/components/forms/ConfirmRedaction.svelte b/src/lib/components/forms/ConfirmRedaction.svelte
index 54a4e81d6..99e5f58aa 100644
--- a/src/lib/components/forms/ConfirmRedaction.svelte
+++ b/src/lib/components/forms/ConfirmRedaction.svelte
@@ -89,6 +89,10 @@ This almost certainly lives in a modal.
 </form>
 
 <style>
+  form {
+    padding: 1rem;
+  }
+
   .error {
     color: var(--error, var(--red-3));
   }
diff --git a/src/lib/components/forms/DeleteProject.svelte b/src/lib/components/forms/DeleteProject.svelte
index 829bff000..90d6f3b67 100644
--- a/src/lib/components/forms/DeleteProject.svelte
+++ b/src/lib/components/forms/DeleteProject.svelte
@@ -40,5 +40,6 @@ Confirm project deletion.
     flex-direction: column;
     gap: 1rem;
     width: 100%;
+    padding: 1rem;
   }
 </style>
diff --git a/src/lib/components/forms/Edit.svelte b/src/lib/components/forms/Edit.svelte
index b527da9de..a5b7c0bf6 100644
--- a/src/lib/components/forms/Edit.svelte
+++ b/src/lib/components/forms/Edit.svelte
@@ -137,5 +137,6 @@ Usually this will be rendered inside a modal, but it doesn't have to be.
 <style>
   form {
     width: 100%;
+    padding: 1rem;
   }
 </style>
diff --git a/src/lib/components/forms/EditAccess.svelte b/src/lib/components/forms/EditAccess.svelte
index 68af7ff52..3ae699aa1 100644
--- a/src/lib/components/forms/EditAccess.svelte
+++ b/src/lib/components/forms/EditAccess.svelte
@@ -106,5 +106,6 @@ Usually this will be rendered inside a modal, but it doesn't have to be.
 <style>
   form {
     width: 100%;
+    padding: 1rem;
   }
 </style>
diff --git a/src/lib/components/forms/EditMany.svelte b/src/lib/components/forms/EditMany.svelte
index eb8109c57..d536ab268 100644
--- a/src/lib/components/forms/EditMany.svelte
+++ b/src/lib/components/forms/EditMany.svelte
@@ -150,5 +150,6 @@ Usually this will be rendered inside a modal, but it doesn't have to be.
 <style>
   form {
     width: 100%;
+    padding: 1rem;
   }
 </style>
diff --git a/src/lib/components/forms/EditNote.svelte b/src/lib/components/forms/EditNote.svelte
index 5fd6bb974..cd119fe80 100644
--- a/src/lib/components/forms/EditNote.svelte
+++ b/src/lib/components/forms/EditNote.svelte
@@ -92,3 +92,9 @@ Positioning and generating coordinates should happen outside of this form.
     </Flex>
   </Flex>
 </form>
+
+<style>
+  form {
+    padding: 1rem;
+  }
+</style>
diff --git a/src/lib/components/forms/EditProject.svelte b/src/lib/components/forms/EditProject.svelte
index d2a52d768..eae4417fa 100644
--- a/src/lib/components/forms/EditProject.svelte
+++ b/src/lib/components/forms/EditProject.svelte
@@ -81,5 +81,6 @@ Edit project metadata
 <style>
   form {
     width: 100%;
+    padding: 1rem;
   }
 </style>
diff --git a/src/lib/components/forms/InviteCollaborator.svelte b/src/lib/components/forms/InviteCollaborator.svelte
index 3798f08ed..5560bf2a4 100644
--- a/src/lib/components/forms/InviteCollaborator.svelte
+++ b/src/lib/components/forms/InviteCollaborator.svelte
@@ -74,6 +74,7 @@ Invite a new collaborator to a project
     flex-direction: column;
     gap: 0.75rem;
     width: 100%;
+    padding: 1rem;
   }
 
   .error {
diff --git a/src/lib/components/forms/Projects.svelte b/src/lib/components/forms/Projects.svelte
index 22cf4a330..f76e9126f 100644
--- a/src/lib/components/forms/Projects.svelte
+++ b/src/lib/components/forms/Projects.svelte
@@ -163,6 +163,7 @@ and we don't want to do that everywhere.
     flex-direction: column;
     gap: 0.5rem;
     width: 100%;
+    padding: 1rem;
   }
 
   .projects {
diff --git a/src/lib/components/forms/RemoveCollaborator.svelte b/src/lib/components/forms/RemoveCollaborator.svelte
index 1b9664ba9..00adffa47 100644
--- a/src/lib/components/forms/RemoveCollaborator.svelte
+++ b/src/lib/components/forms/RemoveCollaborator.svelte
@@ -58,5 +58,6 @@ Remove a collaborator from a project
     flex-direction: column;
     gap: 0.75rem;
     width: 100%;
+    padding: 1rem;
   }
 </style>
diff --git a/src/lib/components/forms/Reprocess.svelte b/src/lib/components/forms/Reprocess.svelte
index 170368b6a..73c23c874 100644
--- a/src/lib/components/forms/Reprocess.svelte
+++ b/src/lib/components/forms/Reprocess.svelte
@@ -248,6 +248,7 @@ This will mostly be used inside a modal but isn't dependent on one.
     flex-flow: column nowrap;
     gap: 0.5rem;
     width: 100%;
+    padding: 1rem;
   }
 
   .disclaimer {
diff --git a/src/lib/components/forms/UpdateCollaborator.svelte b/src/lib/components/forms/UpdateCollaborator.svelte
index ac5787611..bd1529058 100644
--- a/src/lib/components/forms/UpdateCollaborator.svelte
+++ b/src/lib/components/forms/UpdateCollaborator.svelte
@@ -65,5 +65,6 @@ Update permissions for a single collaborator on a project
     flex-direction: column;
     gap: 0.75rem;
     width: 100%;
+    padding: 1rem;
   }
 </style>
diff --git a/src/lib/components/forms/UserFeedback.svelte b/src/lib/components/forms/UserFeedback.svelte
index 2f4067e74..6b4b410be 100644
--- a/src/lib/components/forms/UserFeedback.svelte
+++ b/src/lib/components/forms/UserFeedback.svelte
@@ -129,6 +129,7 @@
     display: flex;
     flex-direction: column;
     gap: 0.5rem;
+    padding: 1rem;
   }
   header,
   footer {

From e1098df80d2b70cf47e09f3a5b5a4803be75e0a5 Mon Sep 17 00:00:00 2001
From: Allan Lasser <lasser.allan@gmail.com>
Date: Thu, 11 Dec 2025 13:17:49 -0500
Subject: [PATCH 05/10] Refactor common form styles into `kit.css`

---
 src/lib/components/accounts/Mailkey.svelte         |  5 +----
 src/lib/components/forms/ChangeOwner.svelte        |  4 +---
 src/lib/components/forms/ConfirmDelete.svelte      |  4 +---
 src/lib/components/forms/ConfirmRedaction.svelte   |  6 +-----
 src/lib/components/forms/DeleteProject.svelte      |  6 +-----
 src/lib/components/forms/Edit.svelte               |  9 +--------
 src/lib/components/forms/EditAccess.svelte         |  9 +--------
 src/lib/components/forms/EditData.svelte           |  7 +------
 src/lib/components/forms/EditMany.svelte           |  9 +--------
 src/lib/components/forms/EditNote.svelte           |  8 +-------
 src/lib/components/forms/EditProject.svelte        |  9 +--------
 src/lib/components/forms/EditSections.svelte       |  7 +------
 src/lib/components/forms/InviteCollaborator.svelte | 10 +---------
 src/lib/components/forms/Projects.svelte           |  4 +---
 src/lib/components/forms/RemoveCollaborator.svelte | 12 +-----------
 src/lib/components/forms/Reprocess.svelte          |  6 +-----
 src/lib/components/forms/UpdateCollaborator.svelte | 12 +-----------
 src/lib/components/forms/UserFeedback.svelte       |  5 +----
 src/style/kit.css                                  | 14 ++++++++++++++
 19 files changed, 32 insertions(+), 114 deletions(-)

diff --git a/src/lib/components/accounts/Mailkey.svelte b/src/lib/components/accounts/Mailkey.svelte
index 84f3c5345..927f7e9ac 100644
--- a/src/lib/components/accounts/Mailkey.svelte
+++ b/src/lib/components/accounts/Mailkey.svelte
@@ -55,7 +55,7 @@
 
 <Modal on:close>
   <h1 slot="title">{$_("mailkey.title")}</h1>
-  <div class="content">
+  <div class="modal-form content">
     <div class="description">{@html $_("mailkey.description")}</div>
     {#if message}
       <p class="message" class:error>
@@ -74,9 +74,6 @@
 </Modal>
 
 <style>
-  .content {
-    padding: 1rem;
-  }
 
   .description {
     columns: 2;
diff --git a/src/lib/components/forms/ChangeOwner.svelte b/src/lib/components/forms/ChangeOwner.svelte
index c62d47013..408141199 100644
--- a/src/lib/components/forms/ChangeOwner.svelte
+++ b/src/lib/components/forms/ChangeOwner.svelte
@@ -152,7 +152,7 @@ Change owner of one or more documents.
   }
 </script>
 
-<form {action} method="post" use:enhance={onSubmit}>
+<form class="modal-form" {action} method="post" use:enhance={onSubmit}>
   <Flex direction="column" gap={1}>
     <ShowSize size={count}>
       <Flex direction="column">
@@ -225,8 +225,6 @@ Change owner of one or more documents.
 <style>
   form {
     color: var(--gray-5, #233944);
-    width: 100%;
-    padding: 1rem;
   }
 
   label {
diff --git a/src/lib/components/forms/ConfirmDelete.svelte b/src/lib/components/forms/ConfirmDelete.svelte
index 4f856b355..dd606865e 100644
--- a/src/lib/components/forms/ConfirmDelete.svelte
+++ b/src/lib/components/forms/ConfirmDelete.svelte
@@ -73,7 +73,7 @@ Confirm deletion or one or more documents.
   }
 </script>
 
-<form {action} method="post" use:enhance={onSubmit}>
+<form class="modal-form" {action} method="post" use:enhance={onSubmit}>
   <Flex direction="column" gap={1}>
     <ShowSize size={count}>
       <div>
@@ -113,7 +113,5 @@ Confirm deletion or one or more documents.
 <style>
   form {
     color: var(--gray-5, #233944);
-    width: 100%;
-    padding: 1rem;
   }
 </style>
diff --git a/src/lib/components/forms/ConfirmRedaction.svelte b/src/lib/components/forms/ConfirmRedaction.svelte
index 99e5f58aa..1f27a3a38 100644
--- a/src/lib/components/forms/ConfirmRedaction.svelte
+++ b/src/lib/components/forms/ConfirmRedaction.svelte
@@ -59,7 +59,7 @@ This almost certainly lives in a modal.
   }
 </script>
 
-<form {action} method="post" use:enhance={onSubmit}>
+<form class="modal-form" {action} method="post" use:enhance={onSubmit}>
   <Flex direction="column" gap={1}>
     <p>{$_("redact.really")}</p>
 
@@ -89,10 +89,6 @@ This almost certainly lives in a modal.
 </form>
 
 <style>
-  form {
-    padding: 1rem;
-  }
-
   .error {
     color: var(--error, var(--red-3));
   }
diff --git a/src/lib/components/forms/DeleteProject.svelte b/src/lib/components/forms/DeleteProject.svelte
index 90d6f3b67..dd9538905 100644
--- a/src/lib/components/forms/DeleteProject.svelte
+++ b/src/lib/components/forms/DeleteProject.svelte
@@ -20,7 +20,7 @@ Confirm project deletion.
   $: action = new URL("?/delete", canonicalUrl(project)).href;
 </script>
 
-<form {action} method="post">
+<form class="modal-form--flex" {action} method="post">
   <p>{$_("projects.delete.really", { values: { project: project.title } })}</p>
 
   <Flex>
@@ -36,10 +36,6 @@ Confirm project deletion.
 
 <style>
   form {
-    display: flex;
-    flex-direction: column;
     gap: 1rem;
-    width: 100%;
-    padding: 1rem;
   }
 </style>
diff --git a/src/lib/components/forms/Edit.svelte b/src/lib/components/forms/Edit.svelte
index a5b7c0bf6..1f8935565 100644
--- a/src/lib/components/forms/Edit.svelte
+++ b/src/lib/components/forms/Edit.svelte
@@ -63,7 +63,7 @@ Usually this will be rendered inside a modal, but it doesn't have to be.
   }
 </script>
 
-<form {action} method="post" use:enhance={onSubmit}>
+<form class="modal-form" {action} method="post" use:enhance={onSubmit}>
   <Flex direction="column" gap={1}>
     <!-- Add any header and messaging using this slot -->
     <slot />
@@ -133,10 +133,3 @@ Usually this will be rendered inside a modal, but it doesn't have to be.
     </Flex>
   </Flex>
 </form>
-
-<style>
-  form {
-    width: 100%;
-    padding: 1rem;
-  }
-</style>
diff --git a/src/lib/components/forms/EditAccess.svelte b/src/lib/components/forms/EditAccess.svelte
index 3ae699aa1..f6579d450 100644
--- a/src/lib/components/forms/EditAccess.svelte
+++ b/src/lib/components/forms/EditAccess.svelte
@@ -59,7 +59,7 @@ Usually this will be rendered inside a modal, but it doesn't have to be.
   }
 </script>
 
-<form {action} method="post" use:enhance={onSubmit}>
+<form class="modal-form" {action} method="post" use:enhance={onSubmit}>
   <Flex direction="column" gap={1}>
     <!-- Add any header and messaging using this slot -->
     <slot />
@@ -102,10 +102,3 @@ Usually this will be rendered inside a modal, but it doesn't have to be.
     </Flex>
   </Flex>
 </form>
-
-<style>
-  form {
-    width: 100%;
-    padding: 1rem;
-  }
-</style>
diff --git a/src/lib/components/forms/EditData.svelte b/src/lib/components/forms/EditData.svelte
index 4ff702594..c260a5702 100644
--- a/src/lib/components/forms/EditData.svelte
+++ b/src/lib/components/forms/EditData.svelte
@@ -69,7 +69,7 @@
   }
 </script>
 
-<form {action} method="post" use:enhance={onSubmit}>
+<form class="modal-form" {action} method="post" use:enhance={onSubmit}>
   <table>
     <thead>
       <tr>
@@ -114,11 +114,6 @@
     width: 100%;
   }
 
-  form {
-    width: 100%;
-    padding: 1rem;
-  }
-
   th {
     text-align: start;
     font-size: var(--font-md);
diff --git a/src/lib/components/forms/EditMany.svelte b/src/lib/components/forms/EditMany.svelte
index d536ab268..b7e41fe2c 100644
--- a/src/lib/components/forms/EditMany.svelte
+++ b/src/lib/components/forms/EditMany.svelte
@@ -71,7 +71,7 @@ Usually this will be rendered inside a modal, but it doesn't have to be.
   }
 </script>
 
-<form {action} method="post" use:enhance={onSubmit}>
+<form class="modal-form" {action} method="post" use:enhance={onSubmit}>
   <Flex direction="column" gap={1}>
     <!-- Add any header and messaging using this slot -->
     <slot />
@@ -146,10 +146,3 @@ Usually this will be rendered inside a modal, but it doesn't have to be.
     </Flex>
   </Flex>
 </form>
-
-<style>
-  form {
-    width: 100%;
-    padding: 1rem;
-  }
-</style>
diff --git a/src/lib/components/forms/EditNote.svelte b/src/lib/components/forms/EditNote.svelte
index cd119fe80..ca729a940 100644
--- a/src/lib/components/forms/EditNote.svelte
+++ b/src/lib/components/forms/EditNote.svelte
@@ -46,7 +46,7 @@ Positioning and generating coordinates should happen outside of this form.
   }
 </script>
 
-<form {action} method="post" class:page_level use:enhance={onSubmit}>
+<form class="modal-form" {action} method="post" class:page_level use:enhance={onSubmit}>
   <Flex direction="column" gap={1}>
     <Field title={$_("annotate.fields.title")} required>
       <Text
@@ -92,9 +92,3 @@ Positioning and generating coordinates should happen outside of this form.
     </Flex>
   </Flex>
 </form>
-
-<style>
-  form {
-    padding: 1rem;
-  }
-</style>
diff --git a/src/lib/components/forms/EditProject.svelte b/src/lib/components/forms/EditProject.svelte
index eae4417fa..edb7eb544 100644
--- a/src/lib/components/forms/EditProject.svelte
+++ b/src/lib/components/forms/EditProject.svelte
@@ -43,7 +43,7 @@ Edit project metadata
   }
 </script>
 
-<form {action} method="post" use:enhance={onSubmit}>
+<form class="modal-form" {action} method="post" use:enhance={onSubmit}>
   <Flex direction="column" gap={1}>
     <Field title={$_("projects.fields.title")} required>
       <Text
@@ -77,10 +77,3 @@ Edit project metadata
     </Flex>
   </Flex>
 </form>
-
-<style>
-  form {
-    width: 100%;
-    padding: 1rem;
-  }
-</style>
diff --git a/src/lib/components/forms/EditSections.svelte b/src/lib/components/forms/EditSections.svelte
index 5eac54b45..fc3220584 100644
--- a/src/lib/components/forms/EditSections.svelte
+++ b/src/lib/components/forms/EditSections.svelte
@@ -36,7 +36,7 @@ This form is entirely client-side.
   });
 </script>
 
-<form method="post">
+<form class="modal-form" method="post">
   <table bind:this={table}>
     {#if sections.length}
       <thead>
@@ -96,11 +96,6 @@ This form is entirely client-side.
     width: 100%;
   }
 
-  form {
-    padding: 1rem;
-    width: 100%;
-  }
-
   td,
   th {
     padding: 0 0.5rem 0.5rem 0;
diff --git a/src/lib/components/forms/InviteCollaborator.svelte b/src/lib/components/forms/InviteCollaborator.svelte
index 5560bf2a4..67bc552a0 100644
--- a/src/lib/components/forms/InviteCollaborator.svelte
+++ b/src/lib/components/forms/InviteCollaborator.svelte
@@ -43,7 +43,7 @@ Invite a new collaborator to a project
   }
 </script>
 
-<form {action} method="post" use:enhance={onSubmit}>
+<form class="modal-form--flex" {action} method="post" use:enhance={onSubmit}>
   <Field
     title={$_("common.emailAddress")}
     sronly
@@ -69,14 +69,6 @@ Invite a new collaborator to a project
 </form>
 
 <style>
-  form {
-    display: flex;
-    flex-direction: column;
-    gap: 0.75rem;
-    width: 100%;
-    padding: 1rem;
-  }
-
   .error {
     color: var(--error);
     font-size: var(--font-sm);
diff --git a/src/lib/components/forms/Projects.svelte b/src/lib/components/forms/Projects.svelte
index f76e9126f..a42dbf154 100644
--- a/src/lib/components/forms/Projects.svelte
+++ b/src/lib/components/forms/Projects.svelte
@@ -101,7 +101,7 @@ and we don't want to do that everywhere.
   }
 </script>
 
-<div class="container">
+<div class="modal-form container">
   <ShowSize size={documents.length}>
     <p>{$_("edit.many", { values: { n: documents.length } })}</p>
     <Tip mode="error" slot="empty">
@@ -162,8 +162,6 @@ and we don't want to do that everywhere.
     display: flex;
     flex-direction: column;
     gap: 0.5rem;
-    width: 100%;
-    padding: 1rem;
   }
 
   .projects {
diff --git a/src/lib/components/forms/RemoveCollaborator.svelte b/src/lib/components/forms/RemoveCollaborator.svelte
index 00adffa47..800db5ec7 100644
--- a/src/lib/components/forms/RemoveCollaborator.svelte
+++ b/src/lib/components/forms/RemoveCollaborator.svelte
@@ -43,7 +43,7 @@ Remove a collaborator from a project
   }
 </script>
 
-<form {action} method="post" on:submit={onSubmit}>
+<form class="modal-form--flex" {action} method="post" on:submit={onSubmit}>
   <p>{$_("collaborators.remove.message", { values: { name, title } })}</p>
   <input type="hidden" name="user" value={user.user.id} />
   <Flex class="buttons">
@@ -51,13 +51,3 @@ Remove a collaborator from a project
     <Button on:click={() => dispatch("close")}>{$_("dialog.cancel")}</Button>
   </Flex>
 </form>
-
-<style>
-  form {
-    display: flex;
-    flex-direction: column;
-    gap: 0.75rem;
-    width: 100%;
-    padding: 1rem;
-  }
-</style>
diff --git a/src/lib/components/forms/Reprocess.svelte b/src/lib/components/forms/Reprocess.svelte
index 73c23c874..884122608 100644
--- a/src/lib/components/forms/Reprocess.svelte
+++ b/src/lib/components/forms/Reprocess.svelte
@@ -133,7 +133,7 @@ This will mostly be used inside a modal but isn't dependent on one.
   }
 </script>
 
-<form method="post" on:submit={onSubmit}>
+<form class="modal-form--flex" method="post" on:submit={onSubmit}>
   <Flex direction="column" gap={1.5}>
     <!-- Add any header and messaging using this slot -->
     <slot>
@@ -244,11 +244,7 @@ This will mostly be used inside a modal but isn't dependent on one.
 
 <style>
   form {
-    display: flex;
-    flex-flow: column nowrap;
     gap: 0.5rem;
-    width: 100%;
-    padding: 1rem;
   }
 
   .disclaimer {
diff --git a/src/lib/components/forms/UpdateCollaborator.svelte b/src/lib/components/forms/UpdateCollaborator.svelte
index bd1529058..bd3cb1367 100644
--- a/src/lib/components/forms/UpdateCollaborator.svelte
+++ b/src/lib/components/forms/UpdateCollaborator.svelte
@@ -47,7 +47,7 @@ Update permissions for a single collaborator on a project
   }
 </script>
 
-<form {action} method="post" use:enhance={onSubmit}>
+<form class="modal-form--flex" {action} method="post" use:enhance={onSubmit}>
   <p>{$_("collaborators.update.message", { values: { name, title } })}</p>
 
   <input type="hidden" name="user" value={user.user.id} />
@@ -58,13 +58,3 @@ Update permissions for a single collaborator on a project
     <Button on:click={() => dispatch("close")}>{$_("dialog.cancel")}</Button>
   </Flex>
 </form>
-
-<style>
-  form {
-    display: flex;
-    flex-direction: column;
-    gap: 0.75rem;
-    width: 100%;
-    padding: 1rem;
-  }
-</style>
diff --git a/src/lib/components/forms/UserFeedback.svelte b/src/lib/components/forms/UserFeedback.svelte
index 6b4b410be..9ca820b3e 100644
--- a/src/lib/components/forms/UserFeedback.svelte
+++ b/src/lib/components/forms/UserFeedback.svelte
@@ -63,7 +63,7 @@
 </script>
 
 <form
-  class="userFeedback"
+  class="modal-form--flex userFeedback"
   method="POST"
   action="{APP_URL}?/feedback"
   use:enhance={handleSubmit}
@@ -126,10 +126,7 @@
 
 <style>
   form {
-    display: flex;
-    flex-direction: column;
     gap: 0.5rem;
-    padding: 1rem;
   }
   header,
   footer {
diff --git a/src/style/kit.css b/src/style/kit.css
index b3afc9587..2b0535de4 100644
--- a/src/style/kit.css
+++ b/src/style/kit.css
@@ -218,6 +218,20 @@ hr.divider {
   box-shadow: 0px 2px 4px 2px var(--shadow-1, rgba(30, 48, 56, 0.15));
 }
 
+/* Modal Form Utilities */
+.modal-form {
+  width: 100%;
+  padding: 1rem;
+}
+
+.modal-form--flex {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  width: 100%;
+  padding: 1rem;
+}
+
 @keyframes spin {
   0% {
     transform: rotate(0deg);

From 26afbc49f1a986b4f8db75c6f8c63a735c16d9b9 Mon Sep 17 00:00:00 2001
From: Allan Lasser <lasser.allan@gmail.com>
Date: Thu, 8 Jan 2026 16:00:30 -0500
Subject: [PATCH 06/10] Fix stories

---
 src/lib/components/documents/Share.svelte     | 118 ++++++++++--------
 src/lib/components/forms/Projects.svelte      |   1 +
 .../layouts/stories/Modal.stories.svelte      |  10 +-
 3 files changed, 69 insertions(+), 60 deletions(-)

diff --git a/src/lib/components/documents/Share.svelte b/src/lib/components/documents/Share.svelte
index dcb891cde..bded0d382 100644
--- a/src/lib/components/documents/Share.svelte
+++ b/src/lib/components/documents/Share.svelte
@@ -144,6 +144,7 @@
       </Tip>
     </div>
   {/if}
+  <div class="flex">
   <div class="left">
     <div class="tabs" role="tablist">
       <Tab
@@ -216,61 +217,62 @@
         />
       </Field>
 
-      <Field>
+        <Field>
+          <FieldLabel>
+            {$_("share.iframe")}
+            <Copy slot="action" text={iframe} />
+          </FieldLabel>
+          <TextArea
+            value={iframe}
+            --font-family="var(--font-mono)"
+            --font-size="var(--font-sm)"
+            --resize="vertical"
+          />
+        </Field>
+      </div>
+    </div>
+    <div class="right">
+      <header>
         <FieldLabel>
-          {$_("share.iframe")}
-          <Copy slot="action" text={iframe} />
+          {$_("share.preview")}
+          <div slot="action">
+            {#if customizeEmbedOpen}
+              <Button
+                size="small"
+                ghost
+                mode="primary"
+                on:click={() => (customizeEmbedOpen = false)}
+              >
+                <Check16 />
+                {$_("share.save")}
+              </Button>
+            {:else}
+              <Button
+                size="small"
+                ghost
+                mode="primary"
+                on:click={() => (customizeEmbedOpen = true)}
+                disabled={currentTab !== "document"}
+              >
+                <Sliders16 />
+                {$_("share.customize")}
+              </Button>
+            {/if}
+          </div>
         </FieldLabel>
-        <TextArea
-          value={iframe}
-          --font-family="var(--font-mono)"
-          --font-size="var(--font-sm)"
-          --resize="vertical"
-        />
-      </Field>
+      </header>
+      <main>
+        {#if customizeEmbedOpen}
+          <div class="embedSettings">
+            <CustomizeEmbed />
+          </div>
+        {:else}
+          <iframe class="embed" title="Embed Preview" src={embedSrc?.toString()}
+          ></iframe>
+        {/if}
+      </main>
     </div>
   </div>
-  <div class="right">
-    <header>
-      <FieldLabel>
-        {$_("share.preview")}
-        <div slot="action">
-          {#if customizeEmbedOpen}
-            <Button
-              size="small"
-              ghost
-              mode="primary"
-              on:click={() => (customizeEmbedOpen = false)}
-            >
-              <Check16 />
-              {$_("share.save")}
-            </Button>
-          {:else}
-            <Button
-              size="small"
-              ghost
-              mode="primary"
-              on:click={() => (customizeEmbedOpen = true)}
-              disabled={currentTab !== "document"}
-            >
-              <Sliders16 />
-              {$_("share.customize")}
-            </Button>
-          {/if}
-        </div>
-      </FieldLabel>
-    </header>
-    <main>
-      {#if customizeEmbedOpen}
-        <div class="embedSettings">
-          <CustomizeEmbed />
-        </div>
-      {:else}
-        <iframe class="embed" title="Embed Preview" src={embedSrc?.toString()}
-        ></iframe>
-      {/if}
-    </main>
-  </div>
 </div>
 {#if editOpen}
   <Portal>
@@ -287,15 +289,21 @@
     aspect-ratio: 2 / 3;
     width: 100%;
     height: 100%;
+    padding: 1.5rem;
+    overflow-y: auto;
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+  }
+  .flex {
+    flex: 1 1 auto;
     display: flex;
     flex-wrap: wrap;
     gap: 1rem;
-    padding: 1.5rem;
-    overflow-y: auto;
   }
   .banner {
-    flex: 1 1 100%;
-    margin-bottom: 1rem;
+    flex: 0 0 auto;
+    margin: 0;
   }
   .privateWarning {
     width: 100%;
diff --git a/src/lib/components/forms/Projects.svelte b/src/lib/components/forms/Projects.svelte
index a42dbf154..6c6a2bd94 100644
--- a/src/lib/components/forms/Projects.svelte
+++ b/src/lib/components/forms/Projects.svelte
@@ -162,6 +162,7 @@ and we don't want to do that everywhere.
     display: flex;
     flex-direction: column;
     gap: 0.5rem;
+    padding: 0;
   }
 
   .projects {
diff --git a/src/lib/components/layouts/stories/Modal.stories.svelte b/src/lib/components/layouts/stories/Modal.stories.svelte
index 466ccef50..d43aa9b49 100644
--- a/src/lib/components/layouts/stories/Modal.stories.svelte
+++ b/src/lib/components/layouts/stories/Modal.stories.svelte
@@ -11,9 +11,9 @@
 
 <Story name="With Title">
   <Modal>
-    <h1 slot="title">The Ship</h1>
-    <div>
-      <p>
+    <h1 slot="title" style="margin: 0;">The Ship</h1>
+    <div style="padding: 1rem;">
+      <p style="margin: 0;">
         In bed we concocted our plans for the morrow. But to my surprise and no
         small concern, Queequeg now gave me to understand, that he had been
         diligently consulting Yojo—the name of his black little god—and Yojo had
@@ -33,8 +33,8 @@
 
 <Story name="Without Title">
   <Modal>
-    <div>
-      <p>
+    <div style="padding: 1rem;">
+      <p style="margin: 0;">
         In bed we concocted our plans for the morrow. But to my surprise and no
         small concern, Queequeg now gave me to understand, that he had been
         diligently consulting Yojo—the name of his black little god—and Yojo had

From e46e274fe40b92ac9f660b974d873b4dea8ed5ec Mon Sep 17 00:00:00 2001
From: Allan Lasser <lasser.allan@gmail.com>
Date: Mon, 12 Jan 2026 14:46:36 -0700
Subject: [PATCH 07/10] Update snapshot

---
 .../tests/__snapshots__/Mailkey.test.ts.snap  | 218 +++++++++---------
 1 file changed, 114 insertions(+), 104 deletions(-)

diff --git a/src/lib/components/accounts/tests/__snapshots__/Mailkey.test.ts.snap b/src/lib/components/accounts/tests/__snapshots__/Mailkey.test.ts.snap
index 47298f8c8..d249cba94 100644
--- a/src/lib/components/accounts/tests/__snapshots__/Mailkey.test.ts.snap
+++ b/src/lib/components/accounts/tests/__snapshots__/Mailkey.test.ts.snap
@@ -7,6 +7,7 @@ exports[`Mailkey 1`] = `
   >
     <div
       class="dialog card svelte-10x59h"
+      style="max-width: 48rem; max-height: 90vh;"
     >
       <header
         class="svelte-10x59h"
@@ -49,65 +50,69 @@ exports[`Mailkey 1`] = `
         class="content svelte-10x59h"
       >
         <div
-          class="description svelte-ifcgmn"
+          class="modal-form content"
         >
-          <p>
-            You can upload documents to your account by sending them to to a special email address as attachments.
-          </p>
-          <p>
-            <strong>
-              For security reasons, this email is only shown to you once. Please copy it to a secure location.
-            </strong>
-          </p>
-          <p>
-            This address will accept attachments from any email account. Documents are uploaded as private. Generating a new upload address will disable any previously created addresses.
-          </p>
-          <p>
-            We’d love your feedback and to hear about creative use cases at 
-            <a
-              href="mailto:info@documentcloud.org"
-              target="_blank"
-            >
-              info@documentcloud.org
-            </a>
-            .
-          </p>
-          <!---->
-        </div>
-         
-        <!---->
-         
-        <div
-          style="display: flex; flex-direction: row; flex-wrap: wrap; align-items: stretch; justify-content: center; gap: 1rem;"
-        >
-          <!---->
-          <!---->
-          <button
-            class="primary normal svelte-1owegvi minW"
-            title=""
-            type="button"
+          <div
+            class="description svelte-ifcgmn"
           >
-            Create New Email Address
+            <p>
+              You can upload documents to your account by sending them to to a special email address as attachments.
+            </p>
+            <p>
+              <strong>
+                For security reasons, this email is only shown to you once. Please copy it to a secure location.
+              </strong>
+            </p>
+            <p>
+              This address will accept attachments from any email account. Documents are uploaded as private. Generating a new upload address will disable any previously created addresses.
+            </p>
+            <p>
+              We’d love your feedback and to hear about creative use cases at 
+              <a
+                href="mailto:info@documentcloud.org"
+                target="_blank"
+              >
+                info@documentcloud.org
+              </a>
+              .
+            </p>
             <!---->
-          </button>
-          
-          <!---->
+          </div>
            
           <!---->
-          <button
-            class="danger normal svelte-1owegvi minW"
-            title=""
-            type="button"
+           
+          <div
+            style="display: flex; flex-direction: row; flex-wrap: wrap; align-items: stretch; justify-content: center; gap: 1rem;"
           >
-            Delete Existing Address
             <!---->
-          </button>
-          
-          <!---->
+            <!---->
+            <button
+              class="primary normal svelte-1owegvi minW"
+              title=""
+              type="button"
+            >
+              Create New Email Address
+              <!---->
+            </button>
+            
+            <!---->
+             
+            <!---->
+            <button
+              class="danger normal svelte-1owegvi minW"
+              title=""
+              type="button"
+            >
+              Delete Existing Address
+              <!---->
+            </button>
+            
+            <!---->
+            <!---->
+          </div>
           <!---->
         </div>
         <!---->
-        <!---->
       </main>
     </div>
   </div>
@@ -123,6 +128,7 @@ exports[`Mailkey 2`] = `
   >
     <div
       class="dialog card svelte-10x59h"
+      style="max-width: 48rem; max-height: 90vh;"
     >
       <header
         class="svelte-10x59h"
@@ -165,71 +171,75 @@ exports[`Mailkey 2`] = `
         class="content svelte-10x59h"
       >
         <div
-          class="description svelte-ifcgmn"
+          class="modal-form content"
         >
-          <p>
-            You can upload documents to your account by sending them to to a special email address as attachments.
-          </p>
-          <p>
-            <strong>
-              For security reasons, this email is only shown to you once. Please copy it to a secure location.
-            </strong>
-          </p>
-          <p>
-            This address will accept attachments from any email account. Documents are uploaded as private. Generating a new upload address will disable any previously created addresses.
-          </p>
-          <p>
-            We’d love your feedback and to hear about creative use cases at 
-            <a
-              href="mailto:info@documentcloud.org"
-              target="_blank"
-            >
-              info@documentcloud.org
-            </a>
-            .
-          </p>
-          <!---->
-        </div>
-         
-        <p
-          class="message svelte-ifcgmn"
-        >
-          Something happened
-          <!---->
-        </p>
-        <!---->
-         
-        <div
-          style="display: flex; flex-direction: row; flex-wrap: wrap; align-items: stretch; justify-content: center; gap: 1rem;"
-        >
-          <!---->
-          <!---->
-          <button
-            class="primary normal svelte-1owegvi minW"
-            title=""
-            type="button"
+          <div
+            class="description svelte-ifcgmn"
           >
-            Create New Email Address
+            <p>
+              You can upload documents to your account by sending them to to a special email address as attachments.
+            </p>
+            <p>
+              <strong>
+                For security reasons, this email is only shown to you once. Please copy it to a secure location.
+              </strong>
+            </p>
+            <p>
+              This address will accept attachments from any email account. Documents are uploaded as private. Generating a new upload address will disable any previously created addresses.
+            </p>
+            <p>
+              We’d love your feedback and to hear about creative use cases at 
+              <a
+                href="mailto:info@documentcloud.org"
+                target="_blank"
+              >
+                info@documentcloud.org
+              </a>
+              .
+            </p>
             <!---->
-          </button>
-          
-          <!---->
+          </div>
            
-          <!---->
-          <button
-            class="danger normal svelte-1owegvi minW"
-            title=""
-            type="button"
+          <p
+            class="message svelte-ifcgmn"
           >
-            Delete Existing Address
+            Something happened
             <!---->
-          </button>
-          
+          </p>
           <!---->
+           
+          <div
+            style="display: flex; flex-direction: row; flex-wrap: wrap; align-items: stretch; justify-content: center; gap: 1rem;"
+          >
+            <!---->
+            <!---->
+            <button
+              class="primary normal svelte-1owegvi minW"
+              title=""
+              type="button"
+            >
+              Create New Email Address
+              <!---->
+            </button>
+            
+            <!---->
+             
+            <!---->
+            <button
+              class="danger normal svelte-1owegvi minW"
+              title=""
+              type="button"
+            >
+              Delete Existing Address
+              <!---->
+            </button>
+            
+            <!---->
+            <!---->
+          </div>
           <!---->
         </div>
         <!---->
-        <!---->
       </main>
     </div>
   </div>

From c4bccbc6234912c3efdcb73b376b3e76652ba55b Mon Sep 17 00:00:00 2001
From: Allan Lasser <lasser.allan@gmail.com>
Date: Mon, 12 Jan 2026 16:12:25 -0700
Subject: [PATCH 08/10] Story fixes

---
 src/lib/components/common/Tip.svelte          |  1 +
 .../documents/stories/Share.stories.svelte    | 28 +++++++++----------
 2 files changed, 14 insertions(+), 15 deletions(-)

diff --git a/src/lib/components/common/Tip.svelte b/src/lib/components/common/Tip.svelte
index 73432152a..286622a47 100644
--- a/src/lib/components/common/Tip.svelte
+++ b/src/lib/components/common/Tip.svelte
@@ -27,6 +27,7 @@
   .icon {
     display: flex;
     align-items: center;
+    align-self: center;
   }
   .inner {
     margin-top: 0.125rem;
diff --git a/src/lib/components/documents/stories/Share.stories.svelte b/src/lib/components/documents/stories/Share.stories.svelte
index 40ac6667d..afb47f0bf 100644
--- a/src/lib/components/documents/stories/Share.stories.svelte
+++ b/src/lib/components/documents/stories/Share.stories.svelte
@@ -1,7 +1,7 @@
 <script context="module" lang="ts">
   import type { Document } from "$lib/api/types";
 
-  import { Story, Template } from "@storybook/addon-svelte-csf";
+  import { Story } from "@storybook/addon-svelte-csf";
   import Share from "../Share.svelte";
   import Toaster from "../../layouts/Toaster.svelte";
 
@@ -10,22 +10,17 @@
 
   export const meta = {
     title: "Documents / Share",
-    component: Share,
-    parameters: { layout: "centered" },
+    component: Share
   };
 </script>
 
-<Template let:args>
-  <div class="vh-100 vw-100">
-    <Share
-      document={args.document}
-      currentTab={args.currentTab}
-    />
-    <Toaster />
-  </div>
-</Template>
-
-<Story name="Document" args={{document, currentTab: 'document'}}></Story>
+<Story name="Document">
+  <Share
+    document={document}
+    currentTab="document"
+  />
+  <Toaster />
+</Story>
 
 <Story name="Private Document">
   <Share
@@ -56,7 +51,10 @@
   <Toaster />
 </Story>
 
-<Story name="Note" args={{ document, currentTab: "note" }} />
+<Story name="Note">
+  <Share {document} currentTab="note" />
+  <Toaster />
+</Story>
 
 <style>
   .vh-100 {

From a63f0859803d0c878ce18c1f05196ae5769994d4 Mon Sep 17 00:00:00 2001
From: Chris Amico <eyeseast@gmail.com>
Date: Tue, 13 Jan 2026 09:12:23 -0500
Subject: [PATCH 09/10] format

---
 .../translate-changes/LANGUAGE_CODES.md       |  34 +++--
 .claude/skills/translate-changes/SKILL.md     |  10 +-
 src/lib/components/accounts/Mailkey.svelte    |   1 -
 src/lib/components/documents/Share.svelte     | 140 +++++++++---------
 .../documents/stories/Share.stories.svelte    |   7 +-
 src/lib/components/forms/AddOnDispatch.svelte |  11 +-
 src/lib/components/forms/EditNote.svelte      |   8 +-
 .../stories/AddOnDispatch.stories.svelte      |   2 +-
 src/lib/components/notes/Note.svelte          |   7 +-
 .../components/sidebar/DocumentActions.svelte |   7 +-
 src/lib/components/sidebar/Documents.svelte   |   4 +-
 src/lib/components/viewer/PageActions.svelte  |   7 +-
 12 files changed, 140 insertions(+), 98 deletions(-)

diff --git a/.claude/skills/translate-changes/LANGUAGE_CODES.md b/.claude/skills/translate-changes/LANGUAGE_CODES.md
index 2fee752d1..4d67714a0 100644
--- a/.claude/skills/translate-changes/LANGUAGE_CODES.md
+++ b/.claude/skills/translate-changes/LANGUAGE_CODES.md
@@ -2,15 +2,15 @@
 
 ## Supported Languages
 
-| Language | File | Code | Notes |
-|----------|------|------|-------|
-| English (source) | en.json | en | Source of truth for all translations |
-| German | de.json | de | Formal "Sie" form |
-| Spanish | es.json | es | Latin American Spanish |
-| French | fr.json | fr | Standard French |
-| Italian | it.json | it | Standard Italian |
-| Russian | ru.json | ru | Includes ICU plural rules |
-| Ukrainian | uk.json | uk | Includes ICU plural rules |
+| Language         | File    | Code | Notes                                |
+| ---------------- | ------- | ---- | ------------------------------------ |
+| English (source) | en.json | en   | Source of truth for all translations |
+| German           | de.json | de   | Formal "Sie" form                    |
+| Spanish          | es.json | es   | Latin American Spanish               |
+| French           | fr.json | fr   | Standard French                      |
+| Italian          | it.json | it   | Standard Italian                     |
+| Russian          | ru.json | ru   | Includes ICU plural rules            |
+| Ukrainian        | uk.json | uk   | Includes ICU plural rules            |
 
 ## File Locations
 
@@ -37,6 +37,7 @@ Each language file maintains the same nested key structure as `en.json`:
 ### HTML Tags
 
 Many strings contain HTML for links or formatting:
+
 ```json
 "signedOut": "You must <a href=\"{href}\">sign in</a> before..."
 ```
@@ -46,6 +47,7 @@ Translations MUST preserve the HTML structure exactly.
 ### Variable Placeholders
 
 Strings may contain variables in curly braces:
+
 - `{href}` - URLs
 - `{n}` - Numbers
 - `{name}` - Names or identifiers
@@ -61,6 +63,7 @@ Some strings use ICU MessageFormat for pluralization:
 ```
 
 Russian and Ukrainian have complex plural rules:
+
 ```json
 "labelSelected": "{n, plural, one {# документ} few {# документа} many {# документов} other {# документов}}"
 ```
@@ -68,30 +71,36 @@ Russian and Ukrainian have complex plural rules:
 ## Translation Style Guidelines
 
 ### German (de.json)
+
 - Use formal "Sie" form
 - Compound nouns are common
 - Example: "anmelden" (sign in), "ausführen" (execute)
 
 ### Spanish (es.json)
+
 - Latin American Spanish preferred
 - Use "usted" form (formal)
 - Example: "iniciar sesión" (sign in), "ejecutar" (execute)
 
 ### French (fr.json)
+
 - Use "vous" form (formal)
 - Elision rules apply (l' before vowels)
 - Example: "se connecter" (sign in), "exécuter" (execute)
 
 ### Italian (it.json)
+
 - Use "Lei" form (formal in some contexts) or informal based on existing patterns
 - Example: "accedere" (sign in), "eseguire" (execute)
 
 ### Russian (ru.json)
+
 - Cyrillic alphabet
 - Complex case and gender agreement
 - Example: "войти" (sign in), "запустить" (execute)
 
 ### Ukrainian (uk.json)
+
 - Cyrillic alphabet (different from Russian)
 - Similar grammar to Russian but distinct vocabulary
 - Example: "увійти" (sign in), "запустити" (execute)
@@ -99,6 +108,7 @@ Russian and Ukrainian have complex plural rules:
 ## Encoding
 
 All JSON files use Unicode escape sequences for non-ASCII characters:
+
 - `é` becomes `\u00e9`
 - `ñ` becomes `\u00f1`
 - Cyrillic characters are also escaped
@@ -108,6 +118,7 @@ The Edit tool handles this automatically - no manual encoding needed.
 ## Verification Commands
 
 ### Check a specific key across all languages
+
 ```bash
 for file in src/langs/json/{de,es,fr,it,ru,uk}.json; do
   echo "=== $file ==="
@@ -116,6 +127,7 @@ done
 ```
 
 ### Validate JSON syntax
+
 ```bash
 for file in src/langs/json/*.json; do
   echo "Validating $file..."
@@ -124,6 +136,7 @@ done
 ```
 
 ### Compare keys between en.json and another language
+
 ```bash
 diff \
   <(jq -r 'keys | .[]' src/langs/json/en.json) \
@@ -133,15 +146,18 @@ diff \
 ## Common Issues
 
 ### Missing keys
+
 - Only translate MODIFIED keys, not missing ones
 - Many existing keys are intentionally untranslated
 
 ### Formatting
+
 - JSON must remain valid after edits
 - Maintain consistent indentation (2 spaces)
 - Commas must be correct (no trailing comma on last item)
 
 ### Context
+
 - Consider the full key path for context
 - Dialog buttons differ from page headers
 - Form labels differ from help text
diff --git a/.claude/skills/translate-changes/SKILL.md b/.claude/skills/translate-changes/SKILL.md
index 140fbbd7c..82f3e5af8 100644
--- a/.claude/skills/translate-changes/SKILL.md
+++ b/.claude/skills/translate-changes/SKILL.md
@@ -63,18 +63,21 @@ This captures both uncommitted modifications and changes committed in the curren
 ### Step 2: Parse changes
 
 Look for lines starting with `+` in the diff that contain JSON keys:
+
 - Lines like `+    "keyName": "Value"` indicate additions or modifications
 - Ignore lines that are just structural changes (commas, brackets)
 
 ### Step 3: Extract key paths
 
 For each modified line, determine:
+
 - The full JSON path (e.g., `addonDispatchDialog.signedOut`)
 - The new English value
 
 ### Step 4: Translate
 
 For each modified key:
+
 1. Generate translations for all 6 languages
 2. Maintain the same HTML structure (e.g., `<a href="{href}">text</a>`)
 3. Preserve placeholders like `{href}`, `{n}`, etc.
@@ -83,6 +86,7 @@ For each modified key:
 ### Step 5: Update files
 
 For each language file:
+
 1. Read the current content
 2. Locate the key to update using the JSON path
 3. Use Edit tool to update the specific key
@@ -99,11 +103,13 @@ For each language file:
 ## Example Translations
 
 English:
+
 ```json
 "signedOut": "You must <a href=\"{href}\">sign in</a> before dispatching this add-on."
 ```
 
 Translations should maintain:
+
 - The `<a href="{href}">` structure
 - The `{href}` placeholder
 - Appropriate word order for each language
@@ -111,6 +117,7 @@ Translations should maintain:
 ## Output Format
 
 After translating, show:
+
 1. Summary of changes detected
 2. List of keys modified
 3. Confirmation of files updated
@@ -119,6 +126,7 @@ After translating, show:
 ## Verification
 
 After updates, verify with:
+
 ```bash
 for file in src/langs/json/{de,es,fr,it,ru,uk}.json; do
   echo "=== $file ==="
@@ -131,4 +139,4 @@ done
 - JSON files use Unicode escape sequences (e.g., `\u00e9` for é)
 - The Edit tool will preserve this encoding automatically
 - Always use Edit tool, not Bash sed/awk, to maintain JSON validity
-- Files should remain valid JSON after updates
\ No newline at end of file
+- Files should remain valid JSON after updates
diff --git a/src/lib/components/accounts/Mailkey.svelte b/src/lib/components/accounts/Mailkey.svelte
index 927f7e9ac..24dae73d6 100644
--- a/src/lib/components/accounts/Mailkey.svelte
+++ b/src/lib/components/accounts/Mailkey.svelte
@@ -74,7 +74,6 @@
 </Modal>
 
 <style>
-
   .description {
     columns: 2;
     column-gap: 2rem;
diff --git a/src/lib/components/documents/Share.svelte b/src/lib/components/documents/Share.svelte
index bded0d382..b168bcff2 100644
--- a/src/lib/components/documents/Share.svelte
+++ b/src/lib/components/documents/Share.svelte
@@ -145,77 +145,77 @@
     </div>
   {/if}
   <div class="flex">
-  <div class="left">
-    <div class="tabs" role="tablist">
-      <Tab
-        on:click={() => (currentTab = "document")}
-        active={currentTab === "document"}
-      >
-        <File16 />
-        {$_("share.document")}
-      </Tab>
-      <Tab
-        on:click={() => (currentTab = "page")}
-        active={currentTab === "page"}
-      >
-        <Hash16 />
-        {$_("share.page")}
-      </Tab>
-      <Tab
-        on:click={() => (currentTab = "note")}
-        active={currentTab === "note"}
-        disabled={!document.notes || document.notes.length === 0}
-      >
-        <Note16 />
-        {$_("share.note")}
-      </Tab>
-    </div>
-    <div class="fields {currentTab}">
-      {#if currentTab === "page"}
-        <div class="subselection">
-          <Field>
-            <FieldLabel>{$_("share.fields.page")}:</FieldLabel>
-            <Number bind:value={page} min={1} max={document.page_count} />
-          </Field>
-        </div>
-      {:else if currentTab === "note" && noteOptions && noteOptions.length > 0}
-        <div class="subselection">
-          <Field>
-            <FieldLabel>{$_("share.fields.note")}:</FieldLabel>
-            <Select
-              name="note"
-              options={noteOptions}
-              value={note_id}
-              onChange={({ value }) => {
-                note_id = value;
-              }}
-            />
-          </Field>
-        </div>
-      {/if}
-      <Field>
-        <FieldLabel>
-          {$_("share.permalink")}
-          <Copy slot="action" text={permalink?.href} />
-        </FieldLabel>
-        <Text
-          value={permalink?.href}
-          --font-family="var(--font-mono)"
-          --font-size="var(--font-sm)"
-        />
-      </Field>
+    <div class="left">
+      <div class="tabs" role="tablist">
+        <Tab
+          on:click={() => (currentTab = "document")}
+          active={currentTab === "document"}
+        >
+          <File16 />
+          {$_("share.document")}
+        </Tab>
+        <Tab
+          on:click={() => (currentTab = "page")}
+          active={currentTab === "page"}
+        >
+          <Hash16 />
+          {$_("share.page")}
+        </Tab>
+        <Tab
+          on:click={() => (currentTab = "note")}
+          active={currentTab === "note"}
+          disabled={!document.notes || document.notes.length === 0}
+        >
+          <Note16 />
+          {$_("share.note")}
+        </Tab>
+      </div>
+      <div class="fields {currentTab}">
+        {#if currentTab === "page"}
+          <div class="subselection">
+            <Field>
+              <FieldLabel>{$_("share.fields.page")}:</FieldLabel>
+              <Number bind:value={page} min={1} max={document.page_count} />
+            </Field>
+          </div>
+        {:else if currentTab === "note" && noteOptions && noteOptions.length > 0}
+          <div class="subselection">
+            <Field>
+              <FieldLabel>{$_("share.fields.note")}:</FieldLabel>
+              <Select
+                name="note"
+                options={noteOptions}
+                value={note_id}
+                onChange={({ value }) => {
+                  note_id = value;
+                }}
+              />
+            </Field>
+          </div>
+        {/if}
+        <Field>
+          <FieldLabel>
+            {$_("share.permalink")}
+            <Copy slot="action" text={permalink?.href} />
+          </FieldLabel>
+          <Text
+            value={permalink?.href}
+            --font-family="var(--font-mono)"
+            --font-size="var(--font-sm)"
+          />
+        </Field>
 
-      <Field>
-        <FieldLabel>
-          {$_("share.embed")}
-          <Copy slot="action" text={embedSrc?.href} />
-        </FieldLabel>
-        <Text
-          value={embedSrc?.href}
-          --font-family="var(--font-mono)"
-          --font-size="var(--font-sm)"
-        />
-      </Field>
+        <Field>
+          <FieldLabel>
+            {$_("share.embed")}
+            <Copy slot="action" text={embedSrc?.href} />
+          </FieldLabel>
+          <Text
+            value={embedSrc?.href}
+            --font-family="var(--font-mono)"
+            --font-size="var(--font-sm)"
+          />
+        </Field>
 
         <Field>
           <FieldLabel>
diff --git a/src/lib/components/documents/stories/Share.stories.svelte b/src/lib/components/documents/stories/Share.stories.svelte
index afb47f0bf..aa6847bde 100644
--- a/src/lib/components/documents/stories/Share.stories.svelte
+++ b/src/lib/components/documents/stories/Share.stories.svelte
@@ -10,15 +10,12 @@
 
   export const meta = {
     title: "Documents / Share",
-    component: Share
+    component: Share,
   };
 </script>
 
 <Story name="Document">
-  <Share
-    document={document}
-    currentTab="document"
-  />
+  <Share {document} currentTab="document" />
   <Toaster />
 </Story>
 
diff --git a/src/lib/components/forms/AddOnDispatch.svelte b/src/lib/components/forms/AddOnDispatch.svelte
index 6356fe71a..e56843769 100644
--- a/src/lib/components/forms/AddOnDispatch.svelte
+++ b/src/lib/components/forms/AddOnDispatch.svelte
@@ -78,10 +78,7 @@
       }
     });
 
-    return new URL(
-      `?next=${encodeURIComponent(nextUrl.href)}`,
-      SIGN_IN_URL,
-    );
+    return new URL(`?next=${encodeURIComponent(nextUrl.href)}`, SIGN_IN_URL);
   }
 
   afterNavigate(() => {
@@ -253,7 +250,11 @@
       </Button>
     </div>
     <div class="controls" slot="signedOut">
-      <p>{@html $_("addonDispatchDialog.signedOut", { values: { href: sign_in_url.href }})}</p>
+      <p>
+        {@html $_("addonDispatchDialog.signedOut", {
+          values: { href: sign_in_url.href },
+        })}
+      </p>
     </div>
   </SignedIn>
 </form>
diff --git a/src/lib/components/forms/EditNote.svelte b/src/lib/components/forms/EditNote.svelte
index ca729a940..14c92f982 100644
--- a/src/lib/components/forms/EditNote.svelte
+++ b/src/lib/components/forms/EditNote.svelte
@@ -46,7 +46,13 @@ Positioning and generating coordinates should happen outside of this form.
   }
 </script>
 
-<form class="modal-form" {action} method="post" class:page_level use:enhance={onSubmit}>
+<form
+  class="modal-form"
+  {action}
+  method="post"
+  class:page_level
+  use:enhance={onSubmit}
+>
   <Flex direction="column" gap={1}>
     <Field title={$_("annotate.fields.title")} required>
       <Text
diff --git a/src/lib/components/forms/stories/AddOnDispatch.stories.svelte b/src/lib/components/forms/stories/AddOnDispatch.stories.svelte
index 1d3051ece..d9261e696 100644
--- a/src/lib/components/forms/stories/AddOnDispatch.stories.svelte
+++ b/src/lib/components/forms/stories/AddOnDispatch.stories.svelte
@@ -66,4 +66,4 @@
   }}
 />
 
-<Story name="Signed Out" args={addons[4]} parameters={{signedOut: true}} />
+<Story name="Signed Out" args={addons[4]} parameters={{ signedOut: true }} />
diff --git a/src/lib/components/notes/Note.svelte b/src/lib/components/notes/Note.svelte
index d4183d7ec..5463ac3d4 100644
--- a/src/lib/components/notes/Note.svelte
+++ b/src/lib/components/notes/Note.svelte
@@ -102,7 +102,12 @@
 </div>
 {#if !embed && shareNoteOpen}
   <Portal>
-    <Modal on:close={() => (shareNoteOpen = false)} fillViewport maxWidth="66rem" maxHeight="80vh">
+    <Modal
+      on:close={() => (shareNoteOpen = false)}
+      fillViewport
+      maxWidth="66rem"
+      maxHeight="80vh"
+    >
       <h1 slot="title">{$_("dialog.share")}</h1>
       <Share document={doc} note_id={note.id} currentTab="note" />
     </Modal>
diff --git a/src/lib/components/sidebar/DocumentActions.svelte b/src/lib/components/sidebar/DocumentActions.svelte
index 5610e6a7b..53d53d566 100644
--- a/src/lib/components/sidebar/DocumentActions.svelte
+++ b/src/lib/components/sidebar/DocumentActions.svelte
@@ -167,7 +167,12 @@ Most actual actions are deferred to their own forms, so this is more of a switch
 
 {#if visible}
   <Portal>
-    <Modal on:close={close} fillViewport={visible === "share"} maxWidth="90vw" maxHeight="80vh">
+    <Modal
+      on:close={close}
+      fillViewport={visible === "share"}
+      maxWidth="90vw"
+      maxHeight="80vh"
+    >
       <h1 slot="title">{$_(labels[visible])}</h1>
 
       {#if visible === "share"}
diff --git a/src/lib/components/sidebar/Documents.svelte b/src/lib/components/sidebar/Documents.svelte
index f59856248..d4f4b53c9 100644
--- a/src/lib/components/sidebar/Documents.svelte
+++ b/src/lib/components/sidebar/Documents.svelte
@@ -97,8 +97,8 @@
       </NavItem>
     {/if}
   </SidebarGroup>
-  <NavItem slot="signedOut" href={searchUrl('')}>
+  <NavItem slot="signedOut" href={searchUrl("")}>
     <File16 slot="start" />
     {$_("documents.publicDocuments")}
   </NavItem>
-</SignedIn>
\ No newline at end of file
+</SignedIn>
diff --git a/src/lib/components/viewer/PageActions.svelte b/src/lib/components/viewer/PageActions.svelte
index fe72429cd..45ee91e89 100644
--- a/src/lib/components/viewer/PageActions.svelte
+++ b/src/lib/components/viewer/PageActions.svelte
@@ -103,7 +103,12 @@
 </div>
 {#if pageShareOpen}
   <Portal>
-    <Modal on:close={() => (pageShareOpen = false)} fillViewport maxWidth="90vw" maxHeight="80vh">
+    <Modal
+      on:close={() => (pageShareOpen = false)}
+      fillViewport
+      maxWidth="90vw"
+      maxHeight="80vh"
+    >
       <h1 slot="title">{$_("dialog.share")}</h1>
       <Share {document} page={page_number} currentTab="page" />
     </Modal>

From 4f09203f374477634ee4db726fde7be793e8a562 Mon Sep 17 00:00:00 2001
From: Chris Amico <eyeseast@gmail.com>
Date: Tue, 13 Jan 2026 12:02:55 -0500
Subject: [PATCH 10/10] fix types

---
 .../components/documents/stories/Share.stories.svelte    | 9 ---------
 src/lib/components/layouts/Error.svelte                  | 4 +---
 2 files changed, 1 insertion(+), 12 deletions(-)

diff --git a/src/lib/components/documents/stories/Share.stories.svelte b/src/lib/components/documents/stories/Share.stories.svelte
index aa6847bde..165fff0ef 100644
--- a/src/lib/components/documents/stories/Share.stories.svelte
+++ b/src/lib/components/documents/stories/Share.stories.svelte
@@ -52,12 +52,3 @@
   <Share {document} currentTab="note" />
   <Toaster />
 </Story>
-
-<style>
-  .vh-100 {
-    height: 100vh;
-  }
-  .vw-100 {
-    width: 100vw;
-  }
-</style>
diff --git a/src/lib/components/layouts/Error.svelte b/src/lib/components/layouts/Error.svelte
index 209a8c5a1..4f71248e3 100644
--- a/src/lib/components/layouts/Error.svelte
+++ b/src/lib/components/layouts/Error.svelte
@@ -64,9 +64,7 @@
 {#if feedbackOpen}
   <Portal>
     <Modal on:close={() => (feedbackOpen = false)}>
-      {#snippet title()}
-        <h1>{$_("feedback.title")}</h1>
-      {/snippet}
+      <h1 slot="title">{$_("feedback.title")}</h1>
       <UserFeedback
         user={$me}
         feedbackType="Bug"