From a0086c3a313eb67fa85bf31ba9dd9b078b07738c Mon Sep 17 00:00:00 2001
From: Chris Amico <eyeseast@gmail.com>
Date: Tue, 12 Dec 2023 12:34:03 -0500
Subject: [PATCH] Format all the files

---
 .prettierrc                                   |  11 +-
 package-lock.json                             |  19 +-
 package.json                                  |   5 +-
 src/addons/Drawer.svelte                      |  54 +--
 src/addons/Paginator.svelte                   |  18 +-
 src/addons/Popularity.svelte                  |  28 +-
 src/addons/browser/AddOnList.svelte           |  50 +-
 src/addons/browser/AddOnListItem.svelte       |  84 ++--
 src/addons/browser/Browser.svelte             |  84 ++--
 src/addons/browser/Filter.svelte              |  12 +-
 src/addons/browser/Filters.svelte             |  74 +--
 src/addons/browser/SearchInput.svelte         |  20 +-
 .../stories/AddOnListItem.stories.svelte      |  14 +-
 src/addons/dispatch/Dispatch.svelte           |  40 +-
 src/addons/dispatch/Form.svelte               |  46 +-
 src/addons/dispatch/Header.svelte             | 130 +++---
 src/addons/dispatch/Premium.svelte            | 148 +++---
 src/addons/dispatch/ScheduledInset.svelte     |  32 +-
 src/addons/dispatch/Selection.svelte          |  74 +--
 src/addons/dispatch/fields/ArrayField.svelte  |  58 +--
 src/addons/dispatch/fields/Checkbox.svelte    |   8 +-
 src/addons/dispatch/fields/Field.svelte       |  24 +-
 src/addons/dispatch/fields/Number.svelte      |  12 +-
 src/addons/dispatch/fields/Text.svelte        |  14 +-
 .../dispatch/stories/Header.stories.svelte    |  14 +-
 src/addons/progress/AddonRun.svelte           | 116 ++---
 src/addons/progress/AddonStatus.svelte        |  18 +-
 src/addons/runs/History.svelte                |  76 ++--
 src/addons/runs/HistoryEvent.svelte           |  86 ++--
 src/addons/runs/Runs.svelte                   |  18 +-
 src/addons/runs/Scheduled.svelte              |  72 +--
 src/addons/runs/ScheduledEvent.svelte         |  58 +--
 src/addons/sidebar/AddonListItem.svelte       |   8 +-
 src/addons/sidebar/ListItem.svelte            |  10 +-
 src/addons/sidebar/Sidebar.svelte             |  32 +-
 .../sidebar/stories/ListItem.stories.svelte   |  20 +-
 .../sidebar/stories/Sidebar.stories.svelte    |  12 +-
 src/addons/stories/Drawer.stories.svelte      |  16 +-
 src/addons/stories/Paginator.stories.svelte   |  16 +-
 src/api/languages.js                          |   4 +-
 src/common/AccessIcon.svelte                  |  34 +-
 src/common/AccessToggle.svelte                | 100 ++--
 src/common/AppearanceCustomizer.svelte        |  48 +-
 src/common/AppearanceDimension.svelte         |  46 +-
 src/common/AppearanceToggle.svelte            |  30 +-
 src/common/Autocomplete.svelte                |  60 +--
 src/common/Badge.svelte                       |  16 +-
 src/common/Button.svelte                      |  92 ++--
 src/common/Calendar.svelte                    | 118 ++---
 src/common/Checkbox.svelte                    |  42 +-
 src/common/Draggable.svelte                   |  22 +-
 src/common/DropZone.svelte                    |  16 +-
 src/common/Dropdown.svelte                    |  74 +--
 src/common/Dropdown2.svelte                   |  62 +--
 src/common/ErrorData.svelte                   |  62 +--
 src/common/FilePicker.svelte                  |  28 +-
 src/common/Hamburger.svelte                   |  12 +-
 src/common/HtmlEditor.svelte                  |  31 +-
 src/common/HtmlField.svelte                   |  21 +-
 src/common/Image.svelte                       |  92 ++--
 src/common/Loader.svelte                      |  28 +-
 src/common/Logo.svelte                        |  26 +-
 src/common/Menu.svelte                        |   8 +-
 src/common/MenuInsert.svelte                  |   8 +-
 src/common/MenuItem.svelte                    |  38 +-
 src/common/MenuTitle.svelte                   |  12 +-
 src/common/Modal.svelte                       |  52 +--
 src/common/Pin.svelte                         |  16 +-
 src/common/Progress.svelte                    |  30 +-
 src/common/ProgressiveImage.svelte            |  16 +-
 src/common/Select.svelte                      |  28 +-
 src/common/ShareOptions.svelte                | 184 ++++----
 src/common/SpecialMessage.svelte              |  34 +-
 src/common/TextPage.svelte                    |  20 +-
 src/common/Title.svelte                       |  10 +-
 src/common/Toast.svelte                       |  20 +-
 src/common/Toasts.svelte                      |  12 +-
 src/common/Tooltip.svelte                     |  44 +-
 src/common/UploadOptions.svelte               |  50 +-
 src/common/VariableChunk.svelte               |   8 +-
 src/common/dialog/AccessDialog.svelte         | 204 ++++-----
 src/common/dialog/CollaboratorDialog.svelte   | 144 +++---
 src/common/dialog/DataDialog.svelte           | 134 +++---
 src/common/dialog/DiagnosticDialog.svelte     |  52 +--
 src/common/dialog/DocumentEmbedDialog.svelte  |  12 +-
 .../dialog/DocumentInformationDialog.svelte   |  40 +-
 src/common/dialog/DocumentPickerDialog.svelte |  12 +-
 src/common/dialog/EditSectionsDialog.svelte   | 178 ++++----
 src/common/dialog/EmbedDialog.svelte          | 220 ++++-----
 src/common/dialog/MetaFieldDialog.svelte      |  12 +-
 src/common/dialog/OwnerDialog.svelte          |  58 +--
 src/common/dialog/PageEmbedDialog.svelte      |  12 +-
 src/common/dialog/ProjectAccessDialog.svelte  |  58 +--
 src/common/dialog/ProjectDialog.svelte        |  36 +-
 src/common/dialog/ProjectEmbedDialog.svelte   |   6 +-
 src/common/dialog/ReprocessDialog.svelte      |   6 +-
 src/common/dialog/SearchTipsDialog.svelte     | 118 ++---
 src/common/dialog/UploadEmailDialog.svelte    |  20 +-
 src/common/dialog/metaDialogs.js              |   4 +-
 src/common/icons/Credit.svelte                |  14 +-
 src/common/icons/Hashtag.svelte               |  12 +-
 src/common/icons/Help.svelte                  |  12 +-
 src/common/icons/Language.svelte              |  16 +-
 src/common/icons/Pin.svelte                   |  14 +-
 src/common/icons/Star.svelte                  |  12 +-
 src/common/stories/Dropdown.stories.svelte    |  20 +-
 src/langs/json/en.json                        |   2 +-
 src/main.html                                 |   2 +-
 src/pages/FlatPage.svelte                     |  58 +--
 src/pages/NotFound.svelte                     |  18 +-
 src/pages/app/ActionBar.svelte                | 126 ++---
 src/pages/app/Anonymous.svelte                |  98 ++--
 src/pages/app/AuthSection.svelte              |  50 +-
 src/pages/app/Document.svelte                 | 360 +++++++--------
 src/pages/app/DocumentThumbnail.svelte        | 118 ++---
 src/pages/app/Documents.svelte                | 182 ++++----
 src/pages/app/EmbedFooter.svelte              |  24 +-
 src/pages/app/File.svelte                     |  62 +--
 src/pages/app/MainContainer.svelte            |  66 +--
 src/pages/app/NoDocuments.svelte              |  86 ++--
 src/pages/app/Paginator.svelte                |  62 +--
 src/pages/app/ProcessingBar.svelte            |  40 +-
 src/pages/app/SearchBar.svelte                |  50 +-
 src/pages/app/SearchInput.svelte              | 200 ++++----
 src/pages/app/SearchLink.svelte               |  16 +-
 src/pages/app/UploadDialog.svelte             |  86 ++--
 .../app/accounts/AccountNavigation.svelte     |  30 +-
 src/pages/app/accounts/HelpMenu.svelte        |  20 +-
 src/pages/app/accounts/LanguageMenu.svelte    |  20 +-
 src/pages/app/accounts/OrgMemberList.svelte   |  82 ++--
 src/pages/app/accounts/OrgMenu.svelte         |  48 +-
 src/pages/app/accounts/OrgPicker.svelte       |  52 +--
 src/pages/app/accounts/PremiumMenu.svelte     |  52 +--
 src/pages/app/accounts/UserMenu.svelte        |  30 +-
 src/pages/app/menus/AddonsMenu.svelte         |  24 +-
 src/pages/app/menus/EditMenu.svelte           |  20 +-
 src/pages/app/menus/ProjectMenuItem.svelte    |  16 +-
 src/pages/app/menus/ProjectsMenu.svelte       |  16 +-
 src/pages/app/sidebar/Project.svelte          |  28 +-
 src/pages/app/sidebar/ProjectFilters.svelte   |  46 +-
 src/pages/app/sidebar/Projects.svelte         |  40 +-
 src/pages/app/sidebar/Sidebar.svelte          |  34 +-
 src/pages/embed/note/Note.svelte              | 231 +++++-----
 src/pages/embed/page/Annotation.svelte        |  26 +-
 src/pages/embed/page/Note.svelte              |  24 +-
 src/pages/embed/page/Page.svelte              |  88 ++--
 src/pages/entities/Entities.svelte            | 218 ++++-----
 src/pages/home/HomeTemplate.svelte            | 162 +++----
 src/pages/viewer/AllText.svelte               |  36 +-
 src/pages/viewer/Annotation.svelte            | 430 +++++++++---------
 src/pages/viewer/Body.svelte                  |  46 +-
 src/pages/viewer/ContentItem.svelte           | 146 +++---
 src/pages/viewer/ExtraPageContent.svelte      |   8 +-
 src/pages/viewer/Footer.svelte                |  42 +-
 src/pages/viewer/Header.svelte                |  88 ++--
 src/pages/viewer/InternalPage.svelte          | 240 +++++-----
 src/pages/viewer/ModifyImage.svelte           |  12 +-
 src/pages/viewer/NoteBody.svelte              |  32 +-
 src/pages/viewer/Page.svelte                  |   6 +-
 src/pages/viewer/PageNoteInsert.svelte        |  88 ++--
 src/pages/viewer/SearchResults.svelte         |  82 ++--
 src/pages/viewer/SelectableWord.svelte        |  78 ++--
 src/pages/viewer/Sidebar.svelte               | 160 +++----
 src/pages/viewer/SidebarAction.svelte         |  10 +-
 src/pages/viewer/SimpleBody.svelte            |  30 +-
 src/pages/viewer/TableOfContents.svelte       |  12 +-
 src/pages/viewer/ThumbnailBody.svelte         | 142 +++---
 src/pages/viewer/controls/FullScreen.svelte   |  24 +-
 src/pages/viewer/controls/Hamburger.svelte    |  14 +-
 src/pages/viewer/controls/Paginator.svelte    |  86 ++--
 src/pages/viewer/controls/Search.svelte       |  72 +--
 src/pages/viewer/controls/Zoom.svelte         |  56 +--
 src/pages/viewer/pane/ActionPane.svelte       |  60 +--
 src/pages/viewer/pane/ModifyPane.svelte       |  66 +--
 src/pages/viewer/pane/SearchPane.svelte       |  12 +-
 src/premium-credits/CreditMeter.svelte        |  40 +-
 src/premium-credits/Price.svelte              |  10 +-
 src/premium-credits/UpgradePrompt.svelte      |  24 +-
 src/router/Link.svelte                        |  36 +-
 src/style/fonts.scss                          |  93 ++--
 src/style/variables.css                       |   2 +-
 src/viewer/modification/Modification.svelte   |   8 +-
 src/viewer/modification/modifySpec.test.js    |  26 +-
 183 files changed, 5039 insertions(+), 5002 deletions(-)

diff --git a/.prettierrc b/.prettierrc
index 7c65a9764..d097b0bb0 100644
--- a/.prettierrc
+++ b/.prettierrc
@@ -1,13 +1,14 @@
 {
   "bracketSameLine": false,
+  "plugins": ["prettier-plugin-svelte"],
   "printWidth": 80,
   "semi": true,
   "singleQuote": false,
-  "tabWidth": 2,
-  "trailingComma": "all",
-  "useTabs": false,
   "svelteAllowShorthand": true,
   "svelteIndentScriptAndStyle": true,
-  "svelteSortOrder": "options-scripts-styles-markup",
-  "svelteStrictMode": false
+  "svelteSortOrder": "options-scripts-markup-styles",
+  "svelteStrictMode": false,
+  "tabWidth": 2,
+  "trailingComma": "all",
+  "useTabs": false
 }
diff --git a/package-lock.json b/package-lock.json
index 75b9887a7..4b3d07256 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -77,7 +77,8 @@
         "msw-storybook-addon": "^1.10.0",
         "netlify-plugin-playwright-cache": "^0.0.1",
         "playwright": "^1.39.0",
-        "prettier": "^3.0.2",
+        "prettier": "^3.1.1",
+        "prettier-plugin-svelte": "^3.1.2",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "serve": "^14.2.0",
@@ -18106,9 +18107,9 @@
       }
     },
     "node_modules/prettier": {
-      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.0.3.tgz",
-      "integrity": "sha512-L/4pUDMxcNa8R/EthV08Zt42WBO4h1rarVtK0K+QJG0X187OLo7l699jWw0GKuwzkPQ//jMFA/8Xm6Fh3J/DAg==",
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.1.1.tgz",
+      "integrity": "sha512-22UbSzg8luF4UuZtzgiUOfcGM8s4tjBv6dJRT7j275NXsy2jb4aJa4NNveul5x4eqlF1wuhuR2RElK71RvmVaw==",
       "dev": true,
       "bin": {
         "prettier": "bin/prettier.cjs"
@@ -18120,6 +18121,16 @@
         "url": "https://github.com/prettier/prettier?sponsor=1"
       }
     },
+    "node_modules/prettier-plugin-svelte": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/prettier-plugin-svelte/-/prettier-plugin-svelte-3.1.2.tgz",
+      "integrity": "sha512-7xfMZtwgAWHMT0iZc8jN4o65zgbAQ3+O32V6W7pXrqNvKnHnkoyQCGCbKeUyXKZLbYE0YhFRnamfxfkEGxm8qA==",
+      "dev": true,
+      "peerDependencies": {
+        "prettier": "^3.0.0",
+        "svelte": "^3.2.0 || ^4.0.0-next.0 || ^5.0.0-next.0"
+      }
+    },
     "node_modules/pretty-error": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/pretty-error/-/pretty-error-4.0.0.tgz",
diff --git a/package.json b/package.json
index 3ffa7bdf9..1a69099a8 100644
--- a/package.json
+++ b/package.json
@@ -72,7 +72,8 @@
     "msw-storybook-addon": "^1.10.0",
     "netlify-plugin-playwright-cache": "^0.0.1",
     "playwright": "^1.39.0",
-    "prettier": "^3.0.2",
+    "prettier": "^3.1.1",
+    "prettier-plugin-svelte": "^3.1.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "serve": "^14.2.0",
@@ -90,6 +91,8 @@
     "dev": "concurrently \"npm:dev-app\" \"npm:dev-embed\"",
     "dev-app": "cross-env NODE_ENV=development SUPPRESS_WARNINGS=1 webpack serve --config webpack.app.config.js",
     "dev-embed": "cross-env NODE_ENV=development webpack --config webpack.embed.config.js",
+    "format": "prettier --write src",
+    "format:check": "prettier --check src",
     "serve": "serve public -l 80 --single",
     "storybook": "storybook dev -p 6006",
     "test": "NODE_OPTIONS=--experimental-vm-modules jest",
diff --git a/src/addons/Drawer.svelte b/src/addons/Drawer.svelte
index 79439412a..be5281b79 100644
--- a/src/addons/Drawer.svelte
+++ b/src/addons/Drawer.svelte
@@ -56,6 +56,33 @@
   }
 </script>
 
+<svelte:window on:keydown={onKeyPress} />
+
+{#if visible}
+  <div
+    transition:slide|global={{ axis: "x" }}
+    class="drawer {anchor}"
+    class:visible
+    tabindex="-1"
+    role="dialog"
+  >
+    <slot name="close-button">
+      <button
+        type="button"
+        class="close"
+        title={$_("drawer.close")}
+        aria-label={$_("drawer.close")}
+        on:click={() => close()}
+      >
+        <span aria-hidden="true">&times;</span>
+      </button>
+    </slot>
+    <div bind:this={dialog} role="document" class="container">
+      <slot name="content" />
+    </div>
+  </div>
+{/if}
+
 <style>
   .drawer {
     background-color: var(--menuBg, white);
@@ -116,30 +143,3 @@
     overflow-y: scroll;
   }
 </style>
-
-<svelte:window on:keydown={onKeyPress} />
-
-{#if visible}
-  <div
-    transition:slide|global={{ axis: "x" }}
-    class="drawer {anchor}"
-    class:visible
-    tabindex="-1"
-    role="dialog"
-  >
-    <slot name="close-button">
-      <button
-        type="button"
-        class="close"
-        title={$_("drawer.close")}
-        aria-label={$_("drawer.close")}
-        on:click={() => close()}
-      >
-        <span aria-hidden="true">&times;</span>
-      </button>
-    </slot>
-    <div bind:this={dialog} role="document" class="container">
-      <slot name="content" />
-    </div>
-  </div>
-{/if}
diff --git a/src/addons/Paginator.svelte b/src/addons/Paginator.svelte
index 0691e5260..ce41c18c7 100644
--- a/src/addons/Paginator.svelte
+++ b/src/addons/Paginator.svelte
@@ -17,15 +17,6 @@
   }
 </script>
 
-<style>
-  .paginator {
-    display: flex;
-    justify-content: space-between;
-    position: relative;
-    width: 100%;
-  }
-</style>
-
 <div class="paginator">
   <Button disabled={!has_previous} on:click={previous}>
     {$_("paginator.previous")}
@@ -35,3 +26,12 @@
     {$_("paginator.next")}
   </Button>
 </div>
+
+<style>
+  .paginator {
+    display: flex;
+    justify-content: space-between;
+    position: relative;
+    width: 100%;
+  }
+</style>
diff --git a/src/addons/Popularity.svelte b/src/addons/Popularity.svelte
index 15bfe4ebb..cec0ca520 100644
--- a/src/addons/Popularity.svelte
+++ b/src/addons/Popularity.svelte
@@ -5,20 +5,6 @@
   export let useCount: number;
 </script>
 
-<style>
-  .container {
-    display: flex;
-    align-items: center;
-    gap: 0.25rem;
-  }
-  .icon {
-    fill: var(--primary, #4294f0);
-  }
-  .icon svg {
-    display: block;
-  }
-</style>
-
 <div class="container" title={useCount.toString()}>
   <span class="icon">
     <svg width="18px" height="16px" viewBox="0 0 18 16">
@@ -33,3 +19,17 @@
     {nFormatter(useCount, 1)}
   </span>
 </div>
+
+<style>
+  .container {
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+  }
+  .icon {
+    fill: var(--primary, #4294f0);
+  }
+  .icon svg {
+    display: block;
+  }
+</style>
diff --git a/src/addons/browser/AddOnList.svelte b/src/addons/browser/AddOnList.svelte
index 42cee3188..b4ee58bf3 100644
--- a/src/addons/browser/AddOnList.svelte
+++ b/src/addons/browser/AddOnList.svelte
@@ -25,6 +25,31 @@
   $: empty = !(items && items.length > 0);
 </script>
 
+<div class="list" class:empty class:loading class:error>
+  {#if loading}
+    <!-- Loading state -->
+    <Loader active center big pad />
+    <p>{$_("addonBrowserDialog.loading")}</p>
+  {:else if error}
+    <!-- Error state -->
+    <div class="icon"><Error /></div>
+    <p>{error}</p>
+    {#if reload}<Button action on:click={reload}
+        >{$_("addonBrowserDialog.retry")}</Button
+      >{/if}
+  {:else if empty}
+    <!-- Empty state -->
+    <div class="icon"><EmptyResults /></div>
+    <p>{$_("addonBrowserDialog.empty")}</p>
+  {:else}
+    <ul>
+      {#each items as addon (addon.id)}
+        <li><ListItem {addon} /></li>
+      {/each}
+    </ul>
+  {/if}
+</div>
+
 <style>
   .list {
     flex: 1 1 auto;
@@ -63,28 +88,3 @@
     list-style-type: none;
   }
 </style>
-
-<div class="list" class:empty class:loading class:error>
-  {#if loading}
-    <!-- Loading state -->
-    <Loader active center big pad />
-    <p>{$_("addonBrowserDialog.loading")}</p>
-  {:else if error}
-    <!-- Error state -->
-    <div class="icon"><Error /></div>
-    <p>{error}</p>
-    {#if reload}<Button action on:click={reload}
-        >{$_("addonBrowserDialog.retry")}</Button
-      >{/if}
-  {:else if empty}
-    <!-- Empty state -->
-    <div class="icon"><EmptyResults /></div>
-    <p>{$_("addonBrowserDialog.empty")}</p>
-  {:else}
-    <ul>
-      {#each items as addon (addon.id)}
-        <li><ListItem {addon} /></li>
-      {/each}
-    </ul>
-  {/if}
-</div>
diff --git a/src/addons/browser/AddOnListItem.svelte b/src/addons/browser/AddOnListItem.svelte
index ae5e57be3..40284d260 100644
--- a/src/addons/browser/AddOnListItem.svelte
+++ b/src/addons/browser/AddOnListItem.svelte
@@ -15,6 +15,48 @@
   $: isPremium = addon?.parameters?.categories?.includes("premium") ?? false;
 </script>
 
+<a class="addon-link" href={url}>
+  <div class="container" id={addon.repository}>
+    <div class="row">
+      <div class="center-self">
+        <AddOnPin {addon} />
+      </div>
+      <div class="stretch">
+        <h3 class="addon-name">{addon.name}</h3>
+      </div>
+      <div class="metadata">
+        {#if author?.name}
+          <p class="author">
+            <a
+              href="http://github.com/{addon.repository}"
+              target="_blank"
+              rel="noopener noreferrer"
+              title={$_("addonBrowserDialog.viewsource")}>{author.name}</a
+            >
+          </p>
+        {/if}
+        {#if addon.usage}
+          <AddOnPopularity useCount={addon.usage} />
+        {/if}
+        {#if isPremium}
+          <span class="badge"
+            ><Badge
+              label="Premium"
+              badgeColor="var(--premium)"
+              labelColor="var(--darkgray)"
+            >
+              <Credit badge slot="icon" color="var(--darkgray)" />
+            </Badge></span
+          >
+        {/if}
+      </div>
+    </div>
+    {#if description}
+      <div class="description">{@html description}</div>
+    {/if}
+  </div>
+</a>
+
 <style>
   .addon-link:hover .container {
     background-color: var(--menuBg);
@@ -81,45 +123,3 @@
     margin: 0;
   }
 </style>
-
-<a class="addon-link" href={url}>
-  <div class="container" id={addon.repository}>
-    <div class="row">
-      <div class="center-self">
-        <AddOnPin {addon} />
-      </div>
-      <div class="stretch">
-        <h3 class="addon-name">{addon.name}</h3>
-      </div>
-      <div class="metadata">
-        {#if author?.name}
-          <p class="author">
-            <a
-              href="http://github.com/{addon.repository}"
-              target="_blank"
-              rel="noopener noreferrer"
-              title={$_("addonBrowserDialog.viewsource")}>{author.name}</a
-            >
-          </p>
-        {/if}
-        {#if addon.usage}
-          <AddOnPopularity useCount={addon.usage} />
-        {/if}
-        {#if isPremium}
-          <span class="badge"
-            ><Badge
-              label="Premium"
-              badgeColor="var(--premium)"
-              labelColor="var(--darkgray)"
-            >
-              <Credit badge slot="icon" color="var(--darkgray)" />
-            </Badge></span
-          >
-        {/if}
-      </div>
-    </div>
-    {#if description}
-      <div class="description">{@html description}</div>
-    {/if}
-  </div>
-</a>
diff --git a/src/addons/browser/Browser.svelte b/src/addons/browser/Browser.svelte
index 36a1de2fe..a975fdea8 100644
--- a/src/addons/browser/Browser.svelte
+++ b/src/addons/browser/Browser.svelte
@@ -109,6 +109,48 @@
   }
 </script>
 
+<Drawer bind:this={drawer} bind:visible anchor="right" on:open on:close>
+  <div slot="content" class="browser">
+    <header class="header">
+      <h2>{$_("addonBrowserDialog.title")}</h2>
+      <p>{$_("addonBrowserDialog.subtitle")}</p>
+    </header>
+    <aside class="sidebar">
+      <div class="search"><Search /></div>
+      <div class="filters"><Filters /></div>
+    </aside>
+    <main class="results">
+      <div class="list">
+        {#if $filter === "active"}
+          <aside class="pinned tip">
+            <div class="icon"><Pin size={1.75} /></div>
+            <p class="message">{$_("addonBrowserDialog.pinnedTip")}</p>
+          </aside>
+        {:else if $filter === "featured"}
+          <aside class="featured tip">
+            <div class="icon"><Star size={1.75} /></div>
+            <p class="message">{$_("addonBrowserDialog.featuredTip")}</p>
+          </aside>
+        {:else if $filter === "premium"}
+          <aside class="premium tip">
+            <div class="icon"><Credit badge size={1.75} /></div>
+            <p class="message">{$_("addonBrowserDialog.premiumTip")}</p>
+          </aside>
+        {/if}
+        <AddOnList {loading} {error} {items} bind:reload />
+      </div>
+      <div class="pagination">
+        <Paginator
+          has_next={Boolean(next_url)}
+          has_previous={Boolean(previous_url)}
+          on:next={loadNext}
+          on:previous={loadPrev}
+        />
+      </div>
+    </main>
+  </div>
+</Drawer>
+
 <style>
   .browser {
     display: grid;
@@ -210,45 +252,3 @@
     }
   }
 </style>
-
-<Drawer bind:this={drawer} bind:visible anchor="right" on:open on:close>
-  <div slot="content" class="browser">
-    <header class="header">
-      <h2>{$_("addonBrowserDialog.title")}</h2>
-      <p>{$_("addonBrowserDialog.subtitle")}</p>
-    </header>
-    <aside class="sidebar">
-      <div class="search"><Search /></div>
-      <div class="filters"><Filters /></div>
-    </aside>
-    <main class="results">
-      <div class="list">
-        {#if $filter === "active"}
-          <aside class="pinned tip">
-            <div class="icon"><Pin size={1.75} /></div>
-            <p class="message">{$_("addonBrowserDialog.pinnedTip")}</p>
-          </aside>
-        {:else if $filter === "featured"}
-          <aside class="featured tip">
-            <div class="icon"><Star size={1.75} /></div>
-            <p class="message">{$_("addonBrowserDialog.featuredTip")}</p>
-          </aside>
-        {:else if $filter === "premium"}
-          <aside class="premium tip">
-            <div class="icon"><Credit badge size={1.75} /></div>
-            <p class="message">{$_("addonBrowserDialog.premiumTip")}</p>
-          </aside>
-        {/if}
-        <AddOnList {loading} {error} {items} bind:reload />
-      </div>
-      <div class="pagination">
-        <Paginator
-          has_next={Boolean(next_url)}
-          has_previous={Boolean(previous_url)}
-          on:next={loadNext}
-          on:previous={loadPrev}
-        />
-      </div>
-    </main>
-  </div>
-</Drawer>
diff --git a/src/addons/browser/Filter.svelte b/src/addons/browser/Filter.svelte
index 5469d5304..487c1338c 100644
--- a/src/addons/browser/Filter.svelte
+++ b/src/addons/browser/Filter.svelte
@@ -3,6 +3,12 @@
   export let selected: boolean;
 </script>
 
+<label class:selected class="filter">
+  {#if $$slots.input}<span class="input"><slot name="input" /></span>{/if}
+  {#if $$slots.icon}<span class="icon"><slot name="icon" /></span>{/if}
+  <span class="name">{name}</span>
+</label>
+
 <style>
   .input {
     display: none;
@@ -40,9 +46,3 @@
     flex: 1 1 auto;
   }
 </style>
-
-<label class:selected class="filter">
-  {#if $$slots.input}<span class="input"><slot name="input" /></span>{/if}
-  {#if $$slots.icon}<span class="icon"><slot name="icon" /></span>{/if}
-  <span class="name">{name}</span>
-</label>
diff --git a/src/addons/browser/Filters.svelte b/src/addons/browser/Filters.svelte
index fa74f660d..fcef773df 100644
--- a/src/addons/browser/Filters.svelte
+++ b/src/addons/browser/Filters.svelte
@@ -30,43 +30,6 @@
   import Credit from "../../common/icons/Credit.svelte";
 </script>
 
-<style>
-  ul {
-    list-style: none;
-    margin-block-start: 0;
-    padding-inline-start: 0;
-  }
-
-  ul li {
-    margin-bottom: 0.25em;
-  }
-
-  h3 {
-    margin: 0.5em;
-  }
-
-  #all [slot="icon"] {
-    display: flex;
-    align-items: center;
-  }
-
-  #all:not(.selected) [slot="icon"] {
-    fill: var(--primary);
-  }
-
-  #pinned:not(.selected) [slot="icon"] {
-    fill: palevioletred;
-  }
-
-  #featured:not(.selected) [slot="icon"] {
-    fill: orange;
-  }
-
-  #premium:not(.selected) [slot="icon"] {
-    fill: var(--premium);
-  }
-</style>
-
 <ul class="filters">
   <li id="all" class:selected={$filter.includes("all")}>
     <Filter name="All" selected={$filter.includes("all")}>
@@ -110,3 +73,40 @@
     {/each}
   </ul>
 </div>
+
+<style>
+  ul {
+    list-style: none;
+    margin-block-start: 0;
+    padding-inline-start: 0;
+  }
+
+  ul li {
+    margin-bottom: 0.25em;
+  }
+
+  h3 {
+    margin: 0.5em;
+  }
+
+  #all [slot="icon"] {
+    display: flex;
+    align-items: center;
+  }
+
+  #all:not(.selected) [slot="icon"] {
+    fill: var(--primary);
+  }
+
+  #pinned:not(.selected) [slot="icon"] {
+    fill: palevioletred;
+  }
+
+  #featured:not(.selected) [slot="icon"] {
+    fill: orange;
+  }
+
+  #premium:not(.selected) [slot="icon"] {
+    fill: var(--premium);
+  }
+</style>
diff --git a/src/addons/browser/SearchInput.svelte b/src/addons/browser/SearchInput.svelte
index 25fa1fa38..e580b9ab8 100644
--- a/src/addons/browser/SearchInput.svelte
+++ b/src/addons/browser/SearchInput.svelte
@@ -9,6 +9,16 @@
   import Search from "../../common/icons/Search.svelte";
 </script>
 
+<label class="search">
+  <Search size={0.8} />
+  <input
+    type="search"
+    bind:value={$query}
+    aria-label="Search Add-Ons"
+    placeholder={$_("addonBrowserDialog.searchPlaceholder")}
+  />
+</label>
+
 <style>
   .search {
     display: flex;
@@ -33,13 +43,3 @@
     outline: none;
   }
 </style>
-
-<label class="search">
-  <Search size={0.8} />
-  <input
-    type="search"
-    bind:value={$query}
-    aria-label="Search Add-Ons"
-    placeholder={$_("addonBrowserDialog.searchPlaceholder")}
-  />
-</label>
diff --git a/src/addons/browser/stories/AddOnListItem.stories.svelte b/src/addons/browser/stories/AddOnListItem.stories.svelte
index 5f2700708..3fc1804bf 100644
--- a/src/addons/browser/stories/AddOnListItem.stories.svelte
+++ b/src/addons/browser/stories/AddOnListItem.stories.svelte
@@ -23,13 +23,6 @@
   };
 </script>
 
-<style>
-  .container {
-    max-width: 32rem;
-    border: 1px solid #eee;
-  }
-</style>
-
 <Template let:args>
   <div class="container">
     <AddOnListItem {...args} />
@@ -60,3 +53,10 @@
     },
   }}
 />
+
+<style>
+  .container {
+    max-width: 32rem;
+    border: 1px solid #eee;
+  }
+</style>
diff --git a/src/addons/dispatch/Dispatch.svelte b/src/addons/dispatch/Dispatch.svelte
index 685e41e8c..5685cd0c9 100644
--- a/src/addons/dispatch/Dispatch.svelte
+++ b/src/addons/dispatch/Dispatch.svelte
@@ -256,26 +256,6 @@
   }
 </script>
 
-<style>
-  [slot="content"] {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 1em;
-    padding: 1em;
-    max-width: 60ch;
-    transition: opacity 0.25s ease;
-  }
-
-  [slot="content"].loading {
-    opacity: 0;
-  }
-
-  .controls {
-    display: flex;
-    justify-content: space-between;
-  }
-</style>
-
 <Drawer
   anchor="right"
   bind:this={drawer}
@@ -344,3 +324,23 @@
     {/if}
   </div>
 </Drawer>
+
+<style>
+  [slot="content"] {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 1em;
+    padding: 1em;
+    max-width: 60ch;
+    transition: opacity 0.25s ease;
+  }
+
+  [slot="content"].loading {
+    opacity: 0;
+  }
+
+  .controls {
+    display: flex;
+    justify-content: space-between;
+  }
+</style>
diff --git a/src/addons/dispatch/Form.svelte b/src/addons/dispatch/Form.svelte
index 2d5b9ccf9..865cd7f62 100644
--- a/src/addons/dispatch/Form.svelte
+++ b/src/addons/dispatch/Form.svelte
@@ -64,29 +64,6 @@
   }
 </script>
 
-<style>
-  form {
-    width: 100%;
-  }
-
-  fieldset {
-    display: flex;
-    flex-direction: column;
-    gap: 1em;
-    margin: 0 0 1em 0;
-    padding: 1em;
-    background: var(--light-gray);
-    border-radius: var(--radius);
-    border-color: rgba(0, 0, 0, 0.1);
-    border-width: 1px;
-  }
-
-  .controls {
-    display: flex;
-    justify-content: space-between;
-  }
-</style>
-
 <form method="post" bind:this={form} on:input on:change on:submit on:reset>
   <slot name="before" />
 
@@ -135,3 +112,26 @@
     </div>
   </slot>
 </form>
+
+<style>
+  form {
+    width: 100%;
+  }
+
+  fieldset {
+    display: flex;
+    flex-direction: column;
+    gap: 1em;
+    margin: 0 0 1em 0;
+    padding: 1em;
+    background: var(--light-gray);
+    border-radius: var(--radius);
+    border-color: rgba(0, 0, 0, 0.1);
+    border-width: 1px;
+  }
+
+  .controls {
+    display: flex;
+    justify-content: space-between;
+  }
+</style>
diff --git a/src/addons/dispatch/Header.svelte b/src/addons/dispatch/Header.svelte
index 61eac6095..713af05ba 100644
--- a/src/addons/dispatch/Header.svelte
+++ b/src/addons/dispatch/Header.svelte
@@ -34,6 +34,71 @@
   }
 </script>
 
+<header>
+  <div class="actions jB">
+    <Button action href="#add-ons">
+      <BackArrow size={0.8} />
+      {$_("addonDispatchDialog.backButton")}
+    </Button>
+    <div class="actions padRight">
+      <Button action on:click={onShare}
+        ><ShareIcon fill="#4294f0" /> {$_("addonDispatchDialog.share")}</Button
+      >
+      <Button action href="https://github.com/{addon.repository}"
+        ><GitHubIcon fill="#4294f0" />
+        {$_("addonDispatchDialog.viewsource")}</Button
+      >
+    </div>
+  </div>
+
+  <div class="name">
+    <span class="pin"><AddOnPin {addon} size={1.25} /></span>
+    <h2>{addon.name}</h2>
+  </div>
+
+  <dl class="metadata">
+    <div class="author">
+      <dt>{$_("addonDispatchDialog.createdBy")}</dt>
+      <dd>{author}</dd>
+    </div>
+
+    <div class="categories">
+      {#if addon?.parameters?.categories}
+        <dt>{$_("addonDispatchDialog.categories")}</dt>
+        {#each addon.parameters.categories as category}
+          {#if category !== "premium"}
+            <dd>
+              <a class="category" href={`#add-ons?categories=${category}`}>
+                <slot>{category}</slot>
+              </a>
+            </dd>
+          {/if}
+        {/each}
+      {/if}
+    </div>
+    {#if isPremium}
+      <a href="#add-ons?premium=true" class="premium"
+        ><Badge
+          label="Premium"
+          badgeColor="var(--premium)"
+          labelColor="var(--darkgray)"
+          ><Credit slot="icon" color="var(--darkgray)" badge /></Badge
+        ></a
+      >
+    {/if}
+  </dl>
+
+  <div class="description">
+    {@html addon?.parameters?.description}
+  </div>
+
+  {#if addon.parameters.instructions}
+    <div class="instructions">
+      {@html addon.parameters.instructions}
+    </div>
+  {/if}
+</header>
+
 <style>
   header {
     display: flex;
@@ -129,68 +194,3 @@
     background: rgba(0, 0, 0, 0.1);
   }
 </style>
-
-<header>
-  <div class="actions jB">
-    <Button action href="#add-ons">
-      <BackArrow size={0.8} />
-      {$_("addonDispatchDialog.backButton")}
-    </Button>
-    <div class="actions padRight">
-      <Button action on:click={onShare}
-        ><ShareIcon fill="#4294f0" /> {$_("addonDispatchDialog.share")}</Button
-      >
-      <Button action href="https://github.com/{addon.repository}"
-        ><GitHubIcon fill="#4294f0" />
-        {$_("addonDispatchDialog.viewsource")}</Button
-      >
-    </div>
-  </div>
-
-  <div class="name">
-    <span class="pin"><AddOnPin {addon} size={1.25} /></span>
-    <h2>{addon.name}</h2>
-  </div>
-
-  <dl class="metadata">
-    <div class="author">
-      <dt>{$_("addonDispatchDialog.createdBy")}</dt>
-      <dd>{author}</dd>
-    </div>
-
-    <div class="categories">
-      {#if addon?.parameters?.categories}
-        <dt>{$_("addonDispatchDialog.categories")}</dt>
-        {#each addon.parameters.categories as category}
-          {#if category !== "premium"}
-            <dd>
-              <a class="category" href={`#add-ons?categories=${category}`}>
-                <slot>{category}</slot>
-              </a>
-            </dd>
-          {/if}
-        {/each}
-      {/if}
-    </div>
-    {#if isPremium}
-      <a href="#add-ons?premium=true" class="premium"
-        ><Badge
-          label="Premium"
-          badgeColor="var(--premium)"
-          labelColor="var(--darkgray)"
-          ><Credit slot="icon" color="var(--darkgray)" badge /></Badge
-        ></a
-      >
-    {/if}
-  </dl>
-
-  <div class="description">
-    {@html addon?.parameters?.description}
-  </div>
-
-  {#if addon.parameters.instructions}
-    <div class="instructions">
-      {@html addon.parameters.instructions}
-    </div>
-  {/if}
-</header>
diff --git a/src/addons/dispatch/Premium.svelte b/src/addons/dispatch/Premium.svelte
index 3863ff82d..c7829b802 100644
--- a/src/addons/dispatch/Premium.svelte
+++ b/src/addons/dispatch/Premium.svelte
@@ -57,6 +57,80 @@
   }
 </script>
 
+{#if isPremium}
+  {#if isPremiumOrg(user?.organization)}
+    <fieldset class="premium">
+      <legend>{$_("addonDispatchDialog.premium")}</legend>
+      <div class="row">
+        <div class="column">
+          {#if amount}
+            <h3 class="prettyCost">
+              {$_("addonDispatchDialog.cost", {
+                values: { amount: amount, unit: unit, price: price || 1 },
+              })}
+            </h3>
+          {/if}
+          <!-- TODO: Support spend limit (#343)
+          <label class="spendingLimit">
+            <input
+              type="checkbox"
+              name="setLimit"
+              class="toggle"
+              on:change={toggleSpendingLimit}
+            />
+            <span class="label"
+              >{$_("addonDispatchDialog.premiumSpendLimit")}</span
+            >
+            <div class="amount">
+              <span class="creditIcon"><Credit size={1.5} /></span>
+              <input
+                type="number"
+                name="limitAmount"
+                class="limitInput"
+                min={0}
+                max={creditBalance}
+                bind:value={spendingLimit}
+                on:change={setSpendingLimit}
+                disabled={!spendingLimitEnabled}
+              />
+            </div>
+          </label>
+          -->
+        </div>
+        <div class="column">
+          <dl class="creditBalance">
+            <dt>Your credit balance</dt>
+            <dd><Price value={creditBalance} /></dd>
+          </dl>
+          <!-- TODO: Support credit purchases (#342)
+          <Button
+            premium
+            fullWidth
+            nomargin
+            label="Purchase Credits"
+            on:click={triggerCreditPurchaseFlow}
+          />
+          -->
+        </div>
+      </div>
+    </fieldset>
+  {:else if isOrgAdmin(user)}
+    <UpgradePrompt
+      message={$_("addonDispatchDialog.premiumUpgrade.message", {
+        values: {
+          plan: isIndividualOrg ? "Professional" : "Organization",
+        },
+      })}
+      callToAction={$_("addonDispatchDialog.premiumUpgrade.callToAction")}
+      on:click={() => triggerPremiumUpgradeFlow(user?.organization)}
+    />
+  {:else}
+    <UpgradePrompt
+      message={$_("addonDispatchDialog.premiumUpgrade.memberMessage")}
+    />
+  {/if}
+{/if}
+
 <style>
   fieldset {
     display: flex;
@@ -146,77 +220,3 @@
     margin: 0;
   }
 </style>
-
-{#if isPremium}
-  {#if isPremiumOrg(user?.organization)}
-    <fieldset class="premium">
-      <legend>{$_("addonDispatchDialog.premium")}</legend>
-      <div class="row">
-        <div class="column">
-          {#if amount}
-            <h3 class="prettyCost">
-              {$_("addonDispatchDialog.cost", {
-                values: { amount: amount, unit: unit, price: price || 1 },
-              })}
-            </h3>
-          {/if}
-          <!-- TODO: Support spend limit (#343)
-          <label class="spendingLimit">
-            <input
-              type="checkbox"
-              name="setLimit"
-              class="toggle"
-              on:change={toggleSpendingLimit}
-            />
-            <span class="label"
-              >{$_("addonDispatchDialog.premiumSpendLimit")}</span
-            >
-            <div class="amount">
-              <span class="creditIcon"><Credit size={1.5} /></span>
-              <input
-                type="number"
-                name="limitAmount"
-                class="limitInput"
-                min={0}
-                max={creditBalance}
-                bind:value={spendingLimit}
-                on:change={setSpendingLimit}
-                disabled={!spendingLimitEnabled}
-              />
-            </div>
-          </label>
-          -->
-        </div>
-        <div class="column">
-          <dl class="creditBalance">
-            <dt>Your credit balance</dt>
-            <dd><Price value={creditBalance} /></dd>
-          </dl>
-          <!-- TODO: Support credit purchases (#342)
-          <Button
-            premium
-            fullWidth
-            nomargin
-            label="Purchase Credits"
-            on:click={triggerCreditPurchaseFlow}
-          />
-          -->
-        </div>
-      </div>
-    </fieldset>
-  {:else if isOrgAdmin(user)}
-    <UpgradePrompt
-      message={$_("addonDispatchDialog.premiumUpgrade.message", {
-        values: {
-          plan: isIndividualOrg ? "Professional" : "Organization",
-        },
-      })}
-      callToAction={$_("addonDispatchDialog.premiumUpgrade.callToAction")}
-      on:click={() => triggerPremiumUpgradeFlow(user?.organization)}
-    />
-  {:else}
-    <UpgradePrompt
-      message={$_("addonDispatchDialog.premiumUpgrade.memberMessage")}
-    />
-  {/if}
-{/if}
diff --git a/src/addons/dispatch/ScheduledInset.svelte b/src/addons/dispatch/ScheduledInset.svelte
index dc1a3a4fe..a3d77a6b0 100644
--- a/src/addons/dispatch/ScheduledInset.svelte
+++ b/src/addons/dispatch/ScheduledInset.svelte
@@ -52,6 +52,22 @@
   });
 </script>
 
+{#if events.length > 0}
+  <details class="scheduled-list" bind:open>
+    <summary>
+      {$_("addonDispatchDialog.showAddons", {
+        values: { n: events.length },
+      })}
+    </summary>
+
+    <ul>
+      {#each events as event}
+        <li><ScheduledEvent {event} /></li>
+      {/each}
+    </ul>
+  </details>
+{/if}
+
 <style>
   .scheduled-list {
     width: 100%;
@@ -71,19 +87,3 @@
     padding: 0;
   }
 </style>
-
-{#if events.length > 0}
-  <details class="scheduled-list" bind:open>
-    <summary>
-      {$_("addonDispatchDialog.showAddons", {
-        values: { n: events.length },
-      })}
-    </summary>
-
-    <ul>
-      {#each events as event}
-        <li><ScheduledEvent {event} /></li>
-      {/each}
-    </ul>
-  </details>
-{/if}
diff --git a/src/addons/dispatch/Selection.svelte b/src/addons/dispatch/Selection.svelte
index 6522bcf6e..347a98288 100644
--- a/src/addons/dispatch/Selection.svelte
+++ b/src/addons/dispatch/Selection.svelte
@@ -26,6 +26,43 @@
   }
 </script>
 
+{#if documents.size > 0}
+  <fieldset class="selection">
+    <legend>{$_("addonDispatchDialog.select")}</legend>
+    {#if documents.has("query")}
+      <label>
+        <input
+          type="radio"
+          name="selection"
+          value="query"
+          bind:group={choice}
+        />
+        {$_("addonDispatchDialog.labelQuery", {
+          values: { n: $search?.results?.count ?? 0 },
+        })}
+      </label>
+    {/if}
+
+    {#if documents.has("selected")}
+      <label>
+        <input
+          type="radio"
+          name="selection"
+          value="selected"
+          bind:group={choice}
+        />
+        {$_("addonDispatchDialog.labelSelected", {
+          values: { n: $layout.selected?.length },
+        })}
+      </label>
+    {/if}
+  </fieldset>
+  <p class="help">
+    {$_("addonDispatchDialog.selectionHelp")}
+    <a href="/help/add-ons">{$_("addonDispatchDialog.selectionLearnMore")}</a>
+  </p>
+{/if}
+
 <style>
   fieldset {
     display: flex;
@@ -65,40 +102,3 @@
     }
   }
 </style>
-
-{#if documents.size > 0}
-  <fieldset class="selection">
-    <legend>{$_("addonDispatchDialog.select")}</legend>
-    {#if documents.has("query")}
-      <label>
-        <input
-          type="radio"
-          name="selection"
-          value="query"
-          bind:group={choice}
-        />
-        {$_("addonDispatchDialog.labelQuery", {
-          values: { n: $search?.results?.count ?? 0 },
-        })}
-      </label>
-    {/if}
-
-    {#if documents.has("selected")}
-      <label>
-        <input
-          type="radio"
-          name="selection"
-          value="selected"
-          bind:group={choice}
-        />
-        {$_("addonDispatchDialog.labelSelected", {
-          values: { n: $layout.selected?.length },
-        })}
-      </label>
-    {/if}
-  </fieldset>
-  <p class="help">
-    {$_("addonDispatchDialog.selectionHelp")}
-    <a href="/help/add-ons">{$_("addonDispatchDialog.selectionLearnMore")}</a>
-  </p>
-{/if}
diff --git a/src/addons/dispatch/fields/ArrayField.svelte b/src/addons/dispatch/fields/ArrayField.svelte
index 39587e117..db3f24472 100644
--- a/src/addons/dispatch/fields/ArrayField.svelte
+++ b/src/addons/dispatch/fields/ArrayField.svelte
@@ -48,6 +48,35 @@
   }
 </script>
 
+<fieldset class={items.type}>
+  {#if title}
+    <legend>{title}</legend>
+  {/if}
+  {#each value as v, i}
+    <div class="item item-{i}">
+      <svelte:component
+        this={types[items.type]}
+        bind:value={value[i]}
+        {...items}
+        inline
+        name="{name}.{i}"
+      />
+
+      {#if numItems > 1}
+        <Button action on:click={(e) => remove(e, i)}><X16 /></Button>
+      {/if}
+    </div>
+  {/each}
+
+  <div class="array-controls">
+    <Button on:click={push}><Plus16 fill="white" /></Button>
+  </div>
+</fieldset>
+
+{#if description}
+  <p class="help">{description}</p>
+{/if}
+
 <style>
   fieldset {
     padding: 0.5em;
@@ -82,32 +111,3 @@
     color: var(--gray);
   }
 </style>
-
-<fieldset class={items.type}>
-  {#if title}
-    <legend>{title}</legend>
-  {/if}
-  {#each value as v, i}
-    <div class="item item-{i}">
-      <svelte:component
-        this={types[items.type]}
-        bind:value={value[i]}
-        {...items}
-        inline
-        name="{name}.{i}"
-      />
-
-      {#if numItems > 1}
-        <Button action on:click={(e) => remove(e, i)}><X16 /></Button>
-      {/if}
-    </div>
-  {/each}
-
-  <div class="array-controls">
-    <Button on:click={push}><Plus16 fill="white" /></Button>
-  </div>
-</fieldset>
-
-{#if description}
-  <p class="help">{description}</p>
-{/if}
diff --git a/src/addons/dispatch/fields/Checkbox.svelte b/src/addons/dispatch/fields/Checkbox.svelte
index 9c680fb26..dedbdeb1f 100644
--- a/src/addons/dispatch/fields/Checkbox.svelte
+++ b/src/addons/dispatch/fields/Checkbox.svelte
@@ -9,13 +9,13 @@
   export let description: string = "";
 </script>
 
+<Field {title} {description} {required} inline>
+  <input type="checkbox" {name} bind:checked={value} {required} />
+</Field>
+
 <style>
   input {
     order: -1;
     margin: 0;
   }
 </style>
-
-<Field {title} {description} {required} inline>
-  <input type="checkbox" {name} bind:checked={value} {required} />
-</Field>
diff --git a/src/addons/dispatch/fields/Field.svelte b/src/addons/dispatch/fields/Field.svelte
index f9fb91f5a..37fe4a637 100644
--- a/src/addons/dispatch/fields/Field.svelte
+++ b/src/addons/dispatch/fields/Field.svelte
@@ -5,6 +5,18 @@
   export let required = false;
 </script>
 
+<div class="field" class:inline class:required>
+  <label>
+    {#if title}
+      <span class="title">{title}</span>
+    {/if}
+    <slot />
+  </label>
+  {#if description}
+    <p class="help">{description}</p>
+  {/if}
+</div>
+
 <style>
   .field {
     display: inline-block;
@@ -38,15 +50,3 @@
     color: var(--caution);
   }
 </style>
-
-<div class="field" class:inline class:required>
-  <label>
-    {#if title}
-      <span class="title">{title}</span>
-    {/if}
-    <slot />
-  </label>
-  {#if description}
-    <p class="help">{description}</p>
-  {/if}
-</div>
diff --git a/src/addons/dispatch/fields/Number.svelte b/src/addons/dispatch/fields/Number.svelte
index 961bb7db9..3e71fe621 100644
--- a/src/addons/dispatch/fields/Number.svelte
+++ b/src/addons/dispatch/fields/Number.svelte
@@ -12,12 +12,6 @@
   export let inline = false;
 </script>
 
-<style>
-  input {
-    flex: 1 1 auto;
-  }
-</style>
-
 <Field {title} {description} {inline} {required}>
   <input
     type="number"
@@ -32,3 +26,9 @@
     max={maximum}
   />
 </Field>
+
+<style>
+  input {
+    flex: 1 1 auto;
+  }
+</style>
diff --git a/src/addons/dispatch/fields/Text.svelte b/src/addons/dispatch/fields/Text.svelte
index 38ac8fe7d..28a7e03b6 100644
--- a/src/addons/dispatch/fields/Text.svelte
+++ b/src/addons/dispatch/fields/Text.svelte
@@ -11,13 +11,6 @@
   export let inline = false;
 </script>
 
-<style>
-  input {
-    flex: 1 1 auto;
-    max-width: 100%;
-  }
-</style>
-
 <Field {title} {description} {inline} {required}>
   <input
     type="text"
@@ -31,3 +24,10 @@
     on:blur
   />
 </Field>
+
+<style>
+  input {
+    flex: 1 1 auto;
+    max-width: 100%;
+  }
+</style>
diff --git a/src/addons/dispatch/stories/Header.stories.svelte b/src/addons/dispatch/stories/Header.stories.svelte
index 4b4640dc2..d3c1363bc 100644
--- a/src/addons/dispatch/stories/Header.stories.svelte
+++ b/src/addons/dispatch/stories/Header.stories.svelte
@@ -13,13 +13,6 @@
   };
 </script>
 
-<style>
-  .container {
-    max-width: 32rem;
-    margin: 0 auto;
-  }
-</style>
-
 <Template let:args={addon}>
   <div class="container">
     <Header {addon} />
@@ -39,3 +32,10 @@
 <Story name="Bad Redactions" args={addons[5]} />
 
 <Story name="Site Snapshot" args={addons[6]} />
+
+<style>
+  .container {
+    max-width: 32rem;
+    margin: 0 auto;
+  }
+</style>
diff --git a/src/addons/progress/AddonRun.svelte b/src/addons/progress/AddonRun.svelte
index ed9477c6d..3df4376ae 100644
--- a/src/addons/progress/AddonRun.svelte
+++ b/src/addons/progress/AddonRun.svelte
@@ -98,64 +98,6 @@
   }
 </script>
 
-<style>
-  .dismiss {
-    margin: 0 1px 0 14px;
-  }
-
-  .valign,
-  .dismiss {
-    display: inline-block;
-    vertical-align: middle;
-  }
-
-  .info {
-    font-weight: bold;
-    display: inline-block;
-    vertical-align: middle;
-    padding-right: 20px;
-    width: 20%;
-  }
-
-  .info.compact {
-    width: 100%;
-    padding-right: 0;
-  }
-
-  .message {
-    display: block;
-    width: 100%;
-  }
-
-  .addonRun {
-    padding: 8px 20px;
-    border-top: 1px solid rgba(128, 128, 128, 0.15);
-  }
-
-  .failure,
-  .cancelled {
-    background: var(--errorbg);
-  }
-
-  .failure .info,
-  .cancelled .info {
-    color: var(--caution);
-  }
-
-  .rate {
-    display: inline-block;
-    vertical-align: top;
-  }
-
-  a {
-    text-decoration: underline;
-  }
-
-  a:hover {
-    filter: brightness(85%);
-  }
-</style>
-
 <div class="addonRun {run.status}">
   <div class="info processingText" class:compact>
     {#if compact}
@@ -228,3 +170,61 @@
     </div>
   {/if}
 </div>
+
+<style>
+  .dismiss {
+    margin: 0 1px 0 14px;
+  }
+
+  .valign,
+  .dismiss {
+    display: inline-block;
+    vertical-align: middle;
+  }
+
+  .info {
+    font-weight: bold;
+    display: inline-block;
+    vertical-align: middle;
+    padding-right: 20px;
+    width: 20%;
+  }
+
+  .info.compact {
+    width: 100%;
+    padding-right: 0;
+  }
+
+  .message {
+    display: block;
+    width: 100%;
+  }
+
+  .addonRun {
+    padding: 8px 20px;
+    border-top: 1px solid rgba(128, 128, 128, 0.15);
+  }
+
+  .failure,
+  .cancelled {
+    background: var(--errorbg);
+  }
+
+  .failure .info,
+  .cancelled .info {
+    color: var(--caution);
+  }
+
+  .rate {
+    display: inline-block;
+    vertical-align: top;
+  }
+
+  a {
+    text-decoration: underline;
+  }
+
+  a:hover {
+    filter: brightness(85%);
+  }
+</style>
diff --git a/src/addons/progress/AddonStatus.svelte b/src/addons/progress/AddonStatus.svelte
index 56e2659f0..0c1160316 100644
--- a/src/addons/progress/AddonStatus.svelte
+++ b/src/addons/progress/AddonStatus.svelte
@@ -43,6 +43,15 @@
   });
 </script>
 
+{#if $runs.length > 0}
+  <div class="addonStatus">
+    <h3 class="title">{$_("addonProgress.progress")}</h3>
+    {#each $runs as run (run.uuid)}
+      <AddonRun {run} />
+    {/each}
+  </div>
+{/if}
+
 <style>
   .addonStatus {
     background: #eff7ff;
@@ -59,12 +68,3 @@
     padding: 8px 20px;
   }
 </style>
-
-{#if $runs.length > 0}
-  <div class="addonStatus">
-    <h3 class="title">{$_("addonProgress.progress")}</h3>
-    {#each $runs as run (run.uuid)}
-      <AddonRun {run} />
-    {/each}
-  </div>
-{/if}
diff --git a/src/addons/runs/History.svelte b/src/addons/runs/History.svelte
index ff019b1ec..fc397d874 100644
--- a/src/addons/runs/History.svelte
+++ b/src/addons/runs/History.svelte
@@ -62,6 +62,44 @@
   onMount(load);
 </script>
 
+<div class="history-list">
+  {#if empty}
+    <div class="empty">
+      <div class="icon"><History24 /></div>
+      <p>{$_("addonRuns.history.empty")}</p>
+    </div>
+  {:else if loading}
+    <div class="loading">
+      <Loader active center big pad />
+      <p>{$_("addonRuns.history.loading")}</p>
+    </div>
+  {:else if error}
+    <div class="error">
+      <div class="icon"><Error /></div>
+      <p>{error}</p>
+      <Button action on:click={() => load()}
+        >{$_("addonRuns.history.retry")}</Button
+      >
+    </div>
+  {:else}
+    <ul>
+      {#each runs as run}
+        <li><HistoryEvent {run} /></li>
+      {/each}
+    </ul>
+  {/if}
+  {#if prev_url || next_url}
+    <div class="pagination-controls">
+      <Paginator
+        has_next={Boolean(next_url)}
+        has_previous={Boolean(prev_url)}
+        on:next={loadNext}
+        on:previous={loadPrev}
+      />
+    </div>
+  {/if}
+</div>
+
 <style>
   .history-list ul {
     margin: 0;
@@ -109,41 +147,3 @@
     background: var(--menubg, white);
   }
 </style>
-
-<div class="history-list">
-  {#if empty}
-    <div class="empty">
-      <div class="icon"><History24 /></div>
-      <p>{$_("addonRuns.history.empty")}</p>
-    </div>
-  {:else if loading}
-    <div class="loading">
-      <Loader active center big pad />
-      <p>{$_("addonRuns.history.loading")}</p>
-    </div>
-  {:else if error}
-    <div class="error">
-      <div class="icon"><Error /></div>
-      <p>{error}</p>
-      <Button action on:click={() => load()}
-        >{$_("addonRuns.history.retry")}</Button
-      >
-    </div>
-  {:else}
-    <ul>
-      {#each runs as run}
-        <li><HistoryEvent {run} /></li>
-      {/each}
-    </ul>
-  {/if}
-  {#if prev_url || next_url}
-    <div class="pagination-controls">
-      <Paginator
-        has_next={Boolean(next_url)}
-        has_previous={Boolean(prev_url)}
-        on:next={loadNext}
-        on:previous={loadPrev}
-      />
-    </div>
-  {/if}
-</div>
diff --git a/src/addons/runs/HistoryEvent.svelte b/src/addons/runs/HistoryEvent.svelte
index 8697d5a0c..422816ef3 100644
--- a/src/addons/runs/HistoryEvent.svelte
+++ b/src/addons/runs/HistoryEvent.svelte
@@ -35,6 +35,49 @@
   $: ranAt = new Date(run.created_at);
 </script>
 
+<div class="addon-run" id="run-{run.uuid}">
+  <div class="status">
+    {#if run.status === "success"}
+      <span class="success icon" title="Success"><CheckCircle24 /></span>
+    {:else if run.status === "failure"}
+      <span class="failure icon" title="Failure"><Alert24 /></span>
+    {:else if run.status === "queued"}
+      <span class="queued icon" title="Queued"><Hourglass24 /></span>
+    {:else if run.status === "in_progress"}
+      <span class="in-progress icon" title="In Progress"><Sync24 /></span>
+    {:else}
+      <span class="unknown-status icon" title="Unknown Status"
+        ><Question24 /></span
+      >
+    {/if}
+  </div>
+  <div class="info">
+    <div class="row">
+      <div class="primary-info">
+        <p class="name">{run.addon.name}</p>
+        {#if run.file_url}<Button action href={run.file_url}
+            ><Paperclip16 />Download File</Button
+          >{/if}
+      </div>
+      <time
+        class="date"
+        datetime={ranAt.toISOString()}
+        title={ranAt.toISOString()}>{ranAt.toLocaleString()}</time
+      >
+    </div>
+    <div class="row">
+      {#if run.message}
+        <p class="message">{run.message}</p>
+      {/if}
+      {#if run.credits_spent}
+        <p class="price">
+          <Price value={run.credits_spent} />
+        </p>
+      {/if}
+    </div>
+  </div>
+</div>
+
 <style>
   @keyframes spin {
     0% {
@@ -113,46 +156,3 @@
     align-self: flex-end;
   }
 </style>
-
-<div class="addon-run" id="run-{run.uuid}">
-  <div class="status">
-    {#if run.status === "success"}
-      <span class="success icon" title="Success"><CheckCircle24 /></span>
-    {:else if run.status === "failure"}
-      <span class="failure icon" title="Failure"><Alert24 /></span>
-    {:else if run.status === "queued"}
-      <span class="queued icon" title="Queued"><Hourglass24 /></span>
-    {:else if run.status === "in_progress"}
-      <span class="in-progress icon" title="In Progress"><Sync24 /></span>
-    {:else}
-      <span class="unknown-status icon" title="Unknown Status"
-        ><Question24 /></span
-      >
-    {/if}
-  </div>
-  <div class="info">
-    <div class="row">
-      <div class="primary-info">
-        <p class="name">{run.addon.name}</p>
-        {#if run.file_url}<Button action href={run.file_url}
-            ><Paperclip16 />Download File</Button
-          >{/if}
-      </div>
-      <time
-        class="date"
-        datetime={ranAt.toISOString()}
-        title={ranAt.toISOString()}>{ranAt.toLocaleString()}</time
-      >
-    </div>
-    <div class="row">
-      {#if run.message}
-        <p class="message">{run.message}</p>
-      {/if}
-      {#if run.credits_spent}
-        <p class="price">
-          <Price value={run.credits_spent} />
-        </p>
-      {/if}
-    </div>
-  </div>
-</div>
diff --git a/src/addons/runs/Runs.svelte b/src/addons/runs/Runs.svelte
index 1c6c4698f..b257c39be 100644
--- a/src/addons/runs/Runs.svelte
+++ b/src/addons/runs/Runs.svelte
@@ -12,6 +12,15 @@
   let drawer: Drawer;
 </script>
 
+<Drawer bind:this={drawer} {visible} anchor="right" on:open on:close>
+  <div slot="content">
+    <h2>{$_("addonRuns.scheduled")}</h2>
+    <Scheduled />
+    <h2>{$_("addonRuns.previous")}</h2>
+    <History />
+  </div>
+</Drawer>
+
 <style>
   [slot="content"] {
     width: 60ch;
@@ -23,12 +32,3 @@
     border-bottom: 2px solid rgba(0, 0, 0, 0.1);
   }
 </style>
-
-<Drawer bind:this={drawer} {visible} anchor="right" on:open on:close>
-  <div slot="content">
-    <h2>{$_("addonRuns.scheduled")}</h2>
-    <Scheduled />
-    <h2>{$_("addonRuns.previous")}</h2>
-    <History />
-  </div>
-</Drawer>
diff --git a/src/addons/runs/Scheduled.svelte b/src/addons/runs/Scheduled.svelte
index 661a9409e..e61e2874c 100644
--- a/src/addons/runs/Scheduled.svelte
+++ b/src/addons/runs/Scheduled.svelte
@@ -63,42 +63,6 @@
   onMount(load);
 </script>
 
-<style>
-  .scheduled-list ul {
-    margin: 0;
-    padding: 0;
-    list-style-type: none;
-  }
-  .scheduled-list li {
-    padding: 0;
-  }
-  .empty,
-  .loading,
-  .error {
-    margin: 2em 1em;
-    color: var(--darkgray);
-    fill: var(--gray);
-  }
-  .error {
-    color: var(--caution);
-  }
-  .empty .icon {
-    transform: scale(2);
-    opacity: 0.4;
-  }
-  .error .icon {
-    height: 3em;
-    width: 3em;
-  }
-  .empty,
-  .error,
-  .loading {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-  }
-</style>
-
 <div class="scheduled-list">
   {#if empty}
     <div class="empty">
@@ -134,3 +98,39 @@
     />
   {/if}
 </div>
+
+<style>
+  .scheduled-list ul {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .scheduled-list li {
+    padding: 0;
+  }
+  .empty,
+  .loading,
+  .error {
+    margin: 2em 1em;
+    color: var(--darkgray);
+    fill: var(--gray);
+  }
+  .error {
+    color: var(--caution);
+  }
+  .empty .icon {
+    transform: scale(2);
+    opacity: 0.4;
+  }
+  .error .icon {
+    height: 3em;
+    width: 3em;
+  }
+  .empty,
+  .error,
+  .loading {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+</style>
diff --git a/src/addons/runs/ScheduledEvent.svelte b/src/addons/runs/ScheduledEvent.svelte
index 773e9c902..08f751dc7 100644
--- a/src/addons/runs/ScheduledEvent.svelte
+++ b/src/addons/runs/ScheduledEvent.svelte
@@ -40,6 +40,35 @@
   }
 </script>
 
+<a
+  href={url(event)}
+  title={$_("dialog.edit")}
+  class="addon-event"
+  id="event-{event.id}"
+  class:disabled
+>
+  <div class="info">
+    <p class="name">
+      {event.addon.name}
+    </p>
+    {#if target}
+      <p class="target">{target}</p>
+    {/if}
+    {#if disabled}
+      <p class="routine">{schedules[event.event]}</p>
+    {:else}
+      <p class="routine">
+        {$_("addonRuns.runsOn", {
+          values: { schedule: schedules[event.event] },
+        })}
+      </p>
+    {/if}
+  </div>
+  <div class="actions">
+    <Button action href={url(event)}><Pencil16 /></Button>
+  </div>
+</a>
+
 <style>
   .addon-event {
     display: flex;
@@ -78,32 +107,3 @@
     color: var(--darkgray);
   }
 </style>
-
-<a
-  href={url(event)}
-  title={$_("dialog.edit")}
-  class="addon-event"
-  id="event-{event.id}"
-  class:disabled
->
-  <div class="info">
-    <p class="name">
-      {event.addon.name}
-    </p>
-    {#if target}
-      <p class="target">{target}</p>
-    {/if}
-    {#if disabled}
-      <p class="routine">{schedules[event.event]}</p>
-    {:else}
-      <p class="routine">
-        {$_("addonRuns.runsOn", {
-          values: { schedule: schedules[event.event] },
-        })}
-      </p>
-    {/if}
-  </div>
-  <div class="actions">
-    <Button action href={url(event)}><Pencil16 /></Button>
-  </div>
-</a>
diff --git a/src/addons/sidebar/AddonListItem.svelte b/src/addons/sidebar/AddonListItem.svelte
index 20b498dc8..1a84b0efb 100644
--- a/src/addons/sidebar/AddonListItem.svelte
+++ b/src/addons/sidebar/AddonListItem.svelte
@@ -10,12 +10,12 @@
   $: label = addon.name;
 </script>
 
+<ListItem {href} {label}>
+  <div slot="icon" class="icon"><Pin title={label} /></div>
+</ListItem>
+
 <style>
   .icon {
     fill: var(--highlight-orange);
   }
 </style>
-
-<ListItem {href} {label}>
-  <div slot="icon" class="icon"><Pin title={label} /></div>
-</ListItem>
diff --git a/src/addons/sidebar/ListItem.svelte b/src/addons/sidebar/ListItem.svelte
index 5a5b0d427..a8a97fcbf 100644
--- a/src/addons/sidebar/ListItem.svelte
+++ b/src/addons/sidebar/ListItem.svelte
@@ -3,6 +3,11 @@
   export let label: string;
 </script>
 
+<a class="list-item" {href}>
+  {#if $$slots.icon}<div class="icon"><slot name="icon" /></div>{/if}
+  <h4>{label}</h4>
+</a>
+
 <style>
   .list-item {
     display: flex;
@@ -26,8 +31,3 @@
     font-weight: 600;
   }
 </style>
-
-<a class="list-item" {href}>
-  {#if $$slots.icon}<div class="icon"><slot name="icon" /></div>{/if}
-  <h4>{label}</h4>
-</a>
diff --git a/src/addons/sidebar/Sidebar.svelte b/src/addons/sidebar/Sidebar.svelte
index b142982f9..4db7988f3 100644
--- a/src/addons/sidebar/Sidebar.svelte
+++ b/src/addons/sidebar/Sidebar.svelte
@@ -34,6 +34,22 @@
   });
 </script>
 
+<div class="addon-sidebar">
+  <h3 class="section-title">
+    <a href="#add-ons">{$_("addonSidebar.title")}</a>
+  </h3>
+  <ListItem href="#add-ons/runs" label={$_("addonSidebar.runs")}>
+    <span slot="icon" class="runs-icon"><ClockFill16 /></span>
+  </ListItem>
+  {#if $pinned.length}
+    <ul class="addons">
+      {#each sort($pinned) as addon (addon.id)}
+        <li><AddonListItem {addon} /></li>
+      {/each}
+    </ul>
+  {/if}
+</div>
+
 <style>
   .addon-sidebar {
     padding: 0 1.5rem;
@@ -68,19 +84,3 @@
     margin: 0.25em 0;
   }
 </style>
-
-<div class="addon-sidebar">
-  <h3 class="section-title">
-    <a href="#add-ons">{$_("addonSidebar.title")}</a>
-  </h3>
-  <ListItem href="#add-ons/runs" label={$_("addonSidebar.runs")}>
-    <span slot="icon" class="runs-icon"><ClockFill16 /></span>
-  </ListItem>
-  {#if $pinned.length}
-    <ul class="addons">
-      {#each sort($pinned) as addon (addon.id)}
-        <li><AddonListItem {addon} /></li>
-      {/each}
-    </ul>
-  {/if}
-</div>
diff --git a/src/addons/sidebar/stories/ListItem.stories.svelte b/src/addons/sidebar/stories/ListItem.stories.svelte
index 87f6cb186..a0d63326e 100644
--- a/src/addons/sidebar/stories/ListItem.stories.svelte
+++ b/src/addons/sidebar/stories/ListItem.stories.svelte
@@ -12,16 +12,6 @@
   };
 </script>
 
-<style>
-  .sidebar {
-    width: var(--sidebar-width);
-    background-color: var(--sidebar);
-  }
-  .icon {
-    fill: var(--highlight-orange);
-  }
-</style>
-
 <Template let:args>
   <div class="sidebar">
     <ListItem {...args}>
@@ -37,3 +27,13 @@
     label: "Empty Page Deleter",
   }}
 />
+
+<style>
+  .sidebar {
+    width: var(--sidebar-width);
+    background-color: var(--sidebar);
+  }
+  .icon {
+    fill: var(--highlight-orange);
+  }
+</style>
diff --git a/src/addons/sidebar/stories/Sidebar.stories.svelte b/src/addons/sidebar/stories/Sidebar.stories.svelte
index d6daa2490..ae0cda201 100644
--- a/src/addons/sidebar/stories/Sidebar.stories.svelte
+++ b/src/addons/sidebar/stories/Sidebar.stories.svelte
@@ -21,6 +21,12 @@
   };
 </script>
 
+<Story name="Default" parameters={{ msw: { handlers: [data] } }}>
+  <div class="sidebar">
+    <Sidebar />
+  </div>
+</Story>
+
 <style>
   .sidebar {
     padding: 1.5rem 0;
@@ -28,9 +34,3 @@
     background-color: var(--sidebar);
   }
 </style>
-
-<Story name="Default" parameters={{ msw: { handlers: [data] } }}>
-  <div class="sidebar">
-    <Sidebar />
-  </div>
-</Story>
diff --git a/src/addons/stories/Drawer.stories.svelte b/src/addons/stories/Drawer.stories.svelte
index a067dcd80..377310505 100644
--- a/src/addons/stories/Drawer.stories.svelte
+++ b/src/addons/stories/Drawer.stories.svelte
@@ -13,14 +13,6 @@
   };
 </script>
 
-<style>
-  .content {
-    padding: 0 1em;
-    min-width: 24em;
-    margin: 0 auto;
-  }
-</style>
-
 <Template let:args>
   <Drawer {...args}>
     <div slot="content" class="content">
@@ -32,3 +24,11 @@
 
 <Story name="Righthand" {args} />
 <Story name="Lefthand" args={{ ...args, anchor: "left" }} />
+
+<style>
+  .content {
+    padding: 0 1em;
+    min-width: 24em;
+    margin: 0 auto;
+  }
+</style>
diff --git a/src/addons/stories/Paginator.stories.svelte b/src/addons/stories/Paginator.stories.svelte
index 9e0bfba89..080ae4fe3 100644
--- a/src/addons/stories/Paginator.stories.svelte
+++ b/src/addons/stories/Paginator.stories.svelte
@@ -19,14 +19,6 @@
   };
 </script>
 
-<style>
-  .container {
-    border: 1px solid gray;
-    padding: 1em;
-    width: 50vw;
-  }
-</style>
-
 <Template let:args>
   <div class="container">
     <Paginator
@@ -41,3 +33,11 @@
 <Story name="Only Page" args={{ has_next: false, has_previous: false }} />
 <Story name="First Page" args={{ has_next: true, has_previous: false }} />
 <Story name="Last Page" args={{ has_next: false, has_previous: true }} />
+
+<style>
+  .container {
+    border: 1px solid gray;
+    padding: 1em;
+    width: 50vw;
+  }
+</style>
diff --git a/src/api/languages.js b/src/api/languages.js
index ccfc9b39c..d9ea8b438 100644
--- a/src/api/languages.js
+++ b/src/api/languages.js
@@ -14,6 +14,6 @@ function makeLanguagePairs(codes, names) {
 export const languages = makeLanguagePairs(languageCodes, languageNames);
 
 const textractLanguageCodes = ["eng", "spa", "ita", "por", "fra", "deu"];
-export const textractLanguages = languages.filter((l) =>
-  textractLanguageCodes.indexOf(l[0]) != -1
+export const textractLanguages = languages.filter(
+  (l) => textractLanguageCodes.indexOf(l[0]) != -1,
 );
diff --git a/src/common/AccessIcon.svelte b/src/common/AccessIcon.svelte
index a7693ff19..6de7b7e15 100644
--- a/src/common/AccessIcon.svelte
+++ b/src/common/AccessIcon.svelte
@@ -21,31 +21,18 @@
   $: documentAccessString = document.organizationAccess
     ? "accessIcon.organizationExplanation"
     : document.publicAccess
-    ? "accessIcon.publicExplanation"
-    : "accessIcon.privateExplanation";
+      ? "accessIcon.publicExplanation"
+      : "accessIcon.privateExplanation";
 
   $: documentText = showText
     ? document.organizationAccess
       ? "accessIcon.organization"
       : document.publicAccess
-      ? "accessIcon.public"
-      : "accessIcon.private"
+        ? "accessIcon.public"
+        : "accessIcon.private"
     : "";
 </script>
 
-<style>
-  .access {
-    vertical-align: middle;
-  }
-
-  .text {
-    font-size: 12px;
-    color: var(--viewerLink, #004276);
-    vertical-align: middle;
-    margin-left: 2px;
-  }
-</style>
-
 {#if showText}
   <button
     class="buttonLike"
@@ -80,3 +67,16 @@
     </button>
   </Tooltip>
 {/if}
+
+<style>
+  .access {
+    vertical-align: middle;
+  }
+
+  .text {
+    font-size: 12px;
+    color: var(--viewerLink, #004276);
+    vertical-align: middle;
+    margin-left: 2px;
+  }
+</style>
diff --git a/src/common/AccessToggle.svelte b/src/common/AccessToggle.svelte
index 8b85f5d4e..f0ba71cf6 100644
--- a/src/common/AccessToggle.svelte
+++ b/src/common/AccessToggle.svelte
@@ -18,6 +18,56 @@
   export let privateMessage = $_("accessToggle.private");
 </script>
 
+<div class="access" class:stacked>
+  {#if editAccess}
+    <div
+      class="container public"
+      class:selected={access == "public"}
+      on:click={() => (access = "public")}
+    >
+      <div class="item">
+        <span class="icon">
+          {@html publicIconSvg}
+        </span>
+        <div class="contents">
+          <h3>{publicName}</h3>
+          <p>{publicMessage}</p>
+        </div>
+      </div>
+    </div>
+    <div
+      class="container organization"
+      class:selected={access == "organization"}
+      on:click={() => (access = "organization")}
+    >
+      <div class="item">
+        <span class="icon">
+          {@html organizationIconSvg}
+        </span>
+        <div class="contents">
+          <h3>{collaboratorName}</h3>
+          <p>{collaboratorMessage}</p>
+        </div>
+      </div>
+    </div>
+  {/if}
+  <div
+    class="container private"
+    class:selected={access == "private"}
+    on:click={() => (access = "private")}
+  >
+    <div class="item">
+      <span class="icon">
+        {@html privateIconSvg}
+      </span>
+      <div class="contents">
+        <h3>{privateName}</h3>
+        <p>{privateMessage}</p>
+      </div>
+    </div>
+  </div>
+</div>
+
 <style lang="scss">
   .access {
     $spacing: 10px;
@@ -121,53 +171,3 @@
     }
   }
 </style>
-
-<div class="access" class:stacked>
-  {#if editAccess}
-    <div
-      class="container public"
-      class:selected={access == "public"}
-      on:click={() => (access = "public")}
-    >
-      <div class="item">
-        <span class="icon">
-          {@html publicIconSvg}
-        </span>
-        <div class="contents">
-          <h3>{publicName}</h3>
-          <p>{publicMessage}</p>
-        </div>
-      </div>
-    </div>
-    <div
-      class="container organization"
-      class:selected={access == "organization"}
-      on:click={() => (access = "organization")}
-    >
-      <div class="item">
-        <span class="icon">
-          {@html organizationIconSvg}
-        </span>
-        <div class="contents">
-          <h3>{collaboratorName}</h3>
-          <p>{collaboratorMessage}</p>
-        </div>
-      </div>
-    </div>
-  {/if}
-  <div
-    class="container private"
-    class:selected={access == "private"}
-    on:click={() => (access = "private")}
-  >
-    <div class="item">
-      <span class="icon">
-        {@html privateIconSvg}
-      </span>
-      <div class="contents">
-        <h3>{privateName}</h3>
-        <p>{privateMessage}</p>
-      </div>
-    </div>
-  </div>
-</div>
diff --git a/src/common/AppearanceCustomizer.svelte b/src/common/AppearanceCustomizer.svelte
index 535664fa9..331f62aa0 100644
--- a/src/common/AppearanceCustomizer.svelte
+++ b/src/common/AppearanceCustomizer.svelte
@@ -29,6 +29,30 @@
   const change = timeoutify(change_, 250);
 </script>
 
+<details>
+  <summary>{$_("appearanceCustomizer.customizeAppearance")}</summary>
+  <Button on:click={() => (help = !help)} nondescript={true}>
+    {#if help}
+      {$_("appearanceCustomizer.hide")}
+    {:else}
+      {$_("appearanceCustomizer.show")}
+    {/if}
+  </Button>
+  <div class="optionscrollcontainer">
+    <div class="optionscroll">
+      {#each options as option}
+        {#if option.type == "toggle"}
+          <AppearanceToggle {help} on:change={change} {option} />
+        {:else if option.type == "dimension"}
+          <AppearanceDimension {help} on:change={change} {option} />
+        {/if}
+      {/each}
+      <div class="optionspacer" />
+    </div>
+    <div class="scrollfade" />
+  </div>
+</details>
+
 <style lang="scss">
   $appearanceHeight: 400px;
 
@@ -75,27 +99,3 @@
     pointer-events: none;
   }
 </style>
-
-<details>
-  <summary>{$_("appearanceCustomizer.customizeAppearance")}</summary>
-  <Button on:click={() => (help = !help)} nondescript={true}>
-    {#if help}
-      {$_("appearanceCustomizer.hide")}
-    {:else}
-      {$_("appearanceCustomizer.show")}
-    {/if}
-  </Button>
-  <div class="optionscrollcontainer">
-    <div class="optionscroll">
-      {#each options as option}
-        {#if option.type == "toggle"}
-          <AppearanceToggle {help} on:change={change} {option} />
-        {:else if option.type == "dimension"}
-          <AppearanceDimension {help} on:change={change} {option} />
-        {/if}
-      {/each}
-      <div class="optionspacer" />
-    </div>
-    <div class="scrollfade" />
-  </div>
-</details>
diff --git a/src/common/AppearanceDimension.svelte b/src/common/AppearanceDimension.svelte
index 1f29c87f2..51b5db589 100644
--- a/src/common/AppearanceDimension.svelte
+++ b/src/common/AppearanceDimension.svelte
@@ -28,6 +28,29 @@
   }
 </script>
 
+<div class="toggle">
+  <h1>{option.title}</h1>
+  <div class="labels">
+    <label>
+      <input type="radio" value={0} bind:group={selected} />
+      <h2>{$_("appearanceDimension.responsive")}</h2>
+      {#if help}
+        <p>{automaticText}</p>
+      {/if}
+    </label>
+    <label>
+      <input type="radio" value={1} bind:group={selected} />
+      <h2>{$_("appearanceDimension.fixed")}</h2>
+      {#if selected == 1}
+        <input class="numinput" type="number" min="1" bind:value={fixed} />
+      {/if}
+      {#if help}
+        <p>{fixedText}</p>
+      {/if}
+    </label>
+  </div>
+</div>
+
 <style lang="scss">
   .toggle {
     box-sizing: border-box;
@@ -79,26 +102,3 @@
     }
   }
 </style>
-
-<div class="toggle">
-  <h1>{option.title}</h1>
-  <div class="labels">
-    <label>
-      <input type="radio" value={0} bind:group={selected} />
-      <h2>{$_("appearanceDimension.responsive")}</h2>
-      {#if help}
-        <p>{automaticText}</p>
-      {/if}
-    </label>
-    <label>
-      <input type="radio" value={1} bind:group={selected} />
-      <h2>{$_("appearanceDimension.fixed")}</h2>
-      {#if selected == 1}
-        <input class="numinput" type="number" min="1" bind:value={fixed} />
-      {/if}
-      {#if help}
-        <p>{fixedText}</p>
-      {/if}
-    </label>
-  </div>
-</div>
diff --git a/src/common/AppearanceToggle.svelte b/src/common/AppearanceToggle.svelte
index 875668014..f5a74834a 100644
--- a/src/common/AppearanceToggle.svelte
+++ b/src/common/AppearanceToggle.svelte
@@ -17,6 +17,21 @@
   }
 </script>
 
+<div class="toggle">
+  <h1>{option.title}</h1>
+  <div class="labels">
+    {#each option.values as value, i}
+      <label>
+        <input type="radio" value={i} bind:group={option.selected} />
+        <h2>{value[0]}</h2>
+        {#if help}
+          <p>{value[1]}</p>
+        {/if}
+      </label>
+    {/each}
+  </div>
+</div>
+
 <style lang="scss">
   .toggle {
     box-sizing: border-box;
@@ -62,18 +77,3 @@
     }
   }
 </style>
-
-<div class="toggle">
-  <h1>{option.title}</h1>
-  <div class="labels">
-    {#each option.values as value, i}
-      <label>
-        <input type="radio" value={i} bind:group={option.selected} />
-        <h2>{value[0]}</h2>
-        {#if help}
-          <p>{value[1]}</p>
-        {/if}
-      </label>
-    {/each}
-  </div>
-</div>
diff --git a/src/common/Autocomplete.svelte b/src/common/Autocomplete.svelte
index edd948a3d..ea2ccb6b2 100644
--- a/src/common/Autocomplete.svelte
+++ b/src/common/Autocomplete.svelte
@@ -37,6 +37,36 @@
   }
 </script>
 
+<span class="autocomplete">
+  {#if value != null}
+    <span class="tag"
+      >{value.name}
+      <span
+        class="close"
+        on:click={() => {
+          value = null;
+          completions = null;
+          inputValue = "";
+          autocomplete();
+        }}>×</span
+      ></span
+    >
+  {:else}
+    <input {placeholder} bind:value={inputValue} />
+    {#if completions == null}
+      <span class="message">Loading completions...</span>
+    {:else if completions.length > 0}
+      {#each completions as completion}
+        <span class="tag clickable" on:click={() => (value = completion)}
+          >{completion.name}</span
+        >
+      {/each}
+    {:else}
+      <span class="message">No results found</span>
+    {/if}
+  {/if}
+</span>
+
 <style lang="scss">
   .autocomplete {
     display: inline-block;
@@ -78,33 +108,3 @@
     }
   }
 </style>
-
-<span class="autocomplete">
-  {#if value != null}
-    <span class="tag"
-      >{value.name}
-      <span
-        class="close"
-        on:click={() => {
-          value = null;
-          completions = null;
-          inputValue = "";
-          autocomplete();
-        }}>×</span
-      ></span
-    >
-  {:else}
-    <input {placeholder} bind:value={inputValue} />
-    {#if completions == null}
-      <span class="message">Loading completions...</span>
-    {:else if completions.length > 0}
-      {#each completions as completion}
-        <span class="tag clickable" on:click={() => (value = completion)}
-          >{completion.name}</span
-        >
-      {/each}
-    {:else}
-      <span class="message">No results found</span>
-    {/if}
-  {/if}
-</span>
diff --git a/src/common/Badge.svelte b/src/common/Badge.svelte
index ed64c81a0..f9503ff0a 100644
--- a/src/common/Badge.svelte
+++ b/src/common/Badge.svelte
@@ -4,6 +4,14 @@
   export let label: string;
 </script>
 
+<div
+  class="badge"
+  style="--badge-color: {badgeColor}; --label-color: {labelColor};"
+>
+  {#if $$slots.icon}<span class="icon"><slot name="icon" /></span>{/if}
+  <span class="label">{label}</span>
+</div>
+
 <style>
   .badge {
     display: inline-flex;
@@ -25,11 +33,3 @@
     opacity: 0.9;
   }
 </style>
-
-<div
-  class="badge"
-  style="--badge-color: {badgeColor}; --label-color: {labelColor};"
->
-  {#if $$slots.icon}<span class="icon"><slot name="icon" /></span>{/if}
-  <span class="label">{label}</span>
-</div>
diff --git a/src/common/Button.svelte b/src/common/Button.svelte
index a1886376b..421c9adde 100644
--- a/src/common/Button.svelte
+++ b/src/common/Button.svelte
@@ -23,6 +23,52 @@
   export let disabledReason = null;
 </script>
 
+<Tooltip delay={500} show={disabledReason != null} caption={disabledReason}>
+  {#if href}
+    <a
+      {href}
+      {title}
+      on:click
+      class:secondary
+      class:tertiary
+      class:premium
+      class:danger
+      class:small
+      class:caution
+      class:nondescript
+      class:action
+      class:plain
+      class:nomargin
+      class:fullWidth
+      class:disabled={disabled || disabledReason != null}
+      rel={external ? "noopener noreferrer" : null}
+      target={external ? "_blank" : null}
+    >
+      <slot>{label}</slot>
+    </a>
+  {:else}
+    <button
+      {title}
+      on:click
+      class:secondary
+      class:tertiary
+      class:premium
+      class:danger
+      class:small
+      class:caution
+      class:nondescript
+      class:action
+      class:plain
+      class:nomargin
+      class:fullWidth
+      disabled={disabled || disabledReason != null}
+      {type}
+    >
+      <slot>{label}</slot>
+    </button>
+  {/if}
+</Tooltip>
+
 <style>
   button,
   a {
@@ -140,49 +186,3 @@
     justify-content: center;
   }
 </style>
-
-<Tooltip delay={500} show={disabledReason != null} caption={disabledReason}>
-  {#if href}
-    <a
-      {href}
-      {title}
-      on:click
-      class:secondary
-      class:tertiary
-      class:premium
-      class:danger
-      class:small
-      class:caution
-      class:nondescript
-      class:action
-      class:plain
-      class:nomargin
-      class:fullWidth
-      class:disabled={disabled || disabledReason != null}
-      rel={external ? "noopener noreferrer" : null}
-      target={external ? "_blank" : null}
-    >
-      <slot>{label}</slot>
-    </a>
-  {:else}
-    <button
-      {title}
-      on:click
-      class:secondary
-      class:tertiary
-      class:premium
-      class:danger
-      class:small
-      class:caution
-      class:nondescript
-      class:action
-      class:plain
-      class:nomargin
-      class:fullWidth
-      disabled={disabled || disabledReason != null}
-      {type}
-    >
-      <slot>{label}</slot>
-    </button>
-  {/if}
-</Tooltip>
diff --git a/src/common/Calendar.svelte b/src/common/Calendar.svelte
index 5772add3c..ecf41bd65 100644
--- a/src/common/Calendar.svelte
+++ b/src/common/Calendar.svelte
@@ -105,6 +105,65 @@
   $: days = getDayObjects(viewedMonth, viewedYear);
 </script>
 
+<div class="currentdate">
+  {$date(value, { format: "medium" })}
+  {$time(value, { format: "short" })}
+</div>
+<div class="calendarcontainer">
+  <div class="calendarheader">
+    <div class="monthrow">
+      <div
+        class="arrow"
+        class:hidden={viewedYear * 12 + viewedMonth <=
+          startYear * 12 + startMonth}
+        on:click={() => setMonth(-1)}
+      >
+        {@html CalendarLeft}
+      </div>
+      <div class="month">{months[viewedMonth]} {viewedYear}</div>
+      <div class="arrow" on:click={() => setMonth(1)}>
+        {@html CalendarRight}
+      </div>
+    </div>
+  </div>
+  <table>
+    {#each days as week}
+      <tr>
+        {#each week as day}
+          <td
+            class:disabled={dateLessThan(day, now)}
+            class:plain={day.getMonth() != viewedMonth}
+            class:selected={day.getFullYear() == year &&
+              day.getMonth() == month &&
+              day.getDate() == dayOfMonth}
+            on:click={() => {
+              dayOfMonth = day.getDate();
+              month = day.getMonth();
+              year = day.getFullYear();
+            }}>{day.getDate()}</td
+          >
+        {/each}
+      </tr>
+    {/each}
+  </table>
+
+  <div class="timepicker">
+    <select bind:value={hour}>
+      {#each Array(24) as _, i}
+        <option value={i}>{lpad(`${i}`, 2)}</option>
+      {/each}
+    </select>
+    <span class="signifier">{$_("calendar.hourShortcode")}</span>
+    :
+    <select bind:value={minute}>
+      {#each Array(60) as _, i}
+        <option value={i}>{lpad(`${i}`, 2)}</option>
+      {/each}
+    </select>
+    <span class="signifier">{$_("calendar.minuteShortcode")}</span>
+  </div>
+</div>
+
 <style lang="scss">
   .calendarcontainer {
     width: 100%;
@@ -205,62 +264,3 @@
     font-size: 12px;
   }
 </style>
-
-<div class="currentdate">
-  {$date(value, { format: "medium" })}
-  {$time(value, { format: "short" })}
-</div>
-<div class="calendarcontainer">
-  <div class="calendarheader">
-    <div class="monthrow">
-      <div
-        class="arrow"
-        class:hidden={viewedYear * 12 + viewedMonth <=
-          startYear * 12 + startMonth}
-        on:click={() => setMonth(-1)}
-      >
-        {@html CalendarLeft}
-      </div>
-      <div class="month">{months[viewedMonth]} {viewedYear}</div>
-      <div class="arrow" on:click={() => setMonth(1)}>
-        {@html CalendarRight}
-      </div>
-    </div>
-  </div>
-  <table>
-    {#each days as week}
-      <tr>
-        {#each week as day}
-          <td
-            class:disabled={dateLessThan(day, now)}
-            class:plain={day.getMonth() != viewedMonth}
-            class:selected={day.getFullYear() == year &&
-              day.getMonth() == month &&
-              day.getDate() == dayOfMonth}
-            on:click={() => {
-              dayOfMonth = day.getDate();
-              month = day.getMonth();
-              year = day.getFullYear();
-            }}>{day.getDate()}</td
-          >
-        {/each}
-      </tr>
-    {/each}
-  </table>
-
-  <div class="timepicker">
-    <select bind:value={hour}>
-      {#each Array(24) as _, i}
-        <option value={i}>{lpad(`${i}`, 2)}</option>
-      {/each}
-    </select>
-    <span class="signifier">{$_("calendar.hourShortcode")}</span>
-    :
-    <select bind:value={minute}>
-      {#each Array(60) as _, i}
-        <option value={i}>{lpad(`${i}`, 2)}</option>
-      {/each}
-    </select>
-    <span class="signifier">{$_("calendar.minuteShortcode")}</span>
-  </div>
-</div>
diff --git a/src/common/Checkbox.svelte b/src/common/Checkbox.svelte
index 7bb2b81be..3f2499d05 100644
--- a/src/common/Checkbox.svelte
+++ b/src/common/Checkbox.svelte
@@ -18,6 +18,25 @@
   }
 </script>
 
+<label>
+  <input
+    type="checkbox"
+    bind:this={checkbox}
+    bind:checked
+    {disabled}
+    on:change={handleChange}
+  />
+  <span>
+    {#if checked}
+      {#if indeterminate}
+        <Dash16 />
+      {:else}
+        <Check16 />
+      {/if}
+    {/if}
+  </span>
+</label>
+
 <style>
   label {
     display: inline-block;
@@ -38,7 +57,9 @@
     display: inline-block;
     height: var(--checkboxSize, 22px);
     position: relative;
-    transition: box-shadow 0.2s ease, border 0.2s ease;
+    transition:
+      box-shadow 0.2s ease,
+      border 0.2s ease;
     user-select: none;
     width: var(--checkboxSize, 22px);
   }
@@ -86,22 +107,3 @@
     border: solid 1px #bbbbbb;
   }
 </style>
-
-<label>
-  <input
-    type="checkbox"
-    bind:this={checkbox}
-    bind:checked
-    {disabled}
-    on:change={handleChange}
-  />
-  <span>
-    {#if checked}
-      {#if indeterminate}
-        <Dash16 />
-      {:else}
-        <Check16 />
-      {/if}
-    {/if}
-  </span>
-</label>
diff --git a/src/common/Draggable.svelte b/src/common/Draggable.svelte
index a14bac858..61c0d7406 100644
--- a/src/common/Draggable.svelte
+++ b/src/common/Draggable.svelte
@@ -33,6 +33,17 @@
   }
 </script>
 
+<div
+  class="outer"
+  class:dragging
+  on:dragenter|preventDefault={enter}
+  on:dragover|preventDefault={enter}
+  on:dragleave|preventDefault={leave}
+  on:drop|preventDefault={handleDrop}
+>
+  <slot />
+</div>
+
 <style lang="scss">
   .outer {
     display: table;
@@ -70,14 +81,3 @@
     color: white;
   }
 </style>
-
-<div
-  class="outer"
-  class:dragging
-  on:dragenter|preventDefault={enter}
-  on:dragover|preventDefault={enter}
-  on:dragleave|preventDefault={leave}
-  on:drop|preventDefault={handleDrop}
->
-  <slot />
-</div>
diff --git a/src/common/DropZone.svelte b/src/common/DropZone.svelte
index 34353438f..db78e1360 100644
--- a/src/common/DropZone.svelte
+++ b/src/common/DropZone.svelte
@@ -4,6 +4,14 @@
   export let secondary = false;
 </script>
 
+<div class:secondary class="dropzone">
+  <Draggable on:files>
+    <div class="content">
+      <slot />
+    </div>
+  </Draggable>
+</div>
+
 <style lang="scss">
   .dropzone {
     width: 100%;
@@ -45,11 +53,3 @@
     font-size: 15px;
   }
 </style>
-
-<div class:secondary class="dropzone">
-  <Draggable on:files>
-    <div class="content">
-      <slot />
-    </div>
-  </Draggable>
-</div>
diff --git a/src/common/Dropdown.svelte b/src/common/Dropdown.svelte
index 9df667bc6..1ba320276 100644
--- a/src/common/Dropdown.svelte
+++ b/src/common/Dropdown.svelte
@@ -84,6 +84,43 @@
   });
 </script>
 
+{#if active}
+  <span class="shim" on:click={hide} />
+{/if}
+<span class="wrapper" class:table class:active>
+  <span
+    class="titlebg"
+    class:active
+    class:bordered={bordered && !active}
+    bind:this={titleBg}
+    on:click={() => {
+      if (bordered) {
+        revealOrHide();
+      } else {
+        hide();
+      }
+    }}
+    style="width: {titleWidth + horizPadding * 2}px; left: {-horizPadding}px;
+    top: {-vertPadding}px; bottom: {-vertPadding}px"
+  />
+  <span class:table bind:this={title} on:click={revealOrHide}>
+    <slot name="title" />
+  </span>
+</span>
+
+<span
+  class="menubg"
+  class:active
+  class:fixed
+  on:click={hide}
+  bind:this={menu}
+  style="left: {menuLeft}px; top: {menuTop - MENU_OFFSET}px"
+>
+  <slot />
+</span>
+
+<svelte:window on:resize={handleResize} />
+
 <style lang="scss">
   span {
     display: inline-block;
@@ -152,40 +189,3 @@
     }
   }
 </style>
-
-{#if active}
-  <span class="shim" on:click={hide} />
-{/if}
-<span class="wrapper" class:table class:active>
-  <span
-    class="titlebg"
-    class:active
-    class:bordered={bordered && !active}
-    bind:this={titleBg}
-    on:click={() => {
-      if (bordered) {
-        revealOrHide();
-      } else {
-        hide();
-      }
-    }}
-    style="width: {titleWidth + horizPadding * 2}px; left: {-horizPadding}px;
-    top: {-vertPadding}px; bottom: {-vertPadding}px"
-  />
-  <span class:table bind:this={title} on:click={revealOrHide}>
-    <slot name="title" />
-  </span>
-</span>
-
-<span
-  class="menubg"
-  class:active
-  class:fixed
-  on:click={hide}
-  bind:this={menu}
-  style="left: {menuLeft}px; top: {menuTop - MENU_OFFSET}px"
->
-  <slot />
-</span>
-
-<svelte:window on:resize={handleResize} />
diff --git a/src/common/Dropdown2.svelte b/src/common/Dropdown2.svelte
index cd04e8fd3..c6ae14619 100644
--- a/src/common/Dropdown2.svelte
+++ b/src/common/Dropdown2.svelte
@@ -92,6 +92,37 @@
   });
 </script>
 
+<!-- Optional window overlay -->
+{#if overlay && isOpen}
+  <div class="overlay" />
+{/if}
+<!-- Element to Trigger Dropdown -->
+<div class="dropdownContainer" class:open={isOpen} {id}>
+  <div
+    bind:this={title}
+    class={`title ${titleColor}`}
+    class:open={isOpen}
+    class:border
+    on:click={toggleOnTitleEvent}
+    on:keydown={toggleOnTitleEvent}
+  >
+    <slot name="title" />
+  </div>
+  <!-- Dropdown with contents -->
+  <div
+    bind:this={dropdown}
+    class="dropdown"
+    class:open={isOpen}
+    class:top={position.includes("top")}
+    class:bottom={position.includes("bottom")}
+    class:left={position.includes("left")}
+    class:right={position.includes("right")}
+    class:center={position.includes("center")}
+  >
+    <slot />
+  </div>
+</div>
+
 <style>
   .dropdownContainer {
     position: relative;
@@ -162,34 +193,3 @@
     background: rgba(0, 0, 0, 0.1);
   }
 </style>
-
-<!-- Optional window overlay -->
-{#if overlay && isOpen}
-  <div class="overlay" />
-{/if}
-<!-- Element to Trigger Dropdown -->
-<div class="dropdownContainer" class:open={isOpen} {id}>
-  <div
-    bind:this={title}
-    class={`title ${titleColor}`}
-    class:open={isOpen}
-    class:border
-    on:click={toggleOnTitleEvent}
-    on:keydown={toggleOnTitleEvent}
-  >
-    <slot name="title" />
-  </div>
-  <!-- Dropdown with contents -->
-  <div
-    bind:this={dropdown}
-    class="dropdown"
-    class:open={isOpen}
-    class:top={position.includes("top")}
-    class:bottom={position.includes("bottom")}
-    class:left={position.includes("left")}
-    class:right={position.includes("right")}
-    class:center={position.includes("center")}
-  >
-    <slot />
-  </div>
-</div>
diff --git a/src/common/ErrorData.svelte b/src/common/ErrorData.svelte
index bae71adbe..e2f1f3484 100644
--- a/src/common/ErrorData.svelte
+++ b/src/common/ErrorData.svelte
@@ -30,37 +30,6 @@
   }
 </script>
 
-<style lang="scss">
-  .errorcontainer {
-    margin: 15px 0;
-    border-radius: $radius;
-    background: rgba($caution, 0.04);
-    box-shadow: 0 0 2px rgba(0, 0, 0, 0.12);
-    padding: 8px 13px;
-
-    ul {
-      margin: 5px 0;
-      padding: 0 18px;
-    }
-
-    .reason {
-      color: $gray;
-      font-weight: bold;
-      font-size: 12px;
-      text-transform: uppercase;
-    }
-
-    .error {
-      color: $caution;
-      font-size: 14px;
-      :global(a) {
-        color: revert;
-        text-decoration: revert;
-      }
-    }
-  }
-</style>
-
 <div>
   <div class="mcontent">
     <h1>
@@ -99,3 +68,34 @@
     </div>
   </div>
 </div>
+
+<style lang="scss">
+  .errorcontainer {
+    margin: 15px 0;
+    border-radius: $radius;
+    background: rgba($caution, 0.04);
+    box-shadow: 0 0 2px rgba(0, 0, 0, 0.12);
+    padding: 8px 13px;
+
+    ul {
+      margin: 5px 0;
+      padding: 0 18px;
+    }
+
+    .reason {
+      color: $gray;
+      font-weight: bold;
+      font-size: 12px;
+      text-transform: uppercase;
+    }
+
+    .error {
+      color: $caution;
+      font-size: 14px;
+      :global(a) {
+        color: revert;
+        text-decoration: revert;
+      }
+    }
+  }
+</style>
diff --git a/src/common/FilePicker.svelte b/src/common/FilePicker.svelte
index 510b6d6b9..11231b2ae 100644
--- a/src/common/FilePicker.svelte
+++ b/src/common/FilePicker.svelte
@@ -33,6 +33,20 @@
   }
 </script>
 
+<span class="container">
+  <span class="content" on:click={trigger}>
+    <slot />
+  </span>
+  <input
+    multiple={multiselect}
+    bind:this={picker}
+    class="picker"
+    type="file"
+    on:change={handleFiles}
+    accept={documentTypes}
+  />
+</span>
+
 <style lang="scss">
   .container {
     display: inline-block;
@@ -47,17 +61,3 @@
     display: inline-block;
   }
 </style>
-
-<span class="container">
-  <span class="content" on:click={trigger}>
-    <slot />
-  </span>
-  <input
-    multiple={multiselect}
-    bind:this={picker}
-    class="picker"
-    type="file"
-    on:change={handleFiles}
-    accept={documentTypes}
-  />
-</span>
diff --git a/src/common/Hamburger.svelte b/src/common/Hamburger.svelte
index b5db03cc4..8acb57885 100644
--- a/src/common/Hamburger.svelte
+++ b/src/common/Hamburger.svelte
@@ -5,6 +5,12 @@
   const dispatch = createEventDispatcher();
 </script>
 
+<div class="hamburger">
+  <button class="svg buttonLike" on:click={(e) => dispatch("toggle")}>
+    <ThreeBars16 />
+  </button>
+</div>
+
 <style>
   .hamburger {
     user-select: none;
@@ -29,9 +35,3 @@
     }
   }
 </style>
-
-<div class="hamburger">
-  <button class="svg buttonLike" on:click={(e) => dispatch("toggle")}>
-    <ThreeBars16 />
-  </button>
-</div>
diff --git a/src/common/HtmlEditor.svelte b/src/common/HtmlEditor.svelte
index 989141c5e..48c29241f 100644
--- a/src/common/HtmlEditor.svelte
+++ b/src/common/HtmlEditor.svelte
@@ -10,6 +10,19 @@
   export let maxlength = null;
 </script>
 
+<div class="sidebyside">
+  <textarea {placeholder} use:textAreaResize bind:value {maxlength} />
+  {#if $domPurify.domPurify !== null && typeof $domPurify.domPurify.sanitize === "function" && value.trim().length > 0}
+    <div class="preview">
+      <div class="title">{$_("htmlEditor.preview")}</div>
+      <!-- Show a preview if possible -->
+      <div class="content">
+        {@html $domPurify.domPurify.sanitize(value)}
+      </div>
+    </div>
+  {/if}
+</div>
+
 <style lang="scss">
   $subpadding: 8px;
 
@@ -45,7 +58,10 @@
 
     .content {
       margin: 4px $subpadding;
-      font: 13px/18px Georgia, Times, serif;
+      font:
+        13px/18px Georgia,
+        Times,
+        serif;
       cursor: text;
       color: #3c3c3c;
       overflow-wrap: break-word;
@@ -58,16 +74,3 @@
     }
   }
 </style>
-
-<div class="sidebyside">
-  <textarea {placeholder} use:textAreaResize bind:value {maxlength} />
-  {#if $domPurify.domPurify !== null && typeof $domPurify.domPurify.sanitize === "function" && value.trim().length > 0}
-    <div class="preview">
-      <div class="title">{$_("htmlEditor.preview")}</div>
-      <!-- Show a preview if possible -->
-      <div class="content">
-        {@html $domPurify.domPurify.sanitize(value)}
-      </div>
-    </div>
-  {/if}
-</div>
diff --git a/src/common/HtmlField.svelte b/src/common/HtmlField.svelte
index 1dfb66343..960572aeb 100644
--- a/src/common/HtmlField.svelte
+++ b/src/common/HtmlField.svelte
@@ -46,6 +46,14 @@
   }
 </script>
 
+<div class="preview static">
+  <div class="content" bind:this={elem}>
+    {#if $domPurify.domPurify !== null && typeof $domPurify.domPurify.sanitize === "function"}
+      {@html $domPurify.domPurify.sanitize(content)}
+    {/if}
+  </div>
+</div>
+
 <style lang="scss">
   $subpadding: 8px;
 
@@ -54,7 +62,10 @@
 
     .content {
       margin: 4px $subpadding;
-      font: 13px/18px Georgia, Times, serif;
+      font:
+        13px/18px Georgia,
+        Times,
+        serif;
       cursor: text;
       color: #3c3c3c;
       max-height: 300px;
@@ -71,11 +82,3 @@
     }
   }
 </style>
-
-<div class="preview static">
-  <div class="content" bind:this={elem}>
-    {#if $domPurify.domPurify !== null && typeof $domPurify.domPurify.sanitize === "function"}
-      {@html $domPurify.domPurify.sanitize(content)}
-    {/if}
-  </div>
-</div>
diff --git a/src/common/Image.svelte b/src/common/Image.svelte
index fc690ad5d..6b5aafe64 100644
--- a/src/common/Image.svelte
+++ b/src/common/Image.svelte
@@ -148,6 +148,50 @@
   });
 </script>
 
+<span
+  class:aspect={aspect != null}
+  class:crosshair
+  class:clickable
+  class:nomove={$layout.nomove}
+  style={(aspect != null ? `padding-top: ${100 * aspect}%;` : "") +
+    (width != null ? `width: ${width}px;` : "") +
+    (height != null ? `height: ${height}px;` : "")}
+  on:mousedown={handleMouseDown}
+  on:touchstart={handleMouseDown}
+  on:click
+>
+  {#if delay == null || ready}
+    <img
+      on:load={handleLoad}
+      class:fade
+      class:show
+      style={(width != null ? `width: ${width}px;` : "") +
+        (height != null ? `height: ${height}px;` : "")}
+      on:error={handleError}
+      bind:this={img}
+      src={computedSrc}
+      {alt}
+      draggable="false"
+    />
+  {/if}
+  {#if showLoading && (!show || makeNull)}
+    <div class="loading">
+      {#if makeNull}
+        {$_("image.error")}
+      {:else}
+        {$_("common.loading")}
+      {/if}
+    </div>
+  {/if}
+</span>
+
+<svelte:window
+  on:mouseup={handleMouseUp}
+  on:touchend={handleMouseUp}
+  on:mousemove={handleMouseMove}
+  on:touchmove={handleMouseMove}
+/>
+
 <style lang="scss">
   span {
     display: inline-block;
@@ -192,7 +236,9 @@
     &.fade {
       opacity: 0;
       filter: blur(3px);
-      transition: opacity 1s ease, filter 0.5s ease;
+      transition:
+        opacity 1s ease,
+        filter 0.5s ease;
     }
 
     &.show {
@@ -212,47 +258,3 @@
     color: gray;
   }
 </style>
-
-<span
-  class:aspect={aspect != null}
-  class:crosshair
-  class:clickable
-  class:nomove={$layout.nomove}
-  style={(aspect != null ? `padding-top: ${100 * aspect}%;` : "") +
-    (width != null ? `width: ${width}px;` : "") +
-    (height != null ? `height: ${height}px;` : "")}
-  on:mousedown={handleMouseDown}
-  on:touchstart={handleMouseDown}
-  on:click
->
-  {#if delay == null || ready}
-    <img
-      on:load={handleLoad}
-      class:fade
-      class:show
-      style={(width != null ? `width: ${width}px;` : "") +
-        (height != null ? `height: ${height}px;` : "")}
-      on:error={handleError}
-      bind:this={img}
-      src={computedSrc}
-      {alt}
-      draggable="false"
-    />
-  {/if}
-  {#if showLoading && (!show || makeNull)}
-    <div class="loading">
-      {#if makeNull}
-        {$_("image.error")}
-      {:else}
-        {$_("common.loading")}
-      {/if}
-    </div>
-  {/if}
-</span>
-
-<svelte:window
-  on:mouseup={handleMouseUp}
-  on:touchend={handleMouseUp}
-  on:mousemove={handleMouseMove}
-  on:touchmove={handleMouseMove}
-/>
diff --git a/src/common/Loader.svelte b/src/common/Loader.svelte
index 063f85f3d..58341cf19 100644
--- a/src/common/Loader.svelte
+++ b/src/common/Loader.svelte
@@ -7,6 +7,17 @@
   export let pad = false;
 </script>
 
+<div class:loader={active} class:inline class:pad>
+  {#if active}
+    <div class="shim">
+      <div class="spinner" class:center class:big />
+    </div>
+  {/if}
+  <div class="contents" class:transparent>
+    <slot />
+  </div>
+</div>
+
 <style>
   div {
     --smallBordersize: 4px;
@@ -64,7 +75,8 @@
     box-sizing: border-radius;
     width: var(--smallSpinsize, 10px);
     height: var(--smallSpinsize, 10px);
-    animation: spin 1.5s cubic-bezier(0.65, 0.175, 0.355, 0.835) infinite,
+    animation:
+      spin 1.5s cubic-bezier(0.65, 0.175, 0.355, 0.835) infinite,
       opaquify 1s ease;
     z-index: var(--spinnerZ, 8);
     opacity: 0;
@@ -76,7 +88,8 @@
       var(--gray, rgba(0, 0, 0, 0.53));
     width: var(--bigSpinsize, 17px);
     height: var(--bigSpinsize, 17px);
-    animation: spin 1.5s cubic-bezier(0.25, 0.175, 0.355, 0.57) infinite,
+    animation:
+      spin 1.5s cubic-bezier(0.25, 0.175, 0.355, 0.57) infinite,
       opaquify 1s ease;
   }
 
@@ -116,14 +129,3 @@
     }
   }
 </style>
-
-<div class:loader={active} class:inline class:pad>
-  {#if active}
-    <div class="shim">
-      <div class="spinner" class:center class:big />
-    </div>
-  {/if}
-  <div class="contents" class:transparent>
-    <slot />
-  </div>
-</div>
diff --git a/src/common/Logo.svelte b/src/common/Logo.svelte
index d32ed01b7..91461a80f 100644
--- a/src/common/Logo.svelte
+++ b/src/common/Logo.svelte
@@ -14,10 +14,21 @@
   $: toUrl = homeLink
     ? getPath("default")
     : $orgsAndUsers.me != null
-    ? userUrl($orgsAndUsers.me)
-    : getPath("app");
+      ? userUrl($orgsAndUsers.me)
+      : getPath("app");
 </script>
 
+{#if $orgsAndUsers.me !== null}
+  <!-- TODO: some bug that requires this redundant if block -->
+  <Link {newPage} inlineBlock={true} {toUrl}>
+    <span class:nopadding>{@html dcLogo}</span>
+  </Link>
+{:else}
+  <Link {newPage} inlineBlock={true} {toUrl}>
+    <span class:nopadding>{@html dcLogo}</span>
+  </Link>
+{/if}
+
 <style>
   :global(.dclogo) {
     width: 166px;
@@ -42,14 +53,3 @@
     }
   }
 </style>
-
-{#if $orgsAndUsers.me !== null}
-  <!-- TODO: some bug that requires this redundant if block -->
-  <Link {newPage} inlineBlock={true} {toUrl}>
-    <span class:nopadding>{@html dcLogo}</span>
-  </Link>
-{:else}
-  <Link {newPage} inlineBlock={true} {toUrl}>
-    <span class:nopadding>{@html dcLogo}</span>
-  </Link>
-{/if}
diff --git a/src/common/Menu.svelte b/src/common/Menu.svelte
index 5e7c4b68d..8947bdd3f 100644
--- a/src/common/Menu.svelte
+++ b/src/common/Menu.svelte
@@ -1,3 +1,7 @@
+<div class="menu">
+  <slot>Define some menu items</slot>
+</div>
+
 <style lang="scss">
   .menu {
     @include menu;
@@ -13,7 +17,3 @@
     }
   }
 </style>
-
-<div class="menu">
-  <slot>Define some menu items</slot>
-</div>
diff --git a/src/common/MenuInsert.svelte b/src/common/MenuInsert.svelte
index 607319a7c..72e52cfd3 100644
--- a/src/common/MenuInsert.svelte
+++ b/src/common/MenuInsert.svelte
@@ -1,3 +1,7 @@
+<div class="menuInsert">
+  <slot />
+</div>
+
 <style>
   .menuInsert {
     display: flex;
@@ -10,7 +14,3 @@
     border-radius: var(--radius);
   }
 </style>
-
-<div class="menuInsert">
-  <slot />
-</div>
diff --git a/src/common/MenuItem.svelte b/src/common/MenuItem.svelte
index bb3125023..4cf55c870 100644
--- a/src/common/MenuItem.svelte
+++ b/src/common/MenuItem.svelte
@@ -15,6 +15,25 @@
   $: tag = href ? "a" : "button";
 </script>
 
+<svelte:element
+  this={tag}
+  {target}
+  {href}
+  class="item {className}"
+  class:selectable
+  class:selected
+  class:danger
+  class:primary
+  class:disabled
+  class:indent
+  class:special
+  on:click
+>
+  <slot name="icon" />
+  <span class="label"><slot>Define an item</slot></span>
+  {#if selected}<span class="scope">✓</span>{/if}
+</svelte:element>
+
 <style>
   button,
   a {
@@ -91,22 +110,3 @@
     fill: white;
   }
 </style>
-
-<svelte:element
-  this={tag}
-  {target}
-  {href}
-  class="item {className}"
-  class:selectable
-  class:selected
-  class:danger
-  class:primary
-  class:disabled
-  class:indent
-  class:special
-  on:click
->
-  <slot name="icon" />
-  <span class="label"><slot>Define an item</slot></span>
-  {#if selected}<span class="scope">✓</span>{/if}
-</svelte:element>
diff --git a/src/common/MenuTitle.svelte b/src/common/MenuTitle.svelte
index be9dd7d20..5a420aec0 100644
--- a/src/common/MenuTitle.svelte
+++ b/src/common/MenuTitle.svelte
@@ -2,6 +2,12 @@
   export let label: string;
 </script>
 
+<span class="title">
+  {#if $$slots.icon}<span class="icon"><slot name="icon" /></span>{/if}
+  <span class="label">{label}</span>
+  <span class="dropper">▼</span>
+</span>
+
 <style>
   .title {
     display: flex;
@@ -23,9 +29,3 @@
     opacity: 0.5;
   }
 </style>
-
-<span class="title">
-  {#if $$slots.icon}<span class="icon"><slot name="icon" /></span>{/if}
-  <span class="label">{label}</span>
-  <span class="dropper">▼</span>
-</span>
diff --git a/src/common/Modal.svelte b/src/common/Modal.svelte
index d71e6bac0..cffad79bd 100644
--- a/src/common/Modal.svelte
+++ b/src/common/Modal.svelte
@@ -43,6 +43,32 @@
   });
 </script>
 
+<svelte:window on:keydown={handleKeyDown} />
+
+<div class:fullscreen>
+  <div class="shim" on:click={dismiss} />
+  <div class="modalcontainer">
+    <div class="modalintermediate">
+      <div bind:this={modal} class="modal">
+        <div class="header">
+          {#if dismissable}
+            <button class="dismiss buttonLike" on:click={dismiss}>
+              <XCircle24 />
+            </button>
+          {/if}
+        </div>
+
+        <svelte:component
+          this={component}
+          {...properties}
+          on:setDismissable={setDismissable}
+          on:dismiss={dismiss}
+        />
+      </div>
+    </div>
+  </div>
+</div>
+
 <style lang="scss">
   .shim {
     background: #051d38b5;
@@ -164,29 +190,3 @@
     cursor: pointer;
   }
 </style>
-
-<svelte:window on:keydown={handleKeyDown} />
-
-<div class:fullscreen>
-  <div class="shim" on:click={dismiss} />
-  <div class="modalcontainer">
-    <div class="modalintermediate">
-      <div bind:this={modal} class="modal">
-        <div class="header">
-          {#if dismissable}
-            <button class="dismiss buttonLike" on:click={dismiss}>
-              <XCircle24 />
-            </button>
-          {/if}
-        </div>
-
-        <svelte:component
-          this={component}
-          {...properties}
-          on:setDismissable={setDismissable}
-          on:dismiss={dismiss}
-        />
-      </div>
-    </div>
-  </div>
-</div>
diff --git a/src/common/Pin.svelte b/src/common/Pin.svelte
index edaf5a635..a350d5d8d 100644
--- a/src/common/Pin.svelte
+++ b/src/common/Pin.svelte
@@ -8,14 +8,18 @@
   $: title = disabled
     ? "Pinning is disabled"
     : active
-    ? "Click to Unpin"
-    : "Click to Pin";
+      ? "Click to Unpin"
+      : "Click to Pin";
 
   $: cssVarStyles = `--padding:${size * 0.25}em; --border-radius:${
     size * 4
   }px;`;
 </script>
 
+<button class="pin" class:active class:disabled on:click style={cssVarStyles}>
+  <Pin {title} {size} />
+</button>
+
 <style>
   .pin {
     appearance: none;
@@ -28,7 +32,9 @@
     justify-content: center;
     fill: #ccc;
     cursor: pointer;
-    transition: background-color 0.1s linear, fill 0.1s linear;
+    transition:
+      background-color 0.1s linear,
+      fill 0.1s linear;
   }
 
   .pin:hover {
@@ -48,7 +54,3 @@
     background: transparent;
   }
 </style>
-
-<button class="pin" class:active class:disabled on:click style={cssVarStyles}>
-  <Pin {title} {size} />
-</button>
diff --git a/src/common/Progress.svelte b/src/common/Progress.svelte
index 6c7af2122..50801061b 100644
--- a/src/common/Progress.svelte
+++ b/src/common/Progress.svelte
@@ -61,6 +61,21 @@
   )}%`;
 </script>
 
+<div class="container">
+  {#if !isNull}
+    <div class="bar" class:initializing class:compact class:failure>
+      <div
+        class="inner"
+        class:complete
+        style="width: {$smoothProgress * 100}%"
+      />
+    </div>
+    {#if !compact}
+      <div class="text" class:failure>{progressPercent}</div>
+    {/if}
+  {/if}
+</div>
+
 <style lang="scss">
   .container {
     width: 100%;
@@ -146,18 +161,3 @@
     }
   }
 </style>
-
-<div class="container">
-  {#if !isNull}
-    <div class="bar" class:initializing class:compact class:failure>
-      <div
-        class="inner"
-        class:complete
-        style="width: {$smoothProgress * 100}%"
-      />
-    </div>
-    {#if !compact}
-      <div class="text" class:failure>{progressPercent}</div>
-    {/if}
-  {/if}
-</div>
diff --git a/src/common/ProgressiveImage.svelte b/src/common/ProgressiveImage.svelte
index c0e5b6c90..0f10b72c6 100644
--- a/src/common/ProgressiveImage.svelte
+++ b/src/common/ProgressiveImage.svelte
@@ -136,6 +136,14 @@
   });
 </script>
 
+<div
+  style="padding-top: {aspect * 100}%"
+  bind:this={elem}
+  class:bordered
+  class:grayed
+  class:crosshair
+/>
+
 <style lang="scss">
   div {
     position: relative;
@@ -173,11 +181,3 @@
     cursor: crosshair;
   }
 </style>
-
-<div
-  style="padding-top: {aspect * 100}%"
-  bind:this={elem}
-  class:bordered
-  class:grayed
-  class:crosshair
-/>
diff --git a/src/common/Select.svelte b/src/common/Select.svelte
index 9d2b0f577..3bd4f2873 100644
--- a/src/common/Select.svelte
+++ b/src/common/Select.svelte
@@ -30,20 +30,6 @@
   }
 </script>
 
-<style>
-  label {
-    font-weight: bold;
-  }
-
-  input,
-  input:focus,
-  input:focus-visible {
-    border: none;
-    border-bottom: solid 1px #333;
-    border-radius: 0;
-  }
-</style>
-
 <label>
   {label}
   <input
@@ -68,3 +54,17 @@
     {/each}
   </datalist>
 </label>
+
+<style>
+  label {
+    font-weight: bold;
+  }
+
+  input,
+  input:focus,
+  input:focus-visible {
+    border: none;
+    border-bottom: solid 1px #333;
+    border-radius: 0;
+  }
+</style>
diff --git a/src/common/ShareOptions.svelte b/src/common/ShareOptions.svelte
index 0aacf7957..4f9fc69c2 100644
--- a/src/common/ShareOptions.svelte
+++ b/src/common/ShareOptions.svelte
@@ -42,98 +42,6 @@
   }
 </script>
 
-<style lang="scss">
-  $detailWidth: 600px;
-  $detailPadding: 40px;
-
-  .row {
-    display: table;
-    width: 100%;
-
-    .column {
-      display: table-cell;
-      vertical-align: top;
-
-      &.detail {
-        width: $detailWidth + $detailPadding;
-        padding-right: $detailPadding;
-      }
-
-      &.showcase {
-        width: calc(100% - #{$detailWidth});
-      }
-    }
-  }
-
-  @media only screen and (max-width: $largeScreenBreak) {
-    .row {
-      display: block;
-
-      .column {
-        display: block;
-        width: inherit !important;
-        padding-right: 0 !important;
-      }
-    }
-  }
-
-  .shareoptions {
-    margin: 19px 0;
-
-    .shareoption {
-      @include buttonLike;
-
-      display: inline-block;
-      padding: 14px 14px;
-      border-radius: 3px;
-      text-align: center;
-      user-select: none;
-
-      &.selected {
-        background: #e1e1e1;
-        cursor: default;
-      }
-
-      &:hover {
-        background: #f4f4f4;
-
-        &.selected {
-          background: #e1e1e1;
-          opacity: 1;
-        }
-      }
-    }
-  }
-
-  textarea {
-    height: 120px;
-    max-width: 600px;
-  }
-
-  input {
-    width: 100%;
-    max-width: 600px;
-  }
-
-  .preview {
-    margin-bottom: 25px;
-  }
-
-  .buttonpadded {
-    margin-top: 12px !important;
-  }
-
-  .error {
-    color: $caution;
-    margin-bottom: 12px;
-    pointer-events: none;
-  }
-
-  a.link {
-    color: $primary;
-  }
-</style>
-
 <div class="shareoptions">
   <div
     class="shareoption"
@@ -241,3 +149,95 @@
     </div>
   {/if}
 {/if}
+
+<style lang="scss">
+  $detailWidth: 600px;
+  $detailPadding: 40px;
+
+  .row {
+    display: table;
+    width: 100%;
+
+    .column {
+      display: table-cell;
+      vertical-align: top;
+
+      &.detail {
+        width: $detailWidth + $detailPadding;
+        padding-right: $detailPadding;
+      }
+
+      &.showcase {
+        width: calc(100% - #{$detailWidth});
+      }
+    }
+  }
+
+  @media only screen and (max-width: $largeScreenBreak) {
+    .row {
+      display: block;
+
+      .column {
+        display: block;
+        width: inherit !important;
+        padding-right: 0 !important;
+      }
+    }
+  }
+
+  .shareoptions {
+    margin: 19px 0;
+
+    .shareoption {
+      @include buttonLike;
+
+      display: inline-block;
+      padding: 14px 14px;
+      border-radius: 3px;
+      text-align: center;
+      user-select: none;
+
+      &.selected {
+        background: #e1e1e1;
+        cursor: default;
+      }
+
+      &:hover {
+        background: #f4f4f4;
+
+        &.selected {
+          background: #e1e1e1;
+          opacity: 1;
+        }
+      }
+    }
+  }
+
+  textarea {
+    height: 120px;
+    max-width: 600px;
+  }
+
+  input {
+    width: 100%;
+    max-width: 600px;
+  }
+
+  .preview {
+    margin-bottom: 25px;
+  }
+
+  .buttonpadded {
+    margin-top: 12px !important;
+  }
+
+  .error {
+    color: $caution;
+    margin-bottom: 12px;
+    pointer-events: none;
+  }
+
+  a.link {
+    color: $primary;
+  }
+</style>
diff --git a/src/common/SpecialMessage.svelte b/src/common/SpecialMessage.svelte
index 1707f0661..877526721 100644
--- a/src/common/SpecialMessage.svelte
+++ b/src/common/SpecialMessage.svelte
@@ -29,6 +29,23 @@
   $: showContact = contact != null && contact.trim().length > 0;
 </script>
 
+{#if show}
+  <div class="container">
+    <div class="special">
+      {#await loading then content}
+        {@html content}
+      {:catch}
+        {version}
+        {#if showContact}
+          {@html $_("specialMessage.constactUs", {
+            values: { contact: contact },
+          })}
+        {/if}
+      {/await}
+    </div>
+  </div>
+{/if}
+
 <style>
   .container {
     padding: 10px 0;
@@ -52,20 +69,3 @@
     text-decoration: underline;
   }
 </style>
-
-{#if show}
-  <div class="container">
-    <div class="special">
-      {#await loading then content}
-        {@html content}
-      {:catch}
-        {version}
-        {#if showContact}
-          {@html $_("specialMessage.constactUs", {
-            values: { contact: contact },
-          })}
-        {/if}
-      {/await}
-    </div>
-  </div>
-{/if}
diff --git a/src/common/TextPage.svelte b/src/common/TextPage.svelte
index 28fac5cf4..913dbcf29 100644
--- a/src/common/TextPage.svelte
+++ b/src/common/TextPage.svelte
@@ -8,6 +8,16 @@
   $: regions = coalesceHighlights(text, highlights);
 </script>
 
+<div class="text">
+  {#each regions as region}
+    {#if region.type == "normal"}
+      <span>{region.text}</span>
+    {:else}
+      <span class="highlight">{region.text}</span>
+    {/if}
+  {/each}
+</div>
+
 <style lang="scss">
   .text {
     display: block;
@@ -32,13 +42,3 @@
     }
   }
 </style>
-
-<div class="text">
-  {#each regions as region}
-    {#if region.type == "normal"}
-      <span>{region.text}</span>
-    {:else}
-      <span class="highlight">{region.text}</span>
-    {/if}
-  {/each}
-</div>
diff --git a/src/common/Title.svelte b/src/common/Title.svelte
index c72a4e41d..2e59a9c29 100644
--- a/src/common/Title.svelte
+++ b/src/common/Title.svelte
@@ -4,6 +4,11 @@
   export let inline = false;
 </script>
 
+<!-- todo use a proper H tag -->
+<div class="primary" class:small class:inline>
+  <slot />
+</div>
+
 <style scoped>
   .primary {
     font-weight: 600;
@@ -22,8 +27,3 @@
     display: inline;
   }
 </style>
-
-<!-- todo use a proper H tag -->
-<div class="primary" class:small class:inline>
-  <slot />
-</div>
diff --git a/src/common/Toast.svelte b/src/common/Toast.svelte
index 6b1d4f8dd..ea36f5869 100644
--- a/src/common/Toast.svelte
+++ b/src/common/Toast.svelte
@@ -84,6 +84,16 @@
   });
 </script>
 
+<div
+  class={["toast", toast.status ?? "info"].join(" ")}
+  class:fading
+  on:mouseenter={cancel}
+  on:mouseleave={reset}
+>
+  <button class="close" on:click={close}><CloseIcon /></button>
+  <p class="content">{toast.content}</p>
+</div>
+
 <style lang="scss">
   .toast {
     padding: 5px 10px;
@@ -173,13 +183,3 @@
     user-select: none;
   }
 </style>
-
-<div
-  class={["toast", toast.status ?? "info"].join(" ")}
-  class:fading
-  on:mouseenter={cancel}
-  on:mouseleave={reset}
->
-  <button class="close" on:click={close}><CloseIcon /></button>
-  <p class="content">{toast.content}</p>
-</div>
diff --git a/src/common/Toasts.svelte b/src/common/Toasts.svelte
index 737cc7840..4ec24e5bb 100644
--- a/src/common/Toasts.svelte
+++ b/src/common/Toasts.svelte
@@ -2,6 +2,12 @@
   import Toast, { toasts } from "./Toast.svelte";
 </script>
 
+<div class="toastcontainer">
+  {#each $toasts as toast, i (toast.idx)}
+    <Toast {toast} {i} />
+  {/each}
+</div>
+
 <style>
   .toastcontainer {
     position: fixed;
@@ -13,9 +19,3 @@
     pointer-events: none;
   }
 </style>
-
-<div class="toastcontainer">
-  {#each $toasts as toast, i (toast.idx)}
-    <Toast {toast} {i} />
-  {/each}
-</div>
diff --git a/src/common/Tooltip.svelte b/src/common/Tooltip.svelte
index f1ec47fe0..566808a6a 100644
--- a/src/common/Tooltip.svelte
+++ b/src/common/Tooltip.svelte
@@ -65,6 +65,28 @@
   }
 </script>
 
+{#if show}
+  <span on:mouseenter={handleMouseOver} on:mouseleave={handleMouseOut}>
+    <div
+      bind:this={tooltip}
+      class="tooltip"
+      class:show={mouseIn && delayShow}
+      style="left: {$coords.x}px; top: {$coords.y}px;"
+    >
+      <slot name="caption">{caption}</slot>
+    </div>
+    <slot />
+  </span>
+{:else}
+  <slot />
+{/if}
+
+<svelte:window
+  on:mousemove={handleMouseMove}
+  on:scroll={handleMouseOut}
+  on:resize={handleMouseOut}
+/>
+
 <style lang="scss">
   span {
     display: inline-block;
@@ -91,25 +113,3 @@
     }
   }
 </style>
-
-{#if show}
-  <span on:mouseenter={handleMouseOver} on:mouseleave={handleMouseOut}>
-    <div
-      bind:this={tooltip}
-      class="tooltip"
-      class:show={mouseIn && delayShow}
-      style="left: {$coords.x}px; top: {$coords.y}px;"
-    >
-      <slot name="caption">{caption}</slot>
-    </div>
-    <slot />
-  </span>
-{:else}
-  <slot />
-{/if}
-
-<svelte:window
-  on:mousemove={handleMouseMove}
-  on:scroll={handleMouseOut}
-  on:resize={handleMouseOut}
-/>
diff --git a/src/common/UploadOptions.svelte b/src/common/UploadOptions.svelte
index f5d009ee0..1bd65e4b7 100644
--- a/src/common/UploadOptions.svelte
+++ b/src/common/UploadOptions.svelte
@@ -38,31 +38,6 @@
   }
 </script>
 
-<style>
-  .small {
-    font-size: smaller;
-  }
-  .middle {
-    display: inline-block;
-    vertical-align: middle;
-  }
-
-  label {
-    font-weight: bold;
-  }
-
-  p :global(a) {
-    font-weight: bold;
-    text-decoration: underline;
-  }
-
-  select {
-    border: none;
-    border-bottom: solid 1px #333;
-    border-radius: 0;
-  }
-</style>
-
 <div class="option">
   <Select
     name="document-language"
@@ -111,3 +86,28 @@
     {/if}
   </div>
 </div>
+
+<style>
+  .small {
+    font-size: smaller;
+  }
+  .middle {
+    display: inline-block;
+    vertical-align: middle;
+  }
+
+  label {
+    font-weight: bold;
+  }
+
+  p :global(a) {
+    font-weight: bold;
+    text-decoration: underline;
+  }
+
+  select {
+    border: none;
+    border-bottom: solid 1px #333;
+    border-radius: 0;
+  }
+</style>
diff --git a/src/common/VariableChunk.svelte b/src/common/VariableChunk.svelte
index da89031f3..c52728ca0 100644
--- a/src/common/VariableChunk.svelte
+++ b/src/common/VariableChunk.svelte
@@ -24,13 +24,13 @@
   });
 </script>
 
+<div bind:this={elem}>
+  <slot {update} />
+</div>
+
 <style lang="scss">
   div {
     font-size: 12px;
     position: relative;
   }
 </style>
-
-<div bind:this={elem}>
-  <slot {update} />
-</div>
diff --git a/src/common/dialog/AccessDialog.svelte b/src/common/dialog/AccessDialog.svelte
index dd1668bd2..8ff5575a5 100644
--- a/src/common/dialog/AccessDialog.svelte
+++ b/src/common/dialog/AccessDialog.svelte
@@ -114,106 +114,6 @@
   }
 </script>
 
-<style lang="scss">
-  label {
-    display: table;
-    margin: 12px 0;
-  }
-
-  .normal-label {
-    display: initial;
-    margin-left: 8px;
-  }
-
-  input {
-    display: table-cell;
-  }
-
-  p {
-    margin: 0 0 10px 0;
-  }
-
-  .accessoption {
-    display: table-cell;
-    padding-left: 10px;
-  }
-
-  h3 {
-    font-size: 16px;
-    margin: 0;
-  }
-
-  small {
-    margin: 5px 0;
-  }
-
-  .scheduler {
-    margin-top: 24px;
-
-    .scheduleaction {
-      @include buttonLike;
-      font-size: 14px;
-      font-weight: bold;
-
-      input,
-      label {
-        cursor: pointer;
-      }
-
-      .icon {
-        display: inline-block;
-        vertical-align: middle;
-
-        :global(svg) {
-          height: 21px;
-        }
-      }
-    }
-  }
-
-  .faded {
-    opacity: 0.3;
-    pointer-events: none;
-  }
-
-  .callout {
-    border: solid 2px $primary;
-    background: $menuBg;
-    border-radius: 5px;
-    padding: 4px 8px;
-    font-size: 13px;
-    margin-left: 28px;
-    position: relative;
-    margin-bottom: 16px;
-
-    :global(a) {
-      color: $primary;
-    }
-
-    .i {
-      position: absolute;
-      top: 0;
-      left: 0;
-      padding: 6px 4px;
-
-      :global(svg) {
-        width: 15px;
-        height: 15px;
-      }
-    }
-
-    .content {
-      padding-left: 14px;
-      display: inline-block;
-    }
-  }
-
-  .noindex-block h3 {
-    display: inline-block;
-    margin-bottom: 10px;
-  }
-</style>
-
 <div>
   <div class="mcontent">
     <h1>
@@ -317,8 +217,8 @@
         disabledReason={valid
           ? null
           : validPublishAt
-          ? $_("dialogAccessDialog.unchanged")
-          : $_("dialogAccessDialog.future")}
+            ? $_("dialogAccessDialog.unchanged")
+            : $_("dialogAccessDialog.future")}
         on:click={() => accessChange(access, publishAt, noindex)}
       >
         {$_("dialogAccessDialog.change")}
@@ -329,3 +229,103 @@
     </div>
   </div>
 </div>
+
+<style lang="scss">
+  label {
+    display: table;
+    margin: 12px 0;
+  }
+
+  .normal-label {
+    display: initial;
+    margin-left: 8px;
+  }
+
+  input {
+    display: table-cell;
+  }
+
+  p {
+    margin: 0 0 10px 0;
+  }
+
+  .accessoption {
+    display: table-cell;
+    padding-left: 10px;
+  }
+
+  h3 {
+    font-size: 16px;
+    margin: 0;
+  }
+
+  small {
+    margin: 5px 0;
+  }
+
+  .scheduler {
+    margin-top: 24px;
+
+    .scheduleaction {
+      @include buttonLike;
+      font-size: 14px;
+      font-weight: bold;
+
+      input,
+      label {
+        cursor: pointer;
+      }
+
+      .icon {
+        display: inline-block;
+        vertical-align: middle;
+
+        :global(svg) {
+          height: 21px;
+        }
+      }
+    }
+  }
+
+  .faded {
+    opacity: 0.3;
+    pointer-events: none;
+  }
+
+  .callout {
+    border: solid 2px $primary;
+    background: $menuBg;
+    border-radius: 5px;
+    padding: 4px 8px;
+    font-size: 13px;
+    margin-left: 28px;
+    position: relative;
+    margin-bottom: 16px;
+
+    :global(a) {
+      color: $primary;
+    }
+
+    .i {
+      position: absolute;
+      top: 0;
+      left: 0;
+      padding: 6px 4px;
+
+      :global(svg) {
+        width: 15px;
+        height: 15px;
+      }
+    }
+
+    .content {
+      padding-left: 14px;
+      display: inline-block;
+    }
+  }
+
+  .noindex-block h3 {
+    display: inline-block;
+    margin-bottom: 10px;
+  }
+</style>
diff --git a/src/common/dialog/CollaboratorDialog.svelte b/src/common/dialog/CollaboratorDialog.svelte
index fc8a45b95..a93991045 100644
--- a/src/common/dialog/CollaboratorDialog.svelte
+++ b/src/common/dialog/CollaboratorDialog.svelte
@@ -73,78 +73,6 @@
       .length == 1;
 </script>
 
-<style lang="scss">
-  .collaborator {
-    display: table;
-    width: 100%;
-
-    > * {
-      display: table-cell;
-      vertical-align: middle;
-      height: 50px;
-    }
-
-    .name {
-      input {
-        width: 100%;
-        box-sizing: border-box;
-      }
-    }
-
-    .dropdown {
-      padding: 0 15px 0 33px;
-      width: 80px;
-    }
-
-    .button {
-      width: 75px;
-      text-align: center;
-    }
-  }
-
-  .buttonpadded {
-    margin-top: 50px;
-  }
-
-  .fyi {
-    background: $fyi;
-    padding: 1em;
-    border-radius: 10px;
-    color: $modal;
-    line-height: 1.3;
-    font-size: 14px;
-  }
-
-  .managetable {
-    display: table;
-    width: 100%;
-
-    .row {
-      display: table-row;
-
-      > * {
-        display: table-cell;
-        vertical-align: middle;
-
-        .pencil {
-          @include buttonLike;
-          vertical-align: middle;
-        }
-      }
-
-      &.header {
-        > * {
-          font-weight: bold;
-          font-size: 12px;
-          text-transform: uppercase;
-          color: $gray;
-          padding: 3px 0 6px 0;
-        }
-      }
-    }
-  }
-</style>
-
 <Loader active={$loading}>
   <div>
     <div class="mcontent">
@@ -261,3 +189,75 @@
     </div>
   </div>
 </Loader>
+
+<style lang="scss">
+  .collaborator {
+    display: table;
+    width: 100%;
+
+    > * {
+      display: table-cell;
+      vertical-align: middle;
+      height: 50px;
+    }
+
+    .name {
+      input {
+        width: 100%;
+        box-sizing: border-box;
+      }
+    }
+
+    .dropdown {
+      padding: 0 15px 0 33px;
+      width: 80px;
+    }
+
+    .button {
+      width: 75px;
+      text-align: center;
+    }
+  }
+
+  .buttonpadded {
+    margin-top: 50px;
+  }
+
+  .fyi {
+    background: $fyi;
+    padding: 1em;
+    border-radius: 10px;
+    color: $modal;
+    line-height: 1.3;
+    font-size: 14px;
+  }
+
+  .managetable {
+    display: table;
+    width: 100%;
+
+    .row {
+      display: table-row;
+
+      > * {
+        display: table-cell;
+        vertical-align: middle;
+
+        .pencil {
+          @include buttonLike;
+          vertical-align: middle;
+        }
+      }
+
+      &.header {
+        > * {
+          font-weight: bold;
+          font-size: 12px;
+          text-transform: uppercase;
+          color: $gray;
+          padding: 3px 0 6px 0;
+        }
+      }
+    }
+  }
+</style>
diff --git a/src/common/dialog/DataDialog.svelte b/src/common/dialog/DataDialog.svelte
index 0b97ad484..5f7471a16 100644
--- a/src/common/dialog/DataDialog.svelte
+++ b/src/common/dialog/DataDialog.svelte
@@ -181,69 +181,6 @@
   }
 </script>
 
-<style lang="scss">
-  .lpad {
-    margin-left: 5px;
-  }
-
-  .add {
-    > * {
-      display: inline-block;
-      vertical-align: middle;
-    }
-
-    .dropdown {
-      padding: 0 0 0 15px;
-      width: 122px;
-
-      .info {
-        p {
-          margin: 6px 7px 1px 7px;
-        }
-        em {
-          background: rgba(0, 0, 0, 0.04);
-          border-radius: $radius;
-          padding: 2px 5px;
-          box-shadow: 0 0 2px rgba(0, 0, 0, 0.22);
-        }
-      }
-    }
-  }
-
-  input:read-only {
-    background: rgba(0, 0, 0, 0.05);
-    pointer-events: none;
-  }
-
-  .fyi {
-    background: $fyi;
-    padding: 1em;
-    border-radius: 10px;
-    color: $modal;
-    line-height: 1.3;
-    font-size: 14px;
-  }
-
-  .row {
-    margin: 6px 0;
-
-    > * {
-      display: inline-block;
-      vertical-align: middle;
-    }
-
-    .pencil {
-      @include buttonLike;
-      margin: 0 12px 0 5px;
-    }
-  }
-
-  .faded {
-    opacity: 0.5;
-    pointer-events: none;
-  }
-</style>
-
 <Loader center={true} active={$loading}>
   <div>
     <div class="mcontent">
@@ -332,10 +269,10 @@
               disabledReason={inputValid
                 ? null
                 : keyValid
-                ? addTag
-                  ? $_("dialogDataDialog.enterTag")
-                  : $_("dialogDataDialog.enterKey")
-                : $_("dialogDataDialog.keyInvalid")}
+                  ? addTag
+                    ? $_("dialogDataDialog.enterTag")
+                    : $_("dialogDataDialog.enterKey")
+                  : $_("dialogDataDialog.keyInvalid")}
               on:click={handleAdd}
             >
               + Add
@@ -405,3 +342,66 @@
     </div>
   </div>
 </Loader>
+
+<style lang="scss">
+  .lpad {
+    margin-left: 5px;
+  }
+
+  .add {
+    > * {
+      display: inline-block;
+      vertical-align: middle;
+    }
+
+    .dropdown {
+      padding: 0 0 0 15px;
+      width: 122px;
+
+      .info {
+        p {
+          margin: 6px 7px 1px 7px;
+        }
+        em {
+          background: rgba(0, 0, 0, 0.04);
+          border-radius: $radius;
+          padding: 2px 5px;
+          box-shadow: 0 0 2px rgba(0, 0, 0, 0.22);
+        }
+      }
+    }
+  }
+
+  input:read-only {
+    background: rgba(0, 0, 0, 0.05);
+    pointer-events: none;
+  }
+
+  .fyi {
+    background: $fyi;
+    padding: 1em;
+    border-radius: 10px;
+    color: $modal;
+    line-height: 1.3;
+    font-size: 14px;
+  }
+
+  .row {
+    margin: 6px 0;
+
+    > * {
+      display: inline-block;
+      vertical-align: middle;
+    }
+
+    .pencil {
+      @include buttonLike;
+      margin: 0 12px 0 5px;
+    }
+  }
+
+  .faded {
+    opacity: 0.5;
+    pointer-events: none;
+  }
+</style>
diff --git a/src/common/dialog/DiagnosticDialog.svelte b/src/common/dialog/DiagnosticDialog.svelte
index 39b430dcf..2236f65cb 100644
--- a/src/common/dialog/DiagnosticDialog.svelte
+++ b/src/common/dialog/DiagnosticDialog.svelte
@@ -13,32 +13,6 @@
   $: documents = $layout.selected;
 </script>
 
-<style lang="scss">
-  $border: solid 1px gainsboro;
-  table {
-    border-spacing: 0;
-
-    td,
-    th {
-      border: none;
-      border-right: $border;
-      border-bottom: $border;
-      padding: 5px;
-
-      &:first-child {
-        border-left: $border;
-      }
-    }
-
-    tr:first-child {
-      td,
-      th {
-        border-top: $border;
-      }
-    }
-  }
-</style>
-
 <div>
   <div class="mcontent">
     <h1>
@@ -93,3 +67,29 @@
     </div>
   </div>
 </div>
+
+<style lang="scss">
+  $border: solid 1px gainsboro;
+  table {
+    border-spacing: 0;
+
+    td,
+    th {
+      border: none;
+      border-right: $border;
+      border-bottom: $border;
+      padding: 5px;
+
+      &:first-child {
+        border-left: $border;
+      }
+    }
+
+    tr:first-child {
+      td,
+      th {
+        border-top: $border;
+      }
+    }
+  }
+</style>
diff --git a/src/common/dialog/DocumentEmbedDialog.svelte b/src/common/dialog/DocumentEmbedDialog.svelte
index 7e3d85823..4ec91bc26 100644
--- a/src/common/dialog/DocumentEmbedDialog.svelte
+++ b/src/common/dialog/DocumentEmbedDialog.svelte
@@ -170,20 +170,20 @@
     appearanceOptions[optionIndex(SIDEBAR_OPTION)].selected == 1
       ? 0
       : appearanceOptions[optionIndex(SIDEBAR_OPTION)].selected == 2
-      ? 1
-      : null;
+        ? 1
+        : null;
   $: width =
     appearanceOptions[optionIndex(WIDTH_OPTION)].selected == 0
       ? null
       : Number.isFinite(appearanceOptions[optionIndex(WIDTH_OPTION)].selected)
-      ? appearanceOptions[optionIndex(WIDTH_OPTION)].selected
-      : null;
+        ? appearanceOptions[optionIndex(WIDTH_OPTION)].selected
+        : null;
   $: height =
     appearanceOptions[optionIndex(HEIGHT_OPTION)].selected == 0
       ? null
       : Number.isFinite(appearanceOptions[optionIndex(HEIGHT_OPTION)].selected)
-      ? appearanceOptions[optionIndex(HEIGHT_OPTION)].selected
-      : null;
+        ? appearanceOptions[optionIndex(HEIGHT_OPTION)].selected
+        : null;
   $: responsive =
     appearanceOptions[optionIndex(RESPONSIVE_OPTION)].selected == 1 ? 0 : 1;
   $: titleBehavior =
diff --git a/src/common/dialog/DocumentInformationDialog.svelte b/src/common/dialog/DocumentInformationDialog.svelte
index 55a4c1c4c..21445f810 100644
--- a/src/common/dialog/DocumentInformationDialog.svelte
+++ b/src/common/dialog/DocumentInformationDialog.svelte
@@ -81,26 +81,6 @@
   }
 </script>
 
-<style>
-  input,
-  table {
-    position: border-box;
-    width: 100%;
-    font-size: 16px;
-    font-family: inherit;
-  }
-
-  td:first-child {
-    white-space: nowrap;
-    padding-right: 5px;
-  }
-
-  td:last-child {
-    width: 100%;
-    position: relative;
-  }
-</style>
-
 <div class="mcontent">
   <h2>
     {$_("dialogDocumentInformationDialog.editInformation", {
@@ -138,3 +118,23 @@
     >
   </div>
 </div>
+
+<style>
+  input,
+  table {
+    position: border-box;
+    width: 100%;
+    font-size: 16px;
+    font-family: inherit;
+  }
+
+  td:first-child {
+    white-space: nowrap;
+    padding-right: 5px;
+  }
+
+  td:last-child {
+    width: 100%;
+    position: relative;
+  }
+</style>
diff --git a/src/common/dialog/DocumentPickerDialog.svelte b/src/common/dialog/DocumentPickerDialog.svelte
index b2f66343c..039648ea1 100644
--- a/src/common/dialog/DocumentPickerDialog.svelte
+++ b/src/common/dialog/DocumentPickerDialog.svelte
@@ -13,12 +13,6 @@
   }
 </script>
 
-<style lang="scss">
-  .documents {
-    padding: 0 10px;
-  }
-</style>
-
 <div>
   <div class="mcontent">
     <div class="documents">
@@ -26,3 +20,9 @@
     </div>
   </div>
 </div>
+
+<style lang="scss">
+  .documents {
+    padding: 0 10px;
+  }
+</style>
diff --git a/src/common/dialog/EditSectionsDialog.svelte b/src/common/dialog/EditSectionsDialog.svelte
index c68462a62..922d46b3d 100644
--- a/src/common/dialog/EditSectionsDialog.svelte
+++ b/src/common/dialog/EditSectionsDialog.svelte
@@ -166,91 +166,6 @@
   $: titleValid = titleUpdateValid && titleTrimmed.length > 0;
 </script>
 
-<style lang="scss">
-  .toc {
-    border-top: solid 1px $gray;
-    border-bottom: solid 1px $gray;
-    padding: 15px 0;
-    margin: 15px 0 30px 0;
-
-    &.disabled {
-      pointer-events: none;
-
-      > * {
-        opacity: 0.3;
-      }
-    }
-
-    .empty {
-      color: $gray;
-      font-style: italic;
-    }
-
-    .section {
-      &.special {
-        opacity: 1;
-        background: rgba($annotationBorder, 0.3);
-      }
-
-      span {
-        vertical-align: middle;
-        display: inline-block;
-      }
-
-      .page {
-        font-weight: bold;
-        font-size: 12px;
-        padding-right: 5px;
-        color: $gray;
-      }
-
-      .edit {
-        margin-top: 5px;
-        margin-right: 10px;
-      }
-
-      .remove {
-        margin-top: 2px;
-        margin-right: 10px;
-      }
-
-      .edit,
-      .remove {
-        @include buttonLike;
-      }
-    }
-  }
-
-  .pendingsection {
-    p {
-      margin: 7px 0;
-      font-weight: bold;
-      font-size: 14px;
-      color: $modal;
-    }
-
-    .actions {
-      * {
-        display: inline-block;
-        vertical-align: middle;
-      }
-
-      input {
-        margin: 0 2px;
-      }
-
-      .pageinput {
-        max-width: 5ch;
-      }
-
-      .add,
-      .cancel {
-        margin-left: 5px;
-      }
-    }
-  }
-</style>
-
 <Loader center={true} active={$loading}>
   <div>
     <div class="mcontent">
@@ -317,11 +232,11 @@
                 ? titleValid
                   ? null
                   : titleUpdateValid
-                  ? $_("dialogEditSectionsDialog.missingTitle")
-                  : $_("dialogEditSectionsDialog.updateTitle")
+                    ? $_("dialogEditSectionsDialog.missingTitle")
+                    : $_("dialogEditSectionsDialog.updateTitle")
                 : pageCollided
-                ? $_("dialogEditSectionsDialog.uniquePageNumber")
-                : $_("dialogEditSectionsDialog.invalidPageNumber")}
+                  ? $_("dialogEditSectionsDialog.uniquePageNumber")
+                  : $_("dialogEditSectionsDialog.invalidPageNumber")}
               on:click={handleSectionAdd}
             >
               {#if update}
@@ -348,3 +263,88 @@
     </div>
   </div>
 </Loader>
+
+<style lang="scss">
+  .toc {
+    border-top: solid 1px $gray;
+    border-bottom: solid 1px $gray;
+    padding: 15px 0;
+    margin: 15px 0 30px 0;
+
+    &.disabled {
+      pointer-events: none;
+
+      > * {
+        opacity: 0.3;
+      }
+    }
+
+    .empty {
+      color: $gray;
+      font-style: italic;
+    }
+
+    .section {
+      &.special {
+        opacity: 1;
+        background: rgba($annotationBorder, 0.3);
+      }
+
+      span {
+        vertical-align: middle;
+        display: inline-block;
+      }
+
+      .page {
+        font-weight: bold;
+        font-size: 12px;
+        padding-right: 5px;
+        color: $gray;
+      }
+
+      .edit {
+        margin-top: 5px;
+        margin-right: 10px;
+      }
+
+      .remove {
+        margin-top: 2px;
+        margin-right: 10px;
+      }
+
+      .edit,
+      .remove {
+        @include buttonLike;
+      }
+    }
+  }
+
+  .pendingsection {
+    p {
+      margin: 7px 0;
+      font-weight: bold;
+      font-size: 14px;
+      color: $modal;
+    }
+
+    .actions {
+      * {
+        display: inline-block;
+        vertical-align: middle;
+      }
+
+      input {
+        margin: 0 2px;
+      }
+
+      .pageinput {
+        max-width: 5ch;
+      }
+
+      .add,
+      .cancel {
+        margin-left: 5px;
+      }
+    }
+  }
+</style>
diff --git a/src/common/dialog/EmbedDialog.svelte b/src/common/dialog/EmbedDialog.svelte
index 11266360a..4933aad3b 100644
--- a/src/common/dialog/EmbedDialog.svelte
+++ b/src/common/dialog/EmbedDialog.svelte
@@ -47,116 +47,6 @@
   }
 </script>
 
-<style lang="scss">
-  .warning {
-    padding: 15px 30px;
-    background: $warning;
-    border-radius: $radius;
-    display: table;
-    max-width: 700px;
-
-    &.readable {
-      background: $fyi;
-      box-shadow: 0 0 2px rgba(0, 0, 0, 0.24);
-      margin-bottom: 35px;
-    }
-
-    > * {
-      display: table-cell;
-      vertical-align: top;
-    }
-
-    .erroricon {
-      padding-top: 20px;
-      padding-right: 20px;
-    }
-  }
-
-  .shareoptions {
-    display: table;
-    margin: 25px 0 25px -10px;
-    $border: solid 2px gainsboro;
-    border-collapse: separate;
-    border-spacing: 10px 0;
-
-    @media only screen and (max-width: 720px) {
-      margin-left: -5px;
-      border-spacing: 5px 0;
-    }
-
-    .shareicon,
-    .sharedescription {
-      display: table-row;
-    }
-
-    .sharecell {
-      display: table-cell;
-      text-align: center;
-      padding: 0 20px;
-      cursor: pointer;
-      border-left: $border;
-      border-right: $border;
-
-      &.hover {
-        background: $viewerPaneColor;
-
-        &.faded {
-          background: inherit;
-        }
-      }
-
-      @media only screen and (max-width: 720px) {
-        padding: 0 7px;
-        text-align: left;
-
-        :global(svg) {
-          width: 80%;
-        }
-      }
-    }
-
-    .shareicon {
-      .sharecell {
-        vertical-align: middle;
-        padding-top: 15px;
-        border-top-left-radius: $radius;
-        border-top-right-radius: $radius;
-        border-top: $border;
-      }
-    }
-
-    .sharedescription {
-      .sharecell {
-        vertical-align: middle;
-        padding-bottom: 10px;
-        border-bottom-left-radius: $radius;
-        border-bottom-right-radius: $radius;
-        border-bottom: $border;
-      }
-
-      h2 {
-        font-size: 16px;
-        font-weight: 600;
-      }
-
-      p {
-        text-align: left;
-        font-size: 14px;
-        color: $gray;
-        max-width: 150px;
-      }
-    }
-  }
-
-  .faded {
-    pointer-events: none;
-
-    > :global(*) {
-      opacity: 0.2;
-    }
-  }
-</style>
-
 <Loader active={$loading}>
   <div>
     <div class="mcontent">
@@ -290,3 +180,113 @@
     </div>
   </div>
 </Loader>
+
+<style lang="scss">
+  .warning {
+    padding: 15px 30px;
+    background: $warning;
+    border-radius: $radius;
+    display: table;
+    max-width: 700px;
+
+    &.readable {
+      background: $fyi;
+      box-shadow: 0 0 2px rgba(0, 0, 0, 0.24);
+      margin-bottom: 35px;
+    }
+
+    > * {
+      display: table-cell;
+      vertical-align: top;
+    }
+
+    .erroricon {
+      padding-top: 20px;
+      padding-right: 20px;
+    }
+  }
+
+  .shareoptions {
+    display: table;
+    margin: 25px 0 25px -10px;
+    $border: solid 2px gainsboro;
+    border-collapse: separate;
+    border-spacing: 10px 0;
+
+    @media only screen and (max-width: 720px) {
+      margin-left: -5px;
+      border-spacing: 5px 0;
+    }
+
+    .shareicon,
+    .sharedescription {
+      display: table-row;
+    }
+
+    .sharecell {
+      display: table-cell;
+      text-align: center;
+      padding: 0 20px;
+      cursor: pointer;
+      border-left: $border;
+      border-right: $border;
+
+      &.hover {
+        background: $viewerPaneColor;
+
+        &.faded {
+          background: inherit;
+        }
+      }
+
+      @media only screen and (max-width: 720px) {
+        padding: 0 7px;
+        text-align: left;
+
+        :global(svg) {
+          width: 80%;
+        }
+      }
+    }
+
+    .shareicon {
+      .sharecell {
+        vertical-align: middle;
+        padding-top: 15px;
+        border-top-left-radius: $radius;
+        border-top-right-radius: $radius;
+        border-top: $border;
+      }
+    }
+
+    .sharedescription {
+      .sharecell {
+        vertical-align: middle;
+        padding-bottom: 10px;
+        border-bottom-left-radius: $radius;
+        border-bottom-right-radius: $radius;
+        border-bottom: $border;
+      }
+
+      h2 {
+        font-size: 16px;
+        font-weight: 600;
+      }
+
+      p {
+        text-align: left;
+        font-size: 14px;
+        color: $gray;
+        max-width: 150px;
+      }
+    }
+  }
+
+  .faded {
+    pointer-events: none;
+
+    > :global(*) {
+      opacity: 0.2;
+    }
+  }
+</style>
diff --git a/src/common/dialog/MetaFieldDialog.svelte b/src/common/dialog/MetaFieldDialog.svelte
index a195c823b..9fc14be3e 100644
--- a/src/common/dialog/MetaFieldDialog.svelte
+++ b/src/common/dialog/MetaFieldDialog.svelte
@@ -54,12 +54,6 @@
   });
 </script>
 
-<style lang="scss">
-  input {
-    width: 100%;
-  }
-</style>
-
 <div>
   <div class="mcontent">
     <h1>
@@ -103,3 +97,9 @@
     </div>
   </div>
 </div>
+
+<style lang="scss">
+  input {
+    width: 100%;
+  }
+</style>
diff --git a/src/common/dialog/OwnerDialog.svelte b/src/common/dialog/OwnerDialog.svelte
index ccb654538..700581955 100644
--- a/src/common/dialog/OwnerDialog.svelte
+++ b/src/common/dialog/OwnerDialog.svelte
@@ -29,8 +29,8 @@
     user == null
       ? $_("dialogOwnerDialog.selectUser")
       : organization == null
-      ? $_("dialogOwnerDialog.selectOrg")
-      : null;
+        ? $_("dialogOwnerDialog.selectOrg")
+        : null;
 
   $: isViewer = $viewer.document != null;
   $: numOwnerSelected = isViewer ? 1 : $layout.numOwnerSelected;
@@ -47,33 +47,6 @@
   }
 </script>
 
-<style lang="scss">
-  table {
-    position: border-box;
-    width: 100%;
-    font-size: 16px;
-    font-family: inherit;
-  }
-
-  td:first-child {
-    white-space: nowrap;
-    padding-right: 5px;
-  }
-
-  td:last-child {
-    width: 100%;
-    position: relative;
-  }
-
-  .warning {
-    padding: 15px 30px;
-    background: $warning;
-    border-radius: $radius;
-    display: table;
-    max-width: 700px;
-  }
-</style>
-
 <!-- Don't show until self orgs have populated -->
 <Loader active={$orgsAndUsers.selfOrgs == null}>
   <div>
@@ -128,3 +101,30 @@
     </div>
   </div>
 </Loader>
+
+<style lang="scss">
+  table {
+    position: border-box;
+    width: 100%;
+    font-size: 16px;
+    font-family: inherit;
+  }
+
+  td:first-child {
+    white-space: nowrap;
+    padding-right: 5px;
+  }
+
+  td:last-child {
+    width: 100%;
+    position: relative;
+  }
+
+  .warning {
+    padding: 15px 30px;
+    background: $warning;
+    border-radius: $radius;
+    display: table;
+    max-width: 700px;
+  }
+</style>
diff --git a/src/common/dialog/PageEmbedDialog.svelte b/src/common/dialog/PageEmbedDialog.svelte
index fb045a679..5983417eb 100644
--- a/src/common/dialog/PageEmbedDialog.svelte
+++ b/src/common/dialog/PageEmbedDialog.svelte
@@ -32,12 +32,6 @@
   }
 </script>
 
-<style lang="scss">
-  .another {
-    margin: 5px 0;
-  }
-</style>
-
 <h1>
   {$_("dialogPageEmbedDialog.embedPage", {
     values: { title: $layout.embedDocument.title },
@@ -74,3 +68,9 @@
   linkText={pageUrl}
   tweetText={`Page ${visiblePage} of ${$layout.embedDocument.title} ${pageUrl}`}
 />
+
+<style lang="scss">
+  .another {
+    margin: 5px 0;
+  }
+</style>
diff --git a/src/common/dialog/ProjectAccessDialog.svelte b/src/common/dialog/ProjectAccessDialog.svelte
index f36bd20b1..d9c19fc1a 100644
--- a/src/common/dialog/ProjectAccessDialog.svelte
+++ b/src/common/dialog/ProjectAccessDialog.svelte
@@ -34,35 +34,6 @@
   }
 </script>
 
-<style lang="scss">
-  label {
-    display: table;
-    margin: 12px 0;
-  }
-
-  input {
-    display: table-cell;
-  }
-
-  p {
-    margin: 0 0 10px 0;
-  }
-
-  .accessoption {
-    display: table-cell;
-    padding-left: 10px;
-  }
-
-  h3 {
-    font-size: 16px;
-    margin: 0;
-  }
-
-  small {
-    margin: 5px 0;
-  }
-</style>
-
 <Loader active={$loading}>
   <div>
     <div class="mcontent">
@@ -126,3 +97,32 @@
     </div>
   </div>
 </Loader>
+
+<style lang="scss">
+  label {
+    display: table;
+    margin: 12px 0;
+  }
+
+  input {
+    display: table-cell;
+  }
+
+  p {
+    margin: 0 0 10px 0;
+  }
+
+  .accessoption {
+    display: table-cell;
+    padding-left: 10px;
+  }
+
+  h3 {
+    font-size: 16px;
+    margin: 0;
+  }
+
+  small {
+    margin: 5px 0;
+  }
+</style>
diff --git a/src/common/dialog/ProjectDialog.svelte b/src/common/dialog/ProjectDialog.svelte
index ca1d62ea6..b7bf1096f 100644
--- a/src/common/dialog/ProjectDialog.svelte
+++ b/src/common/dialog/ProjectDialog.svelte
@@ -71,22 +71,6 @@
   onMount(() => input.focus());
 </script>
 
-<style lang="scss">
-  input {
-    outline: none;
-    width: 100%;
-    padding: 4px 7px;
-  }
-
-  textarea {
-    padding: 5px 7px;
-  }
-
-  p {
-    margin-bottom: 0;
-  }
-</style>
-
 <div>
   <Loader active={$loading}>
     <div class="mcontent">
@@ -128,8 +112,8 @@
           disabledReason={valid
             ? null
             : changed
-            ? $_("dialogProjectDialog.enterTitle")
-            : $_("dialogProjectDialog.changeTitle")}
+              ? $_("dialogProjectDialog.enterTitle")
+              : $_("dialogProjectDialog.changeTitle")}
           on:click={() => createOrUpdate()}
         >
           {#if editing}
@@ -150,3 +134,19 @@
     </div>
   </Loader>
 </div>
+
+<style lang="scss">
+  input {
+    outline: none;
+    width: 100%;
+    padding: 4px 7px;
+  }
+
+  textarea {
+    padding: 5px 7px;
+  }
+
+  p {
+    margin-bottom: 0;
+  }
+</style>
diff --git a/src/common/dialog/ProjectEmbedDialog.svelte b/src/common/dialog/ProjectEmbedDialog.svelte
index 07408189b..9e7cf8f6d 100644
--- a/src/common/dialog/ProjectEmbedDialog.svelte
+++ b/src/common/dialog/ProjectEmbedDialog.svelte
@@ -36,9 +36,6 @@
   }
 </script>
 
-<style lang="scss">
-</style>
-
 {#if project != null}
   <div>
     <div class="mcontent">
@@ -71,3 +68,6 @@
     </div>
   </div>
 {/if}
+
+<style lang="scss">
+</style>
diff --git a/src/common/dialog/ReprocessDialog.svelte b/src/common/dialog/ReprocessDialog.svelte
index 0112e75a6..012d7ff33 100644
--- a/src/common/dialog/ReprocessDialog.svelte
+++ b/src/common/dialog/ReprocessDialog.svelte
@@ -29,9 +29,6 @@
   }
 </script>
 
-<style lang="scss">
-</style>
-
 <!-- Don't show until self orgs have populated -->
 <Loader active={$orgsAndUsers.selfOrgs == null}>
   <div>
@@ -60,3 +57,6 @@
     </div>
   </div>
 </Loader>
+
+<style lang="scss">
+</style>
diff --git a/src/common/dialog/SearchTipsDialog.svelte b/src/common/dialog/SearchTipsDialog.svelte
index 796a8d840..3a9fa6590 100644
--- a/src/common/dialog/SearchTipsDialog.svelte
+++ b/src/common/dialog/SearchTipsDialog.svelte
@@ -153,6 +153,65 @@
   ];
 </script>
 
+<div>
+  <div class="mcontent">
+    <h1>Search Tips</h1>
+    <div class="padded">
+      <p>
+        The search bar is a flexible and powerful tool for searching your
+        documents, your organization’s documents, and public documents. The
+        default search view, “Your Documents,” includes a user filter to only
+        display your documents, but you can do a lot more.
+      </p>
+      <SearchExample
+        content={`${userExample} "mueller report" project:test-345  -pages:448`}
+      />
+      <p>
+        The above example, for instance, searches all documents within
+        {#if $orgsAndUsers.loggedIn}your account{:else}a user’s account{/if}
+        for a specific project that contain the exact text “mueller report” and don’t
+        have a page count of 448 (thus excluding the actual Mueller Report).
+        <Link color={true} toUrl="/help/search">Additional documentation</Link>
+      </p>
+      <p>
+        <b>Reference table:</b>
+      </p>
+
+      <table cellspacing="0">
+        {#each table as row}
+          {#if row.length == 1}
+            <tr>
+              <th colspan="2" class="header">
+                <div>{row[0]}</div>
+              </th>
+            </tr>
+            <tr>
+              <th>Description</th>
+              <th>Example Query</th>
+            </tr>
+          {:else}
+            <tr>
+              <td class="name">
+                <h4>
+                  {@html row[0]}
+                </h4>
+                <p>
+                  {@html row[1]}
+                </p>
+              </td>
+              <td class="filter">
+                {#each row.slice(2) as example}
+                  <SearchExample compact={true} content={example} />
+                {/each}
+              </td>
+            </tr>
+          {/if}
+        {/each}
+      </table>
+    </div>
+  </div>
+</div>
+
 <style lang="scss">
   .padded {
     margin-bottom: 35px;
@@ -222,62 +281,3 @@
     }
   }
 </style>
-
-<div>
-  <div class="mcontent">
-    <h1>Search Tips</h1>
-    <div class="padded">
-      <p>
-        The search bar is a flexible and powerful tool for searching your
-        documents, your organization’s documents, and public documents. The
-        default search view, “Your Documents,” includes a user filter to only
-        display your documents, but you can do a lot more.
-      </p>
-      <SearchExample
-        content={`${userExample} "mueller report" project:test-345  -pages:448`}
-      />
-      <p>
-        The above example, for instance, searches all documents within
-        {#if $orgsAndUsers.loggedIn}your account{:else}a user’s account{/if}
-        for a specific project that contain the exact text “mueller report” and don’t
-        have a page count of 448 (thus excluding the actual Mueller Report).
-        <Link color={true} toUrl="/help/search">Additional documentation</Link>
-      </p>
-      <p>
-        <b>Reference table:</b>
-      </p>
-
-      <table cellspacing="0">
-        {#each table as row}
-          {#if row.length == 1}
-            <tr>
-              <th colspan="2" class="header">
-                <div>{row[0]}</div>
-              </th>
-            </tr>
-            <tr>
-              <th>Description</th>
-              <th>Example Query</th>
-            </tr>
-          {:else}
-            <tr>
-              <td class="name">
-                <h4>
-                  {@html row[0]}
-                </h4>
-                <p>
-                  {@html row[1]}
-                </p>
-              </td>
-              <td class="filter">
-                {#each row.slice(2) as example}
-                  <SearchExample compact={true} content={example} />
-                {/each}
-              </td>
-            </tr>
-          {/if}
-        {/each}
-      </table>
-    </div>
-  </div>
-</div>
diff --git a/src/common/dialog/UploadEmailDialog.svelte b/src/common/dialog/UploadEmailDialog.svelte
index 9470d8c25..1979fd604 100644
--- a/src/common/dialog/UploadEmailDialog.svelte
+++ b/src/common/dialog/UploadEmailDialog.svelte
@@ -23,16 +23,6 @@
   }
 </script>
 
-<style lang="scss">
-  p :global(a) {
-    text-decoration: underline;
-    color: #5a76a0;
-    &:hover {
-      filter: brightness(85%);
-    }
-  }
-</style>
-
 <div>
   <div class="mcontent">
     <h1>{$_("uploadEmailDialog.uploadEmailAddress")}</h1>
@@ -55,3 +45,13 @@
     </div>
   </div>
 </div>
+
+<style lang="scss">
+  p :global(a) {
+    text-decoration: underline;
+    color: #5a76a0;
+    &:hover {
+      filter: brightness(85%);
+    }
+  }
+</style>
diff --git a/src/common/dialog/metaDialogs.js b/src/common/dialog/metaDialogs.js
index 9385a2377..1818d11d2 100644
--- a/src/common/dialog/metaDialogs.js
+++ b/src/common/dialog/metaDialogs.js
@@ -20,8 +20,8 @@ export const metaDialogs = [
       value == initial
         ? "metaFields.titleFieldInvalidSameName"
         : value.trim().length == 0
-        ? "metaFields.titleFieldInvalidEmptyName"
-        : "",
+          ? "metaFields.titleFieldInvalidEmptyName"
+          : "",
     disabled: (numSelected) => numSelected != 1,
   },
   {
diff --git a/src/common/icons/Credit.svelte b/src/common/icons/Credit.svelte
index c4c396b9e..130109d98 100644
--- a/src/common/icons/Credit.svelte
+++ b/src/common/icons/Credit.svelte
@@ -6,13 +6,6 @@
   export let color = "#24CC99";
 </script>
 
-<style>
-  svg {
-    display: block;
-    fill: var(--credit-color, --premium);
-  }
-</style>
-
 <svg
   width={`${size * REM}px`}
   height={`${size * REM}px`}
@@ -35,3 +28,10 @@
     />
   {/if}
 </svg>
+
+<style>
+  svg {
+    display: block;
+    fill: var(--credit-color, --premium);
+  }
+</style>
diff --git a/src/common/icons/Hashtag.svelte b/src/common/icons/Hashtag.svelte
index 7ee040f43..7c840cf30 100644
--- a/src/common/icons/Hashtag.svelte
+++ b/src/common/icons/Hashtag.svelte
@@ -4,12 +4,6 @@
   export let title = "Hashtag";
 </script>
 
-<style>
-  svg {
-    display: block;
-  }
-</style>
-
 <svg width={`${size * REM}px`} height={`${size * REM}px`} viewBox="0 0 16 16">
   <title>{title}</title>
   <path
@@ -17,3 +11,9 @@
     fill-rule="nonzero"
   />
 </svg>
+
+<style>
+  svg {
+    display: block;
+  }
+</style>
diff --git a/src/common/icons/Help.svelte b/src/common/icons/Help.svelte
index d772b323a..e300b9870 100644
--- a/src/common/icons/Help.svelte
+++ b/src/common/icons/Help.svelte
@@ -4,12 +4,6 @@
   export let title = "Help";
 </script>
 
-<style>
-  svg {
-    display: block;
-  }
-</style>
-
 <svg width={`${size * REM}px`} height={`${size * REM}px`} viewBox="0 0 16 16">
   <title>{title}</title>
   <path
@@ -18,3 +12,9 @@
     d="M8.00605 4.46714C8.40215 4.46231 8.71227 4.53203 8.8568 4.60235L6.83882 4.84007C7.17151 4.56586 7.58623 4.47292 8.00605 4.46714ZM9.77427 5.86792C9.77427 5.14493 9.23015 4.78528 8.8568 4.60235L6.83881 4.84008C6.53776 5.08824 6.38474 5.36262 6.30601 5.57072C6.2664 5.67542 6.24574 5.76315 6.23519 5.82127C6.22994 5.85023 6.22726 5.87145 6.22599 5.88328L6.22504 5.89339C6.21116 6.14854 5.99438 6.34555 5.73847 6.33439C5.48084 6.32314 5.28111 6.10519 5.29235 5.84756L5.75882 5.86792C5.29235 5.84756 5.29236 5.84735 5.29237 5.84713L5.29239 5.84667L5.29244 5.84571L5.29254 5.84356L5.29283 5.83839L5.29375 5.82462C5.29454 5.81395 5.29572 5.80031 5.29747 5.78394C5.30097 5.75122 5.30677 5.70743 5.31638 5.65451C5.33555 5.54887 5.37013 5.4054 5.4326 5.24028C5.55803 4.90874 5.79651 4.48907 6.24485 4.1195L6.24486 4.11949C6.80202 3.66026 7.45593 3.54074 7.99363 3.5334L7.99427 3.53339C8.47222 3.52752 8.9434 3.60568 9.26637 3.76313L9.26714 3.76351C9.69266 3.97192 10.7081 4.56477 10.7081 5.86792C10.7081 7.19467 9.82009 7.80522 9.06809 8.32227L9.05015 8.33461C8.7059 8.57134 8.52215 8.78347 8.42021 8.97297C8.31996 9.15933 8.28015 9.35833 8.28015 9.60322C8.28015 9.86109 8.07111 10.0701 7.81324 10.0701C7.55537 10.0701 7.34633 9.86109 7.34633 9.60322C7.34633 9.24953 7.4055 8.88811 7.59783 8.53058C7.78847 8.17618 8.0909 7.86094 8.52102 7.56516C9.31403 7.01983 9.77427 6.66299 9.77427 5.86792ZM8.56029 11.3773C8.56029 11.7899 8.22581 12.1243 7.81322 12.1243C7.40063 12.1243 7.06616 11.7899 7.06616 11.3773C7.06616 10.9647 7.40063 10.6302 7.81322 10.6302C8.22581 10.6302 8.56029 10.9647 8.56029 11.3773Z"
   />
 </svg>
+
+<style>
+  svg {
+    display: block;
+  }
+</style>
diff --git a/src/common/icons/Language.svelte b/src/common/icons/Language.svelte
index 9f6e47f14..704b55173 100644
--- a/src/common/icons/Language.svelte
+++ b/src/common/icons/Language.svelte
@@ -4,14 +4,6 @@
   export let title = "Language";
 </script>
 
-<style>
-  svg {
-    display: block;
-    stroke: var(--darkgray);
-    fill: none;
-  }
-</style>
-
 <svg width={`${size * REM}px`} height={`${size * REM}px`} viewBox="0 0 16 16">
   <title>{title}</title>
   <path
@@ -22,3 +14,11 @@
     stroke-linejoin="round"
   />
 </svg>
+
+<style>
+  svg {
+    display: block;
+    stroke: var(--darkgray);
+    fill: none;
+  }
+</style>
diff --git a/src/common/icons/Pin.svelte b/src/common/icons/Pin.svelte
index a6bb67de6..28e3f06ec 100644
--- a/src/common/icons/Pin.svelte
+++ b/src/common/icons/Pin.svelte
@@ -4,13 +4,6 @@
   export let title = "Pin";
 </script>
 
-<style>
-  svg {
-    display: block;
-    transform: rotate(-45deg);
-  }
-</style>
-
 <svg width={`${size * REM}px`} height={`${size * REM}px`} viewBox="0 0 16 16">
   <title>{title}</title>
   <path
@@ -18,3 +11,10 @@
     fill-rule="nonzero"
   />
 </svg>
+
+<style>
+  svg {
+    display: block;
+    transform: rotate(-45deg);
+  }
+</style>
diff --git a/src/common/icons/Star.svelte b/src/common/icons/Star.svelte
index 937d9a292..85f51a704 100644
--- a/src/common/icons/Star.svelte
+++ b/src/common/icons/Star.svelte
@@ -4,12 +4,6 @@
   export let title = "Star";
 </script>
 
-<style>
-  svg {
-    display: block;
-  }
-</style>
-
 <svg width={`${size * REM}px`} height={`${size * REM}px`} viewBox="0 0 16 16">
   <title>{title}</title>
   <path
@@ -17,3 +11,9 @@
     fill-rule="nonzero"
   />
 </svg>
+
+<style>
+  svg {
+    display: block;
+  }
+</style>
diff --git a/src/common/stories/Dropdown.stories.svelte b/src/common/stories/Dropdown.stories.svelte
index 4a83e7316..c0089ba29 100644
--- a/src/common/stories/Dropdown.stories.svelte
+++ b/src/common/stories/Dropdown.stories.svelte
@@ -37,16 +37,6 @@
   let subOptions = ["Suboption A", "Suboption B", "Suboption C"];
 </script>
 
-<style>
-  .content {
-    border-radius: 3px;
-    background: #fff;
-    border: 1px solid rgba(0, 0, 0, 0.1);
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
-    padding: 0.5rem;
-  }
-</style>
-
 <Template let:args>
   <Dropdown {...args} id="dropdown-1">
     <MenuTitle label="Options" slot="title" />
@@ -97,3 +87,13 @@
 
 <Story name="Default" {args} />
 <Story name="Without Overlay" args={{ ...args, overlay: false }} />
+
+<style>
+  .content {
+    border-radius: 3px;
+    background: #fff;
+    border: 1px solid rgba(0, 0, 0, 0.1);
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
+    padding: 0.5rem;
+  }
+</style>
diff --git a/src/langs/json/en.json b/src/langs/json/en.json
index 3469d902c..d3a6cdd7b 100644
--- a/src/langs/json/en.json
+++ b/src/langs/json/en.json
@@ -385,7 +385,7 @@
       "adminRole": "Admin",
       "memberListError": "An error occurred while loading the member list.",
       "memberListEmpty": "This organization has no other members.",
-      "userCount":"{n, plural, one {# organization member} other {# organization members}}"
+      "userCount": "{n, plural, one {# organization member} other {# organization members}}"
     },
     "credits": {
       "monthlyOrg": "Monthly Org Allowance",
diff --git a/src/main.html b/src/main.html
index 1a9773ec7..bf0320008 100755
--- a/src/main.html
+++ b/src/main.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html>
   <head>
     <meta charset="utf8" />
diff --git a/src/pages/FlatPage.svelte b/src/pages/FlatPage.svelte
index f4a1b15e7..1eac19275 100644
--- a/src/pages/FlatPage.svelte
+++ b/src/pages/FlatPage.svelte
@@ -168,6 +168,35 @@
   });
 </script>
 
+<svelte:head>
+  <title>{title} | DocumentCloud</title>
+</svelte:head>
+
+<div class="page">
+  <header>
+    <div class="logo">
+      {#if inIframe()}
+        <a href={process.env.APP_URL} target="_blank" rel="noreferrer"
+          >{@html mastLogoSvg}</a
+        >
+      {:else}
+        <Link to="app">
+          {@html mastLogoSvg}
+        </Link>
+      {/if}
+    </div>
+  </header>
+  <div class="content" bind:this={contentElem}>
+    {#if !hideToc}
+      <div class="toccontainer">
+        <div class="toc" bind:this={sidebarElem} />
+      </div>
+    {/if}
+
+    {@html render(content)}
+  </div>
+</div>
+
 <style lang="scss">
   .page {
     --contentWidth: 720px;
@@ -342,32 +371,3 @@
     }
   }
 </style>
-
-<svelte:head>
-  <title>{title} | DocumentCloud</title>
-</svelte:head>
-
-<div class="page">
-  <header>
-    <div class="logo">
-      {#if inIframe()}
-        <a href={process.env.APP_URL} target="_blank" rel="noreferrer"
-          >{@html mastLogoSvg}</a
-        >
-      {:else}
-        <Link to="app">
-          {@html mastLogoSvg}
-        </Link>
-      {/if}
-    </div>
-  </header>
-  <div class="content" bind:this={contentElem}>
-    {#if !hideToc}
-      <div class="toccontainer">
-        <div class="toc" bind:this={sidebarElem} />
-      </div>
-    {/if}
-
-    {@html render(content)}
-  </div>
-</div>
diff --git a/src/pages/NotFound.svelte b/src/pages/NotFound.svelte
index 2f8f645b7..fd6df444c 100644
--- a/src/pages/NotFound.svelte
+++ b/src/pages/NotFound.svelte
@@ -53,15 +53,6 @@
   });
 </script>
 
-<style>
-  .notfound {
-    padding: 2em;
-  }
-  .notfound :global(a) {
-    color: var(--primary, #4294f0);
-  }
-</style>
-
 {#await loading then done}
   {#if notFound}
     <div class="notfound">
@@ -81,3 +72,12 @@
     <FlatPage {title} {content} />
   {/if}
 {/await}
+
+<style>
+  .notfound {
+    padding: 2em;
+  }
+  .notfound :global(a) {
+    color: var(--primary, #4294f0);
+  }
+</style>
diff --git a/src/pages/app/ActionBar.svelte b/src/pages/app/ActionBar.svelte
index 08d1991d2..b92b8e90c 100644
--- a/src/pages/app/ActionBar.svelte
+++ b/src/pages/app/ActionBar.svelte
@@ -24,69 +24,6 @@
   let editVisible = false;
 </script>
 
-<style lang="scss">
-  .barcontainer {
-    border-bottom: 1px solid rgba(0, 0, 0, 0.25);
-    padding: 14px 0;
-
-    .nowrap {
-      white-space: nowrap;
-    }
-
-    .bar {
-      display: table-row;
-
-      .action {
-        font-size: 16px;
-        color: $primary;
-        padding: 0 25px;
-        user-select: none;
-        cursor: pointer;
-        display: table-cell;
-        vertical-align: middle;
-
-        &.check {
-          padding-right: 35px;
-          cursor: inherit;
-          transform: translateY(2px);
-        }
-
-        &.disabled {
-          color: $gray;
-          cursor: inherit;
-        }
-
-        &:first-child,
-        &.shortpad {
-          padding-left: 8px;
-        }
-
-        &.scaledown {
-          > :global(*) {
-            zoom: 0.8;
-          }
-        }
-      }
-    }
-  }
-
-  .badge {
-    background-color: $primary;
-    color: $menuBg;
-    font-size: 12px;
-    padding: 0.25em 0.5em;
-    border-radius: 50%;
-    box-sizing: border-box;
-    margin-right: 0.25em;
-  }
-
-  @media only screen and (max-width: 720px) {
-    .narrowhide {
-      display: none;
-    }
-  }
-</style>
-
 <div class="barcontainer">
   {#if !$layout.loading}
     <div class="bar">
@@ -152,3 +89,66 @@
 </div>
 
 <svelte:window bind:outerHeight />
+
+<style lang="scss">
+  .barcontainer {
+    border-bottom: 1px solid rgba(0, 0, 0, 0.25);
+    padding: 14px 0;
+
+    .nowrap {
+      white-space: nowrap;
+    }
+
+    .bar {
+      display: table-row;
+
+      .action {
+        font-size: 16px;
+        color: $primary;
+        padding: 0 25px;
+        user-select: none;
+        cursor: pointer;
+        display: table-cell;
+        vertical-align: middle;
+
+        &.check {
+          padding-right: 35px;
+          cursor: inherit;
+          transform: translateY(2px);
+        }
+
+        &.disabled {
+          color: $gray;
+          cursor: inherit;
+        }
+
+        &:first-child,
+        &.shortpad {
+          padding-left: 8px;
+        }
+
+        &.scaledown {
+          > :global(*) {
+            zoom: 0.8;
+          }
+        }
+      }
+    }
+  }
+
+  .badge {
+    background-color: $primary;
+    color: $menuBg;
+    font-size: 12px;
+    padding: 0.25em 0.5em;
+    border-radius: 50%;
+    box-sizing: border-box;
+    margin-right: 0.25em;
+  }
+
+  @media only screen and (max-width: 720px) {
+    .narrowhide {
+      display: none;
+    }
+  }
+</style>
diff --git a/src/pages/app/Anonymous.svelte b/src/pages/app/Anonymous.svelte
index c76d6dff0..617dbf60d 100644
--- a/src/pages/app/Anonymous.svelte
+++ b/src/pages/app/Anonymous.svelte
@@ -15,6 +15,55 @@
   }
 </script>
 
+<div class="container" out:fade|global>
+  <button class="dismiss" on:click={dismiss}>
+    <XCircle24 />
+  </button>
+  <h2>{$_("anonymous.title")}</h2>
+  <div class="img">
+    {@html documentSilhouetteSvg}
+  </div>
+  <div class="text">
+    <p>
+      {$_("anonymous.p1", { values: { n: $search?.results?.count ?? 0 } })}
+    </p>
+    <p>
+      {@html $_("anonymous.p2")}
+    </p>
+    <p>
+      {$_("anonymous.p3")}
+    </p>
+    <form
+      action="https://muckrock.us2.list-manage.com/subscribe/post?u=74862d74361490eca930f4384&amp;id=20aa4a931d&amp;f_id=00f4c0e1f0"
+      method="post"
+      id="mc-embedded-subscribe-form"
+      name="mc-embedded-subscribe-form"
+      class="validate"
+      target="_blank"
+      novalidate=""
+    >
+      <input
+        type="email"
+        name="EMAIL"
+        class="required email"
+        id="mce-EMAIL"
+        required=""
+        value=""
+        placeholder={$_("common.emailAddress")}
+      />
+      <input
+        type="hidden"
+        name="b_74862d74361490eca930f4384_20aa4a931d"
+        value=""
+      />
+      <Button>Subscribe</Button>
+    </form>
+    <p>
+      {@html $_("anonymous.p4")}
+    </p>
+  </div>
+</div>
+
 <style lang="scss">
   .container {
     margin: 1em 1.5em;
@@ -69,52 +118,3 @@
     cursor: pointer;
   }
 </style>
-
-<div class="container" out:fade|global>
-  <button class="dismiss" on:click={dismiss}>
-    <XCircle24 />
-  </button>
-  <h2>{$_("anonymous.title")}</h2>
-  <div class="img">
-    {@html documentSilhouetteSvg}
-  </div>
-  <div class="text">
-    <p>
-      {$_("anonymous.p1", { values: { n: $search?.results?.count ?? 0 } })}
-    </p>
-    <p>
-      {@html $_("anonymous.p2")}
-    </p>
-    <p>
-      {$_("anonymous.p3")}
-    </p>
-    <form
-      action="https://muckrock.us2.list-manage.com/subscribe/post?u=74862d74361490eca930f4384&amp;id=20aa4a931d&amp;f_id=00f4c0e1f0"
-      method="post"
-      id="mc-embedded-subscribe-form"
-      name="mc-embedded-subscribe-form"
-      class="validate"
-      target="_blank"
-      novalidate=""
-    >
-      <input
-        type="email"
-        name="EMAIL"
-        class="required email"
-        id="mce-EMAIL"
-        required=""
-        value=""
-        placeholder={$_("common.emailAddress")}
-      />
-      <input
-        type="hidden"
-        name="b_74862d74361490eca930f4384_20aa4a931d"
-        value=""
-      />
-      <Button>Subscribe</Button>
-    </form>
-    <p>
-      {@html $_("anonymous.p4")}
-    </p>
-  </div>
-</div>
diff --git a/src/pages/app/AuthSection.svelte b/src/pages/app/AuthSection.svelte
index 06400e8be..e98f95d36 100644
--- a/src/pages/app/AuthSection.svelte
+++ b/src/pages/app/AuthSection.svelte
@@ -45,31 +45,6 @@
   $: individualOrg = pickOne(orgs.filter((org) => org.individual));
 </script>
 
-<style>
-  .auth {
-    user-select: none;
-    margin: 0 0 20px 0;
-  }
-  .auth :global(a),
-  .auth .title,
-  .auth .dot {
-    color: var(--gray), rgba(0, 0, 0, 0.53);
-    font-size: 13px;
-  }
-
-  .auth .dot {
-    margin: 0 3px;
-  }
-
-  .auth .scope {
-    color: gray;
-  }
-
-  .auth .color {
-    color: var(--primary, #4294f0);
-  }
-</style>
-
 <div class="auth">
   <Link to="home">{$_("common.home")}</Link>
   <span class="dot">·</span>
@@ -163,3 +138,28 @@
     </Dropdown>
   {:else}<a href={SIGN_IN_URL}>{$_("authSection.signIn")}</a>{/if}
 </div>
+
+<style>
+  .auth {
+    user-select: none;
+    margin: 0 0 20px 0;
+  }
+  .auth :global(a),
+  .auth .title,
+  .auth .dot {
+    color: var(--gray), rgba(0, 0, 0, 0.53);
+    font-size: 13px;
+  }
+
+  .auth .dot {
+    margin: 0 3px;
+  }
+
+  .auth .scope {
+    color: gray;
+  }
+
+  .auth .color {
+    color: var(--primary, #4294f0);
+  }
+</style>
diff --git a/src/pages/app/Document.svelte b/src/pages/app/Document.svelte
index 956e39906..1180a0407 100644
--- a/src/pages/app/Document.svelte
+++ b/src/pages/app/Document.svelte
@@ -62,186 +62,6 @@
   const TAG_KEY = process.env.TAG_KEY;
 </script>
 
-<style lang="scss">
-  h2 {
-    font-size: $normal;
-    padding-top: 10px;
-    padding-bottom: 6px;
-    word-break: break-word;
-    margin: 2px 0;
-    padding: 0;
-  }
-
-  h3 {
-    font-size: $small;
-    font-weight: normal;
-    color: $gray;
-    margin: 2px 0;
-    padding: 0;
-  }
-
-  .card {
-    display: table;
-
-    @media only screen and (max-width: 720px) {
-      margin-bottom: 15px;
-    }
-
-    .row {
-      display: table-row;
-
-      > * {
-        display: table-cell;
-        vertical-align: top;
-      }
-    }
-  }
-
-  .check {
-    padding-top: 30px;
-    padding-left: 30px;
-  }
-
-  .updating {
-    color: $gray;
-    margin-bottom: 26px;
-  }
-
-  .valign {
-    vertical-align: middle;
-    display: inline-block;
-
-    &.marginleft {
-      margin-left: 8px;
-    }
-  }
-
-  .actions {
-    font-size: 14px;
-    padding-bottom: 10px;
-
-    span {
-      display: inline-block;
-      margin: 6px 0;
-
-      &.pending {
-        color: $gray;
-        font-style: italic;
-      }
-
-      &.error {
-        color: $caution;
-      }
-    }
-  }
-
-  .hinfo {
-    font-size: 13px;
-    font-weight: bold;
-    margin: 15px 0;
-
-    > * {
-      display: inline-block;
-      vertical-align: middle;
-    }
-
-    .x {
-      @include buttonLike;
-
-      padding-right: 5px;
-      height: 14px;
-
-      :global(svg) {
-        height: 12px;
-        opacity: 0.7;
-      }
-    }
-
-    .padleft {
-      @include buttonLike;
-      padding-left: 5px;
-    }
-  }
-
-  .highlights {
-    color: #333;
-    font-size: 14px;
-    line-height: 18px;
-    display: table;
-    width: 100%;
-    padding-bottom: 27px;
-
-    .row {
-      display: table-row;
-
-      > * {
-        display: table-cell;
-        vertical-align: top;
-      }
-    }
-
-    .page {
-      text-align: center;
-
-      :global(img) {
-        width: 40px;
-        height: 52px;
-        box-sizing: border-box;
-        border: solid 1px gainsboro;
-      }
-
-      .number {
-        font-weight: bold;
-        font-size: 11px;
-        padding-bottom: 15px;
-      }
-    }
-
-    .highlight {
-      width: 100%;
-      padding-top: 8px;
-      padding-left: 15px;
-      padding-bottom: 15px;
-
-      .passage {
-        &.highlighted {
-          background: $annotationBorder;
-        }
-      }
-    }
-  }
-
-  .note-highlights {
-    position: relative;
-  }
-
-  .smallinfo {
-    font-size: 12px;
-    color: $gray;
-    display: inline-block;
-    margin-right: 2px;
-    font-style: italic;
-  }
-
-  .pencil {
-    @include buttonLike;
-    vertical-align: middle;
-    height: 10px;
-  }
-
-  .description {
-    margin: 8px 0 -8px 0;
-
-    &.embeddescription {
-      margin-bottom: 20px;
-
-      :global(.content) {
-        max-height: 135px;
-      }
-    }
-  }
-</style>
-
 <div class="card">
   <div class="row">
     {#if $orgsAndUsers.loggedIn && !embed && !dialog}
@@ -459,3 +279,183 @@
 </div>
 
 <svelte:window on:keydown={handleKeydown} on:keyup={handleKeyup} />
+
+<style lang="scss">
+  h2 {
+    font-size: $normal;
+    padding-top: 10px;
+    padding-bottom: 6px;
+    word-break: break-word;
+    margin: 2px 0;
+    padding: 0;
+  }
+
+  h3 {
+    font-size: $small;
+    font-weight: normal;
+    color: $gray;
+    margin: 2px 0;
+    padding: 0;
+  }
+
+  .card {
+    display: table;
+
+    @media only screen and (max-width: 720px) {
+      margin-bottom: 15px;
+    }
+
+    .row {
+      display: table-row;
+
+      > * {
+        display: table-cell;
+        vertical-align: top;
+      }
+    }
+  }
+
+  .check {
+    padding-top: 30px;
+    padding-left: 30px;
+  }
+
+  .updating {
+    color: $gray;
+    margin-bottom: 26px;
+  }
+
+  .valign {
+    vertical-align: middle;
+    display: inline-block;
+
+    &.marginleft {
+      margin-left: 8px;
+    }
+  }
+
+  .actions {
+    font-size: 14px;
+    padding-bottom: 10px;
+
+    span {
+      display: inline-block;
+      margin: 6px 0;
+
+      &.pending {
+        color: $gray;
+        font-style: italic;
+      }
+
+      &.error {
+        color: $caution;
+      }
+    }
+  }
+
+  .hinfo {
+    font-size: 13px;
+    font-weight: bold;
+    margin: 15px 0;
+
+    > * {
+      display: inline-block;
+      vertical-align: middle;
+    }
+
+    .x {
+      @include buttonLike;
+
+      padding-right: 5px;
+      height: 14px;
+
+      :global(svg) {
+        height: 12px;
+        opacity: 0.7;
+      }
+    }
+
+    .padleft {
+      @include buttonLike;
+      padding-left: 5px;
+    }
+  }
+
+  .highlights {
+    color: #333;
+    font-size: 14px;
+    line-height: 18px;
+    display: table;
+    width: 100%;
+    padding-bottom: 27px;
+
+    .row {
+      display: table-row;
+
+      > * {
+        display: table-cell;
+        vertical-align: top;
+      }
+    }
+
+    .page {
+      text-align: center;
+
+      :global(img) {
+        width: 40px;
+        height: 52px;
+        box-sizing: border-box;
+        border: solid 1px gainsboro;
+      }
+
+      .number {
+        font-weight: bold;
+        font-size: 11px;
+        padding-bottom: 15px;
+      }
+    }
+
+    .highlight {
+      width: 100%;
+      padding-top: 8px;
+      padding-left: 15px;
+      padding-bottom: 15px;
+
+      .passage {
+        &.highlighted {
+          background: $annotationBorder;
+        }
+      }
+    }
+  }
+
+  .note-highlights {
+    position: relative;
+  }
+
+  .smallinfo {
+    font-size: 12px;
+    color: $gray;
+    display: inline-block;
+    margin-right: 2px;
+    font-style: italic;
+  }
+
+  .pencil {
+    @include buttonLike;
+    vertical-align: middle;
+    height: 10px;
+  }
+
+  .description {
+    margin: 8px 0 -8px 0;
+
+    &.embeddescription {
+      margin-bottom: 20px;
+
+      :global(.content) {
+        max-height: 135px;
+      }
+    }
+  }
+</style>
diff --git a/src/pages/app/DocumentThumbnail.svelte b/src/pages/app/DocumentThumbnail.svelte
index b8e4780f5..dce61c8fe 100644
--- a/src/pages/app/DocumentThumbnail.svelte
+++ b/src/pages/app/DocumentThumbnail.svelte
@@ -32,6 +32,65 @@
   $: pageCount = document == null ? null : $documents.pageCountMap[document.id];
 </script>
 
+<div class="img" data-id={document.id} class:embed>
+  <span class="imgwrap">
+    {#if document.viewable}
+      {#if dialog}
+        <Image
+          clickable={true}
+          on:click={() => emit.pick(document)}
+          src={document.thumbnail}
+        />
+      {:else if embed && document.publishedUrl != null && document.publishedUrl.trim().length > 0}
+        <a href={document.publishedUrl} rel="noreferrer" target="_blank"
+          ><Image src={document.thumbnail} /></a
+        >
+      {:else}
+        <Link newPage={embed} to="viewer" params={{ id: document.slugId }}>
+          <Image src={document.thumbnail} />
+        </Link>
+      {/if}
+    {:else if document.pending}
+      <Tooltip>
+        <div slot="caption" class="caption">
+          {#if realProgress != null}
+            <p>{Math.floor(realProgress * 100)}%</p>
+            {#if pagesProcessed != null}
+              <p>
+                {pagesProcessed} / {pageCount}
+                {$_("documentThumbnail.pages")}
+              </p>
+            {/if}
+          {:else}{$_("documentThumbnail.loading")}{/if}
+        </div>
+        <Loader active={true} center={true} big={true}>
+          <span class="fullstatus">{document.status}</span>
+        </Loader>
+      </Tooltip>
+    {:else}
+      <span class="error">
+        {@html errorIconSvg}
+      </span>
+    {/if}
+  </span>
+  {#if noteCount > 0}
+    <span class="note-count">
+      {$_("document.noteCount", { values: { n: noteCount } })}
+    </span>
+    <div class="tag">
+      {#if publicNote}
+        {@html publicTagSvg}
+      {/if}
+      {#if orgNote}
+        {@html organizationTagSvg}
+      {/if}
+      {#if privateNote}
+        {@html privateTagSvg}
+      {/if}
+    </div>
+  {/if}
+</div>
+
 <style lang="scss">
   .img {
     padding: 0 35px 20px 35px;
@@ -120,62 +179,3 @@
     }
   }
 </style>
-
-<div class="img" data-id={document.id} class:embed>
-  <span class="imgwrap">
-    {#if document.viewable}
-      {#if dialog}
-        <Image
-          clickable={true}
-          on:click={() => emit.pick(document)}
-          src={document.thumbnail}
-        />
-      {:else if embed && document.publishedUrl != null && document.publishedUrl.trim().length > 0}
-        <a href={document.publishedUrl} rel="noreferrer" target="_blank"
-          ><Image src={document.thumbnail} /></a
-        >
-      {:else}
-        <Link newPage={embed} to="viewer" params={{ id: document.slugId }}>
-          <Image src={document.thumbnail} />
-        </Link>
-      {/if}
-    {:else if document.pending}
-      <Tooltip>
-        <div slot="caption" class="caption">
-          {#if realProgress != null}
-            <p>{Math.floor(realProgress * 100)}%</p>
-            {#if pagesProcessed != null}
-              <p>
-                {pagesProcessed} / {pageCount}
-                {$_("documentThumbnail.pages")}
-              </p>
-            {/if}
-          {:else}{$_("documentThumbnail.loading")}{/if}
-        </div>
-        <Loader active={true} center={true} big={true}>
-          <span class="fullstatus">{document.status}</span>
-        </Loader>
-      </Tooltip>
-    {:else}
-      <span class="error">
-        {@html errorIconSvg}
-      </span>
-    {/if}
-  </span>
-  {#if noteCount > 0}
-    <span class="note-count">
-      {$_("document.noteCount", { values: { n: noteCount } })}
-    </span>
-    <div class="tag">
-      {#if publicNote}
-        {@html publicTagSvg}
-      {/if}
-      {#if orgNote}
-        {@html organizationTagSvg}
-      {/if}
-      {#if privateNote}
-        {@html privateTagSvg}
-      {/if}
-    </div>
-  {/if}
-</div>
diff --git a/src/pages/app/Documents.svelte b/src/pages/app/Documents.svelte
index 07887cb69..25c81eecf 100644
--- a/src/pages/app/Documents.svelte
+++ b/src/pages/app/Documents.svelte
@@ -135,6 +135,97 @@
   }
 </script>
 
+<Loader active={$layout.loading}>
+  <div class="documents">
+    <div class="sticky" class:embed>
+      {#if !embed}
+        {#if $layout.uploading && !$layout.error}
+          <Modal
+            on:close={() => ($layout.uploading = false)}
+            component={UploadDialog}
+            properties={{ initialFiles: preUploadFiles }}
+          />
+        {/if}
+
+        {#if $orgsAndUsers.loggedIn}
+          <SpecialMessage />
+        {/if}
+        <AccountNavigation />
+      {/if}
+      {#if embed && $layout.projectEmbedTitle != null}
+        <div class="projectembedtitle">{$layout.projectEmbedTitle}</div>
+      {/if}
+      {#if !dialog && embed && $search.params != null && $search.params.projectEmbedId != null && $layout.projectEmbedSearchBar}
+        <!-- Use a search link -->
+        <SearchLink link={projectIdUrl($search.params.projectEmbedId)} />
+      {:else if !embed || dialog}
+        <!-- Don't show search bar in embed (for now) -->
+        <SearchBar {embed} {dialog} />
+      {/if}
+
+      <div>
+        {#if !embed}
+          <Title>{title}</Title>
+          {#if $orgsAndUsers.loggedIn}
+            <Button
+              on:click={showUploadModal}
+              disabledReason={$orgsAndUsers.isVerified
+                ? null
+                : $_("documents.mustBeVerified")}
+              >+ {$_("documents.upload")}</Button
+            >
+          {/if}
+          {#if $orgsAndUsers.loggedIn && !$orgsAndUsers.isVerified}
+            <a href="https://airtable.com/shrZrgdmuOwW0ZLPM" target="_new">
+              <Button>{$_("noDocuments.requestVerificationAction")}</Button>
+            </a>
+          {/if}
+        {/if}
+      </div>
+      {#if !embed}
+        <ActionBar />
+
+        <ProcessingBar />
+
+        <AddonStatus />
+      {/if}
+    </div>
+
+    <div class="docscontainer">
+      <Draggable
+        on:files={showUploadModal}
+        disabled={embed || !$orgsAndUsers.loggedIn || !$orgsAndUsers.isVerified}
+      >
+        {#if !$orgsAndUsers.loggedIn && $search.params?.query === "" && !anonymousClosed}
+          <Anonymous bind:closed={anonymousClosed} />
+        {:else}
+          {#each $documents.documents as document (document.id)}
+            <div class:inlinecard={embed} animate:flip={{ duration: 400 }}>
+              <Document {embed} {dialog} {document} on:pick />
+            </div>
+          {/each}
+        {/if}
+        {#if $documents.documents.length == 0 && !$layout.loading}
+          <NoDocuments />
+        {/if}
+        {#if $orgsAndUsers.loggedIn}
+          <div class="toastouter">
+            <div class="toast">{$_("documents.dropFile")}</div>
+          </div>
+        {/if}
+      </Draggable>
+    </div>
+
+    {#if embed}
+      <EmbedFooter {dialog} />
+    {:else}
+      <div class="narrowshow">
+        <Paginator />
+      </div>
+    {/if}
+  </div>
+</Loader>
+
 <style lang="scss">
   .docscontainer {
     margin-top: 17px;
@@ -238,94 +329,3 @@
     margin: 0.5em 0 1em -10px;
   }
 </style>
-
-<Loader active={$layout.loading}>
-  <div class="documents">
-    <div class="sticky" class:embed>
-      {#if !embed}
-        {#if $layout.uploading && !$layout.error}
-          <Modal
-            on:close={() => ($layout.uploading = false)}
-            component={UploadDialog}
-            properties={{ initialFiles: preUploadFiles }}
-          />
-        {/if}
-
-        {#if $orgsAndUsers.loggedIn}
-          <SpecialMessage />
-        {/if}
-        <AccountNavigation />
-      {/if}
-      {#if embed && $layout.projectEmbedTitle != null}
-        <div class="projectembedtitle">{$layout.projectEmbedTitle}</div>
-      {/if}
-      {#if !dialog && embed && $search.params != null && $search.params.projectEmbedId != null && $layout.projectEmbedSearchBar}
-        <!-- Use a search link -->
-        <SearchLink link={projectIdUrl($search.params.projectEmbedId)} />
-      {:else if !embed || dialog}
-        <!-- Don't show search bar in embed (for now) -->
-        <SearchBar {embed} {dialog} />
-      {/if}
-
-      <div>
-        {#if !embed}
-          <Title>{title}</Title>
-          {#if $orgsAndUsers.loggedIn}
-            <Button
-              on:click={showUploadModal}
-              disabledReason={$orgsAndUsers.isVerified
-                ? null
-                : $_("documents.mustBeVerified")}
-              >+ {$_("documents.upload")}</Button
-            >
-          {/if}
-          {#if $orgsAndUsers.loggedIn && !$orgsAndUsers.isVerified}
-            <a href="https://airtable.com/shrZrgdmuOwW0ZLPM" target="_new">
-              <Button>{$_("noDocuments.requestVerificationAction")}</Button>
-            </a>
-          {/if}
-        {/if}
-      </div>
-      {#if !embed}
-        <ActionBar />
-
-        <ProcessingBar />
-
-        <AddonStatus />
-      {/if}
-    </div>
-
-    <div class="docscontainer">
-      <Draggable
-        on:files={showUploadModal}
-        disabled={embed || !$orgsAndUsers.loggedIn || !$orgsAndUsers.isVerified}
-      >
-        {#if !$orgsAndUsers.loggedIn && $search.params?.query === "" && !anonymousClosed}
-          <Anonymous bind:closed={anonymousClosed} />
-        {:else}
-          {#each $documents.documents as document (document.id)}
-            <div class:inlinecard={embed} animate:flip={{ duration: 400 }}>
-              <Document {embed} {dialog} {document} on:pick />
-            </div>
-          {/each}
-        {/if}
-        {#if $documents.documents.length == 0 && !$layout.loading}
-          <NoDocuments />
-        {/if}
-        {#if $orgsAndUsers.loggedIn}
-          <div class="toastouter">
-            <div class="toast">{$_("documents.dropFile")}</div>
-          </div>
-        {/if}
-      </Draggable>
-    </div>
-
-    {#if embed}
-      <EmbedFooter {dialog} />
-    {:else}
-      <div class="narrowshow">
-        <Paginator />
-      </div>
-    {/if}
-  </div>
-</Loader>
diff --git a/src/pages/app/EmbedFooter.svelte b/src/pages/app/EmbedFooter.svelte
index 54566ee63..8cef95fdd 100644
--- a/src/pages/app/EmbedFooter.svelte
+++ b/src/pages/app/EmbedFooter.svelte
@@ -5,6 +5,18 @@
   export let dialog = false;
 </script>
 
+<div class="footer" class:dialog>
+  <div class="background" />
+  <div class="paginator">
+    <Paginator />
+  </div>
+  {#if !dialog}
+    <div class="logo">
+      <Logo newPage={true} nopadding={true} homeLink={true} />
+    </div>
+  {/if}
+</div>
+
 <style lang="scss">
   .footer {
     position: sticky;
@@ -46,15 +58,3 @@
     }
   }
 </style>
-
-<div class="footer" class:dialog>
-  <div class="background" />
-  <div class="paginator">
-    <Paginator />
-  </div>
-  {#if !dialog}
-    <div class="logo">
-      <Logo newPage={true} nopadding={true} homeLink={true} />
-    </div>
-  {/if}
-</div>
diff --git a/src/pages/app/File.svelte b/src/pages/app/File.svelte
index 58ff70c9e..56772b3ee 100644
--- a/src/pages/app/File.svelte
+++ b/src/pages/app/File.svelte
@@ -33,6 +33,37 @@
   }
 </script>
 
+{#if !uploadMode || !data.done}
+  <div class="row">
+    <div class="cell doc">
+      {@html documentIconSvg}
+    </div>
+    <div class="cell name" class:readonly={uploadMode}>
+      <div class="progresscontainer">
+        {#if uploadMode}
+          <div class="progress" style="width: {data.progress * 100}%">
+            <div class="progressinner">{name}</div>
+          </div>
+        {/if}
+      </div>
+      <input
+        placeholder={$_("uploadDialog.untitled")}
+        readonly={uploadMode}
+        bind:value={name}
+        class:error
+      />
+    </div>
+    <div class="cell size">{size}</div>
+    {#if !uploadMode}
+      <div class="cell close">
+        <div on:click={emit.delete}>
+          {@html closeInlineSvg}
+        </div>
+      </div>
+    {/if}
+  </div>
+{/if}
+
 <style lang="scss">
   .row {
     display: table-row;
@@ -123,34 +154,3 @@
     white-space: pre;
   }
 </style>
-
-{#if !uploadMode || !data.done}
-  <div class="row">
-    <div class="cell doc">
-      {@html documentIconSvg}
-    </div>
-    <div class="cell name" class:readonly={uploadMode}>
-      <div class="progresscontainer">
-        {#if uploadMode}
-          <div class="progress" style="width: {data.progress * 100}%">
-            <div class="progressinner">{name}</div>
-          </div>
-        {/if}
-      </div>
-      <input
-        placeholder={$_("uploadDialog.untitled")}
-        readonly={uploadMode}
-        bind:value={name}
-        class:error
-      />
-    </div>
-    <div class="cell size">{size}</div>
-    {#if !uploadMode}
-      <div class="cell close">
-        <div on:click={emit.delete}>
-          {@html closeInlineSvg}
-        </div>
-      </div>
-    {/if}
-  </div>
-{/if}
diff --git a/src/pages/app/MainContainer.svelte b/src/pages/app/MainContainer.svelte
index b65afe1d4..e0a99c793 100644
--- a/src/pages/app/MainContainer.svelte
+++ b/src/pages/app/MainContainer.svelte
@@ -60,39 +60,6 @@
   let containerElem = null;
 </script>
 
-<style>
-  .main {
-    position: absolute;
-    left: var(--sidebar-width, 272px);
-    right: 0;
-    top: 0;
-    bottom: 0;
-    background: white;
-    overflow: auto;
-  }
-
-  .main.embed {
-    left: 0;
-  }
-
-  @media only screen and (max-width: 720px) {
-    .main {
-      left: 0;
-    }
-    .main.concealed {
-      display: none;
-    }
-  }
-
-  .container {
-    padding: 0 48px var(--mainDocContainerPadding, 12px) 48px;
-  }
-
-  .container.error {
-    padding: 100px;
-  }
-</style>
-
 <div class="main" class:embed class:concealed>
   <Toasts />
 
@@ -148,3 +115,36 @@
     </div>
   {/if}
 </div>
+
+<style>
+  .main {
+    position: absolute;
+    left: var(--sidebar-width, 272px);
+    right: 0;
+    top: 0;
+    bottom: 0;
+    background: white;
+    overflow: auto;
+  }
+
+  .main.embed {
+    left: 0;
+  }
+
+  @media only screen and (max-width: 720px) {
+    .main {
+      left: 0;
+    }
+    .main.concealed {
+      display: none;
+    }
+  }
+
+  .container {
+    padding: 0 48px var(--mainDocContainerPadding, 12px) 48px;
+  }
+
+  .container.error {
+    padding: 100px;
+  }
+</style>
diff --git a/src/pages/app/NoDocuments.svelte b/src/pages/app/NoDocuments.svelte
index 165e20c89..029a3a810 100644
--- a/src/pages/app/NoDocuments.svelte
+++ b/src/pages/app/NoDocuments.svelte
@@ -8,49 +8,6 @@
   import emptyResultsSvg from "@/assets/empty_results.svg?raw";
 </script>
 
-<style lang="scss">
-  .container {
-    margin: 1em 1.5em;
-    background: $fyi;
-    padding: 1em;
-    border-radius: 10px;
-  }
-
-  h2 {
-    font-size: 16px;
-    font-weight: 600;
-    margin: 1.5em 0;
-    padding-left: 18px;
-  }
-
-  .img,
-  .text {
-    display: inline-block;
-    vertical-align: top;
-  }
-
-  .text {
-    max-width: 80ch;
-    width: 30vw;
-    margin: 0 2em 1em 2em;
-
-    :global(a) {
-      color: $primary;
-    }
-
-    li,
-    p {
-      font-size: 15px;
-      line-height: 22px;
-      margin: 5px 0;
-    }
-  }
-
-  p {
-    margin: 0 1em;
-  }
-</style>
-
 <div class="container">
   {#if $orgsAndUsers.me == null || $search.params.oneUserSearch != $orgsAndUsers.me.id || !$search.params.noStatus || !$search.params.noAccess}
     <h2>{$_("noDocuments.noSearchResults")}</h2>
@@ -98,3 +55,46 @@
     </div>
   {/if}
 </div>
+
+<style lang="scss">
+  .container {
+    margin: 1em 1.5em;
+    background: $fyi;
+    padding: 1em;
+    border-radius: 10px;
+  }
+
+  h2 {
+    font-size: 16px;
+    font-weight: 600;
+    margin: 1.5em 0;
+    padding-left: 18px;
+  }
+
+  .img,
+  .text {
+    display: inline-block;
+    vertical-align: top;
+  }
+
+  .text {
+    max-width: 80ch;
+    width: 30vw;
+    margin: 0 2em 1em 2em;
+
+    :global(a) {
+      color: $primary;
+    }
+
+    li,
+    p {
+      font-size: 15px;
+      line-height: 22px;
+      margin: 5px 0;
+    }
+  }
+
+  p {
+    margin: 0 1em;
+  }
+</style>
diff --git a/src/pages/app/Paginator.svelte b/src/pages/app/Paginator.svelte
index 87e4315f3..02e3f0cca 100644
--- a/src/pages/app/Paginator.svelte
+++ b/src/pages/app/Paginator.svelte
@@ -7,6 +7,37 @@
   import rightPaginatorSvg from "@/assets/page_arrow_right.svg?raw";
 </script>
 
+<div class="paginator">
+  {#if $search.hasResults}
+    <button disabled={!$search.hasPrev} on:click={searchPrev}>
+      {@html leftPaginatorSvg}
+    </button>
+    <div class="text">
+      <div class="number">
+        {#if $search.results.onlyPage}
+          {$search.results.rawResults.results.length}
+        {:else}
+          <span class="range">
+            {$search.start}
+            -
+            {$search.end}
+          </span>
+          {#if $search.results.count}
+            {$_("paginator.of")}
+            {$search.results.count}
+          {/if}
+        {/if}
+      </div>
+      <div class="documents">
+        {$_("paginator.document", { values: { n: $search.results.count } })}
+      </div>
+    </div>
+    <button disabled={!$search.hasNext} on:click={searchNext}>
+      {@html rightPaginatorSvg}
+    </button>
+  {/if}
+</div>
+
 <style lang="scss">
   .paginator {
     display: table-cell;
@@ -70,34 +101,3 @@
     }
   }
 </style>
-
-<div class="paginator">
-  {#if $search.hasResults}
-    <button disabled={!$search.hasPrev} on:click={searchPrev}>
-      {@html leftPaginatorSvg}
-    </button>
-    <div class="text">
-      <div class="number">
-        {#if $search.results.onlyPage}
-          {$search.results.rawResults.results.length}
-        {:else}
-          <span class="range">
-            {$search.start}
-            -
-            {$search.end}
-          </span>
-          {#if $search.results.count}
-            {$_("paginator.of")}
-            {$search.results.count}
-          {/if}
-        {/if}
-      </div>
-      <div class="documents">
-        {$_("paginator.document", { values: { n: $search.results.count } })}
-      </div>
-    </div>
-    <button disabled={!$search.hasNext} on:click={searchNext}>
-      {@html rightPaginatorSvg}
-    </button>
-  {/if}
-</div>
diff --git a/src/pages/app/ProcessingBar.svelte b/src/pages/app/ProcessingBar.svelte
index dd885c166..ce9071653 100644
--- a/src/pages/app/ProcessingBar.svelte
+++ b/src/pages/app/ProcessingBar.svelte
@@ -17,6 +17,26 @@
   });
 </script>
 
+{#if !$documents.doneProcessing || !dismissed}
+  <div class="processingbar">
+    <div class="info">
+      {#if $documents.doneProcessing}
+        <span class="valign">{$_("processingBar.doneProcessing")}</span>
+        <span class="dismiss">
+          <Button small={true} on:click={() => (dismissed = true)}>
+            {$_("dialog.dismiss")}
+          </Button>
+        </span>
+      {:else}
+        {$_("processingBar.processingDocuments", {
+          values: { n: $documents.numProcessing },
+        })}
+      {/if}
+    </div>
+    <Progress progress={$documents.processingProgress} />
+  </div>
+{/if}
+
 <style lang="scss">
   .processingbar {
     background: #eff7ff;
@@ -44,23 +64,3 @@
     }
   }
 </style>
-
-{#if !$documents.doneProcessing || !dismissed}
-  <div class="processingbar">
-    <div class="info">
-      {#if $documents.doneProcessing}
-        <span class="valign">{$_("processingBar.doneProcessing")}</span>
-        <span class="dismiss">
-          <Button small={true} on:click={() => (dismissed = true)}>
-            {$_("dialog.dismiss")}
-          </Button>
-        </span>
-      {:else}
-        {$_("processingBar.processingDocuments", {
-          values: { n: $documents.numProcessing },
-        })}
-      {/if}
-    </div>
-    <Progress progress={$documents.processingProgress} />
-  </div>
-{/if}
diff --git a/src/pages/app/SearchBar.svelte b/src/pages/app/SearchBar.svelte
index 4bfdb43ab..cd0daec6a 100644
--- a/src/pages/app/SearchBar.svelte
+++ b/src/pages/app/SearchBar.svelte
@@ -53,6 +53,31 @@
   });
 </script>
 
+<div class="searchcontainer" class:example>
+  <SearchInput
+    bind:value={search}
+    bind:transformedQuery
+    {example}
+    {compact}
+    on:search={submitSearch}
+  />
+  {#if !embed && !example}
+    <div class="info">
+      <span>
+        {@html $_("searchBar.tips")}
+      </span>
+      <Button
+        action={true}
+        small={true}
+        nomargin={true}
+        on:click={showSearchTips}
+      >
+        {$_("searchBar.learnMore")}
+      </Button>
+    </div>
+  {/if}
+</div>
+
 <style lang="scss">
   .searchcontainer {
     margin: 0 0 20px 0;
@@ -85,28 +110,3 @@
     }
   }
 </style>
-
-<div class="searchcontainer" class:example>
-  <SearchInput
-    bind:value={search}
-    bind:transformedQuery
-    {example}
-    {compact}
-    on:search={submitSearch}
-  />
-  {#if !embed && !example}
-    <div class="info">
-      <span>
-        {@html $_("searchBar.tips")}
-      </span>
-      <Button
-        action={true}
-        small={true}
-        nomargin={true}
-        on:click={showSearchTips}
-      >
-        {$_("searchBar.learnMore")}
-      </Button>
-    </div>
-  {/if}
-</div>
diff --git a/src/pages/app/SearchInput.svelte b/src/pages/app/SearchInput.svelte
index ff94ac7e3..31586bc1f 100644
--- a/src/pages/app/SearchInput.svelte
+++ b/src/pages/app/SearchInput.svelte
@@ -463,8 +463,8 @@
   $: autocomplete = noCompletion
     ? ""
     : selectedCompletion == null
-    ? completions[0].feed
-    : selectedCompletion.feed;
+      ? completions[0].feed
+      : selectedCompletion.feed;
 
   function handleBlur() {
     handleCursor();
@@ -570,6 +570,104 @@
   });
 </script>
 
+<div class="search" class:compact>
+  {@html searchIconSvg}
+  <textarea
+    bind:this={input}
+    bind:value
+    disabled={example}
+    class:compact
+    class:example
+    placeholder={$_("searchBar.search")}
+    use:textAreaResize={0}
+    spellcheck="false"
+    on:keydown={handleKeyDown}
+    on:keyup={handleKeyUp}
+    on:input={handleCursor}
+    on:click={handleCursor}
+    on:touchend={handleCursor}
+    on:focus={handleCursor}
+    on:blur={handleBlur}
+  />
+  <div class="mirror" bind:this={mirror} class:compact class:example>
+    {#each highlights as highlight}
+      {#if highlight.type == "field"}
+        <span class:field={highlight.valid}>
+          <NoWhitespace>
+            <b>{highlight.field}</b>
+            <span>{highlight.value}</span>
+          </NoWhitespace>
+        </span>
+      {:else if highlight.type == "quote"}
+        <span class="quote">
+          <NoWhitespace><span>{highlight.text}</span></NoWhitespace>
+        </span>
+      {:else if highlight.type == "operator"}
+        <span class="operator">
+          <NoWhitespace><b>{highlight.text}</b></NoWhitespace>
+        </span>
+      {:else}
+        {#each highlight.text.split(/( )/g) as rawText}
+          <!-- Split raw text by space to avoid line-break issues -->
+          {#if rawText != ""}<span> <span>{rawText}</span> </span>{/if}
+        {/each}
+      {/if}
+    {/each}
+    {#if autocomplete.length > 0}
+      <span class="autocomplete"> <span>{autocomplete}</span> </span>
+    {/if}
+  </div>
+  {#if !example && value.length != 0}
+    <div class="closeicon" on:click={() => (value = "")}>
+      {@html closeInlineSvg}
+    </div>
+  {/if}
+  <div class="tagbank" style={completionX}>
+    <div class="completions">
+      {#if processedCompletions == null}
+        <!-- Completions are loading -->
+        <div class="completion loading">Loading...</div>
+      {:else}
+        {#each processedCompletions.completions as completion}
+          <div
+            class="completion"
+            class:active={completionIndex != null &&
+              completionIndex == completion.index}
+            on:mouseover={() => {
+              if (completion.index != null) completionIndex = completion.index;
+            }}
+            on:mouseout={() => {
+              if (completion.index != null) completionIndex = null;
+            }}
+            on:mousedown|preventDefault={() =>
+              triggerCompletion(
+                completion,
+                fieldPost != null ? fieldPost.length : 0,
+              )}
+            class:groupstart={completion.type == "groupstart"}
+          >
+            <div
+              class:negative={completion.score != null && completion.score < 0}
+            >
+              <div>
+                <!-- Highlight completion letters -->
+                {#each completion.text as letter, i}
+                  {#if completion.highlightLetters != null && completion.highlightLetters.includes(i)}
+                    <b>{letter}</b>
+                  {:else}<span>{letter}</span>{/if}
+                {/each}
+              </div>
+            </div>
+            {#if completion.info != null}
+              <div class="info">{completion.info}</div>
+            {/if}
+          </div>
+        {/each}
+      {/if}
+    </div>
+  </div>
+</div>
+
 <style lang="scss">
   $fontSize: 16px;
   $wordSpacing: 1px;
@@ -778,101 +876,3 @@
     -webkit-text-fill-color: $gray;
   }
 </style>
-
-<div class="search" class:compact>
-  {@html searchIconSvg}
-  <textarea
-    bind:this={input}
-    bind:value
-    disabled={example}
-    class:compact
-    class:example
-    placeholder={$_("searchBar.search")}
-    use:textAreaResize={0}
-    spellcheck="false"
-    on:keydown={handleKeyDown}
-    on:keyup={handleKeyUp}
-    on:input={handleCursor}
-    on:click={handleCursor}
-    on:touchend={handleCursor}
-    on:focus={handleCursor}
-    on:blur={handleBlur}
-  />
-  <div class="mirror" bind:this={mirror} class:compact class:example>
-    {#each highlights as highlight}
-      {#if highlight.type == "field"}
-        <span class:field={highlight.valid}>
-          <NoWhitespace>
-            <b>{highlight.field}</b>
-            <span>{highlight.value}</span>
-          </NoWhitespace>
-        </span>
-      {:else if highlight.type == "quote"}
-        <span class="quote">
-          <NoWhitespace><span>{highlight.text}</span></NoWhitespace>
-        </span>
-      {:else if highlight.type == "operator"}
-        <span class="operator">
-          <NoWhitespace><b>{highlight.text}</b></NoWhitespace>
-        </span>
-      {:else}
-        {#each highlight.text.split(/( )/g) as rawText}
-          <!-- Split raw text by space to avoid line-break issues -->
-          {#if rawText != ""}<span> <span>{rawText}</span> </span>{/if}
-        {/each}
-      {/if}
-    {/each}
-    {#if autocomplete.length > 0}
-      <span class="autocomplete"> <span>{autocomplete}</span> </span>
-    {/if}
-  </div>
-  {#if !example && value.length != 0}
-    <div class="closeicon" on:click={() => (value = "")}>
-      {@html closeInlineSvg}
-    </div>
-  {/if}
-  <div class="tagbank" style={completionX}>
-    <div class="completions">
-      {#if processedCompletions == null}
-        <!-- Completions are loading -->
-        <div class="completion loading">Loading...</div>
-      {:else}
-        {#each processedCompletions.completions as completion}
-          <div
-            class="completion"
-            class:active={completionIndex != null &&
-              completionIndex == completion.index}
-            on:mouseover={() => {
-              if (completion.index != null) completionIndex = completion.index;
-            }}
-            on:mouseout={() => {
-              if (completion.index != null) completionIndex = null;
-            }}
-            on:mousedown|preventDefault={() =>
-              triggerCompletion(
-                completion,
-                fieldPost != null ? fieldPost.length : 0,
-              )}
-            class:groupstart={completion.type == "groupstart"}
-          >
-            <div
-              class:negative={completion.score != null && completion.score < 0}
-            >
-              <div>
-                <!-- Highlight completion letters -->
-                {#each completion.text as letter, i}
-                  {#if completion.highlightLetters != null && completion.highlightLetters.includes(i)}
-                    <b>{letter}</b>
-                  {:else}<span>{letter}</span>{/if}
-                {/each}
-              </div>
-            </div>
-            {#if completion.info != null}
-              <div class="info">{completion.info}</div>
-            {/if}
-          </div>
-        {/each}
-      {/if}
-    </div>
-  </div>
-</div>
diff --git a/src/pages/app/SearchLink.svelte b/src/pages/app/SearchLink.svelte
index e69f58929..8bf6ce10d 100644
--- a/src/pages/app/SearchLink.svelte
+++ b/src/pages/app/SearchLink.svelte
@@ -6,6 +6,14 @@
   export let link = "";
 </script>
 
+<div class="link">
+  <a href={link} target="_blank"
+    >{@html SearchIconSvg}
+    {$_("searchLink.search")}</a
+  >
+</div>
+<div class="linkcontainer" />
+
 <style lang="scss">
   .linkcontainer {
     background: white;
@@ -43,11 +51,3 @@
     }
   }
 </style>
-
-<div class="link">
-  <a href={link} target="_blank"
-    >{@html SearchIconSvg}
-    {$_("searchLink.search")}</a
-  >
-</div>
-<div class="linkcontainer" />
diff --git a/src/pages/app/UploadDialog.svelte b/src/pages/app/UploadDialog.svelte
index a8892bf1b..f489e066d 100644
--- a/src/pages/app/UploadDialog.svelte
+++ b/src/pages/app/UploadDialog.svelte
@@ -171,49 +171,6 @@
   }
 </script>
 
-<style lang="scss">
-  .actions {
-    margin: 1.5em 0;
-  }
-
-  .files {
-    display: table;
-    width: 100%;
-  }
-
-  .droparea {
-    margin: 24px 0;
-  }
-
-  .sectionbreak {
-    border-bottom: solid 1px $gray;
-    margin: 2em 0 1.5em 0;
-  }
-
-  .padder {
-    margin: 1.5em 0 2.5em 0;
-  }
-
-  .vpadded {
-    margin: 2em 0 2.5em 0;
-  }
-
-  .bottompadded {
-    margin-bottom: 25px;
-  }
-
-  p {
-    &.subtitle {
-      color: $gray;
-    }
-
-    &.danger {
-      color: $caution;
-      font-size: 13px;
-    }
-  }
-</style>
-
 <div class="mcontent">
   {#if !uploadMode}
     <div>
@@ -368,3 +325,46 @@
     </div>
   {/if}
 </div>
+
+<style lang="scss">
+  .actions {
+    margin: 1.5em 0;
+  }
+
+  .files {
+    display: table;
+    width: 100%;
+  }
+
+  .droparea {
+    margin: 24px 0;
+  }
+
+  .sectionbreak {
+    border-bottom: solid 1px $gray;
+    margin: 2em 0 1.5em 0;
+  }
+
+  .padder {
+    margin: 1.5em 0 2.5em 0;
+  }
+
+  .vpadded {
+    margin: 2em 0 2.5em 0;
+  }
+
+  .bottompadded {
+    margin-bottom: 25px;
+  }
+
+  p {
+    &.subtitle {
+      color: $gray;
+    }
+
+    &.danger {
+      color: $caution;
+      font-size: 13px;
+    }
+  }
+</style>
diff --git a/src/pages/app/accounts/AccountNavigation.svelte b/src/pages/app/accounts/AccountNavigation.svelte
index 5e7f4c9c8..712320130 100644
--- a/src/pages/app/accounts/AccountNavigation.svelte
+++ b/src/pages/app/accounts/AccountNavigation.svelte
@@ -27,6 +27,21 @@
   const getUserPromise = getUser();
 </script>
 
+<nav class="account-navigation">
+  <section class="primary">
+    {#await getUserPromise then}
+      <UserMenu {user} />
+      {#if user}
+        <OrgMenu {user} {org} />
+      {/if}
+    {/await}
+  </section>
+  <section class="secondary">
+    <LanguageMenu />
+    <HelpMenu />
+  </section>
+</nav>
+
 <style>
   .account-navigation {
     box-sizing: border-box;
@@ -43,18 +58,3 @@
     align-items: center;
   }
 </style>
-
-<nav class="account-navigation">
-  <section class="primary">
-    {#await getUserPromise then}
-      <UserMenu {user} />
-      {#if user}
-        <OrgMenu {user} {org} />
-      {/if}
-    {/await}
-  </section>
-  <section class="secondary">
-    <LanguageMenu />
-    <HelpMenu />
-  </section>
-</nav>
diff --git a/src/pages/app/accounts/HelpMenu.svelte b/src/pages/app/accounts/HelpMenu.svelte
index 2270d0cbf..317fb6d0b 100644
--- a/src/pages/app/accounts/HelpMenu.svelte
+++ b/src/pages/app/accounts/HelpMenu.svelte
@@ -18,16 +18,6 @@
   } from "svelte-octicons";
 </script>
 
-<style>
-  .icon {
-    height: 1.5rem;
-    width: 1.5rem;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-</style>
-
 <!-- Help Menu -->
 <Dropdown id="help" position="right">
   <MenuTitle slot="title" label={$_("authSection.help.title")}>
@@ -72,3 +62,13 @@
     </a>
   </Menu>
 </Dropdown>
+
+<style>
+  .icon {
+    height: 1.5rem;
+    width: 1.5rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+</style>
diff --git a/src/pages/app/accounts/LanguageMenu.svelte b/src/pages/app/accounts/LanguageMenu.svelte
index ccb1bb3f3..74af60286 100644
--- a/src/pages/app/accounts/LanguageMenu.svelte
+++ b/src/pages/app/accounts/LanguageMenu.svelte
@@ -19,16 +19,6 @@
   }
 </script>
 
-<style>
-  .icon {
-    height: 1.5rem;
-    width: 1.5rem;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-</style>
-
 {#if langs.length > 1}
   <!-- Language Menu -->
   <Dropdown id="language" position="right">
@@ -51,3 +41,13 @@
     </Menu>
   </Dropdown>
 {/if}
+
+<style>
+  .icon {
+    height: 1.5rem;
+    width: 1.5rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+</style>
diff --git a/src/pages/app/accounts/OrgMemberList.svelte b/src/pages/app/accounts/OrgMemberList.svelte
index ce1d7c237..1b4521511 100644
--- a/src/pages/app/accounts/OrgMemberList.svelte
+++ b/src/pages/app/accounts/OrgMemberList.svelte
@@ -25,6 +25,47 @@
   }
 </script>
 
+{#await promise}
+  <Loader active center pad />
+{:then users}
+  {#if users.length > 0}
+    <p class="userCount">
+      {$_("authSection.org.userCount", { values: { n: users.length } })}
+    </p>
+    <ul class="userList">
+      {#each users as user}
+        <li>
+          <Link plusReplace={true} toUrl={userUrl(user)}>
+            <div class="userListItem">
+              {#if user.avatar_url}
+                <img src={user.avatar_url} class="avatar" alt="" />
+              {:else}
+                <span class="icon"><Person16 /></span>
+              {/if}
+              <span class="name">{user.name}</span>
+              {#if user.admin_organizations.includes(orgId)}
+                <span class="badge">{$_("authSection.org.adminRole")}</span>
+              {/if}
+            </div>
+          </Link>
+        </li>
+      {/each}
+    </ul>
+  {:else}
+    <div class="empty">
+      <div class="emptyIcon"><People24 /></div>
+      <p>{$_("authSection.org.memberListEmpty")}</p>
+    </div>
+  {/if}
+{:catch}
+  <!-- Error state -->
+  <div class="error">
+    <div class="errorIcon"><Error /></div>
+    <p>{$_("authSection.org.memberListError")}</p>
+    <Button action on:click={loadUsers}>Retry</Button>
+  </div>
+{/await}
+
 <style>
   .userCount {
     font-size: 0.875em;
@@ -101,44 +142,3 @@
     width: 3em;
   }
 </style>
-
-{#await promise}
-  <Loader active center pad />
-{:then users}
-  {#if users.length > 0}
-    <p class="userCount">
-      {$_("authSection.org.userCount", { values: { n: users.length } })}
-    </p>
-    <ul class="userList">
-      {#each users as user}
-        <li>
-          <Link plusReplace={true} toUrl={userUrl(user)}>
-            <div class="userListItem">
-              {#if user.avatar_url}
-                <img src={user.avatar_url} class="avatar" alt="" />
-              {:else}
-                <span class="icon"><Person16 /></span>
-              {/if}
-              <span class="name">{user.name}</span>
-              {#if user.admin_organizations.includes(orgId)}
-                <span class="badge">{$_("authSection.org.adminRole")}</span>
-              {/if}
-            </div>
-          </Link>
-        </li>
-      {/each}
-    </ul>
-  {:else}
-    <div class="empty">
-      <div class="emptyIcon"><People24 /></div>
-      <p>{$_("authSection.org.memberListEmpty")}</p>
-    </div>
-  {/if}
-{:catch}
-  <!-- Error state -->
-  <div class="error">
-    <div class="errorIcon"><Error /></div>
-    <p>{$_("authSection.org.memberListError")}</p>
-    <Button action on:click={loadUsers}>Retry</Button>
-  </div>
-{/await}
diff --git a/src/pages/app/accounts/OrgMenu.svelte b/src/pages/app/accounts/OrgMenu.svelte
index 796880aaa..24a97497f 100644
--- a/src/pages/app/accounts/OrgMenu.svelte
+++ b/src/pages/app/accounts/OrgMenu.svelte
@@ -51,30 +51,6 @@
   let listOrgsPromise = listUserOrgs(user);
 </script>
 
-<style>
-  .orgAvatar {
-    height: 1.5rem;
-    width: 1.5rem;
-    display: block;
-  }
-  .orgIcon {
-    height: 1.5rem;
-    width: 1.5rem;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-  .helpText {
-    width: 100%;
-    font-size: 0.875em;
-    color: var(--gray);
-    margin: 0;
-  }
-  .medium-width {
-    min-width: 20rem;
-  }
-</style>
-
 {#await getOrgPromise}
   <Dropdown id="organization">
     <MenuTitle slot="title" label="Loading…">
@@ -173,3 +149,27 @@
     </Dropdown>
   {/if}
 {/await}
+
+<style>
+  .orgAvatar {
+    height: 1.5rem;
+    width: 1.5rem;
+    display: block;
+  }
+  .orgIcon {
+    height: 1.5rem;
+    width: 1.5rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .helpText {
+    width: 100%;
+    font-size: 0.875em;
+    color: var(--gray);
+    margin: 0;
+  }
+  .medium-width {
+    min-width: 20rem;
+  }
+</style>
diff --git a/src/pages/app/accounts/OrgPicker.svelte b/src/pages/app/accounts/OrgPicker.svelte
index f5bf8843c..cdc0ecc83 100644
--- a/src/pages/app/accounts/OrgPicker.svelte
+++ b/src/pages/app/accounts/OrgPicker.svelte
@@ -15,32 +15,6 @@
   export let handleChange: (org: Org) => void = () => {};
 </script>
 
-<style>
-  .container {
-    border-top: 1px solid rgba(0, 0, 0, 0.1);
-  }
-  .orgAvatar {
-    height: 1.5rem;
-    width: 1.5rem;
-    display: block;
-  }
-  .orgIcon {
-    height: 1.5rem;
-    width: 1.5rem;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-  .orgSelectLabel {
-    font-size: 0.875em;
-    color: var(--gray);
-    padding: 0 0.5rem;
-  }
-  .picker {
-    padding: 0 0.5rem;
-  }
-</style>
-
 <div class="container">
   <p class="orgSelectLabel">Switch organization</p>
   <div class="picker">
@@ -74,3 +48,29 @@
     </Dropdown>
   </div>
 </div>
+
+<style>
+  .container {
+    border-top: 1px solid rgba(0, 0, 0, 0.1);
+  }
+  .orgAvatar {
+    height: 1.5rem;
+    width: 1.5rem;
+    display: block;
+  }
+  .orgIcon {
+    height: 1.5rem;
+    width: 1.5rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .orgSelectLabel {
+    font-size: 0.875em;
+    color: var(--gray);
+    padding: 0 0.5rem;
+  }
+  .picker {
+    padding: 0 0.5rem;
+  }
+</style>
diff --git a/src/pages/app/accounts/PremiumMenu.svelte b/src/pages/app/accounts/PremiumMenu.svelte
index e756bab5a..0bb33b144 100644
--- a/src/pages/app/accounts/PremiumMenu.svelte
+++ b/src/pages/app/accounts/PremiumMenu.svelte
@@ -38,32 +38,6 @@
   } = org);
 </script>
 
-<style>
-  .premium {
-    font-weight: 600;
-  }
-  .whiteBg {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    height: 1.5rem;
-    width: 1.5rem;
-    background: var(--white, #ffffff);
-  }
-  .learnMore {
-    font-size: 0.8em;
-    color: var(--gray);
-  }
-  .learnMore:hover {
-    opacity: 0.7;
-  }
-  .heading,
-  .description {
-    margin: 0;
-    opacity: 0.8;
-  }
-</style>
-
 <Dropdown id={dropdownId} titleColor="premium">
   <span class="premium" slot="title">
     <MenuTitle label={$_("authSection.premiumUpgrade.title")}>
@@ -137,3 +111,29 @@
     <slot />
   </Menu>
 </Dropdown>
+
+<style>
+  .premium {
+    font-weight: 600;
+  }
+  .whiteBg {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 1.5rem;
+    width: 1.5rem;
+    background: var(--white, #ffffff);
+  }
+  .learnMore {
+    font-size: 0.8em;
+    color: var(--gray);
+  }
+  .learnMore:hover {
+    opacity: 0.7;
+  }
+  .heading,
+  .description {
+    margin: 0;
+    opacity: 0.8;
+  }
+</style>
diff --git a/src/pages/app/accounts/UserMenu.svelte b/src/pages/app/accounts/UserMenu.svelte
index d737d3a3c..20cf6922a 100644
--- a/src/pages/app/accounts/UserMenu.svelte
+++ b/src/pages/app/accounts/UserMenu.svelte
@@ -24,21 +24,6 @@
   }
 </script>
 
-<style>
-  .userAvatar {
-    height: 1.5rem;
-    width: 1.5rem;
-    display: block;
-  }
-  .userIcon {
-    height: 1.5rem;
-    width: 1.5rem;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-</style>
-
 {#if user}
   <Dropdown id={dropdownId}>
     <MenuTitle slot="title" label={user.name ?? user.username}>
@@ -68,3 +53,18 @@
 {:else}
   <a href={SIGN_IN_URL}>{$_("authSection.user.signIn")}</a>
 {/if}
+
+<style>
+  .userAvatar {
+    height: 1.5rem;
+    width: 1.5rem;
+    display: block;
+  }
+  .userIcon {
+    height: 1.5rem;
+    width: 1.5rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+</style>
diff --git a/src/pages/app/menus/AddonsMenu.svelte b/src/pages/app/menus/AddonsMenu.svelte
index 67c8bd71a..1d3ec2cc1 100644
--- a/src/pages/app/menus/AddonsMenu.svelte
+++ b/src/pages/app/menus/AddonsMenu.svelte
@@ -21,18 +21,6 @@
   }
 </script>
 
-<style>
-  :global(a.promo) {
-    color: var(--darkgray, rgba(0, 0, 0, 0.8));
-    font-style: italic;
-    font-size: var(--normal, 16px);
-  }
-
-  hr {
-    margin: 0.5em 21px;
-  }
-</style>
-
 <Menu>
   {#each alphabetizedAddons as addon}
     <MenuItem href={addonURL(addon)}>
@@ -61,3 +49,15 @@
     {$_("addonsMenu.learnMore")}
   </MenuItem>
 </Menu>
+
+<style>
+  :global(a.promo) {
+    color: var(--darkgray, rgba(0, 0, 0, 0.8));
+    font-style: italic;
+    font-size: var(--normal, 16px);
+  }
+
+  hr {
+    margin: 0.5em 21px;
+  }
+</style>
diff --git a/src/pages/app/menus/EditMenu.svelte b/src/pages/app/menus/EditMenu.svelte
index c8c659edb..53d4c210b 100644
--- a/src/pages/app/menus/EditMenu.svelte
+++ b/src/pages/app/menus/EditMenu.svelte
@@ -53,16 +53,6 @@
   }
 </script>
 
-<style lang="scss">
-  :global(.beta) {
-    color: $gray;
-    font-size: 11px;
-    vertical-align: top;
-    letter-spacing: 0.4px;
-    margin-left: 1px;
-  }
-</style>
-
 <Menu>
   <MenuItem on:click={() => editDocumentInfoSelected()}>
     {$_("editMenu.editDocInfo")}
@@ -110,3 +100,13 @@
     </MenuItem>
   {/if}
 </Menu>
+
+<style lang="scss">
+  :global(.beta) {
+    color: $gray;
+    font-size: 11px;
+    vertical-align: top;
+    letter-spacing: 0.4px;
+    margin-left: 1px;
+  }
+</style>
diff --git a/src/pages/app/menus/ProjectMenuItem.svelte b/src/pages/app/menus/ProjectMenuItem.svelte
index aff533b6e..cd88a02f7 100644
--- a/src/pages/app/menus/ProjectMenuItem.svelte
+++ b/src/pages/app/menus/ProjectMenuItem.svelte
@@ -30,14 +30,6 @@
   }
 </script>
 
-<style>
-  .scope {
-    color: var(--gray);
-    float: right;
-    margin-left: 7px;
-  }
-</style>
-
 <MenuItem on:click={handleClick}>
   <Tooltip delay={500} {caption}>
     {project.title}
@@ -46,3 +38,11 @@
     </span>
   </Tooltip>
 </MenuItem>
+
+<style>
+  .scope {
+    color: var(--gray);
+    float: right;
+    margin-left: 7px;
+  }
+</style>
diff --git a/src/pages/app/menus/ProjectsMenu.svelte b/src/pages/app/menus/ProjectsMenu.svelte
index 201acebe2..cf58d3656 100644
--- a/src/pages/app/menus/ProjectsMenu.svelte
+++ b/src/pages/app/menus/ProjectsMenu.svelte
@@ -18,14 +18,6 @@
   $: alphabetizedProjects = sort($projects.addRemoveableProjects);
 </script>
 
-<style lang="scss">
-  .info {
-    color: $gray;
-    font-style: italic;
-    font-size: $small;
-  }
-</style>
-
 <Menu>
   <MenuItem primary={true} on:click={newProject}>
     {$_("projectsMenu.newProject")}
@@ -47,3 +39,11 @@
     </MenuItem>
   {/if}
 </Menu>
+
+<style lang="scss">
+  .info {
+    color: $gray;
+    font-style: italic;
+    font-size: $small;
+  }
+</style>
diff --git a/src/pages/app/sidebar/Project.svelte b/src/pages/app/sidebar/Project.svelte
index 17886fa93..c0853e016 100644
--- a/src/pages/app/sidebar/Project.svelte
+++ b/src/pages/app/sidebar/Project.svelte
@@ -9,6 +9,20 @@
   export let project;
 </script>
 
+<Link toUrl={projectUrl(project)}>
+  <div class="project">
+    <span class="title">{project.title}</span>
+    {#if project.editAccess}
+      <button
+        class="edit"
+        on:click|stopPropagation|preventDefault={() => editProject(project)}
+      >
+        {@html pencilSvg}
+      </button>
+    {/if}
+  </div>
+</Link>
+
 <style>
   .project {
     padding: 11px 25px 11px 0;
@@ -47,17 +61,3 @@
     word-break: break-word;
   }
 </style>
-
-<Link toUrl={projectUrl(project)}>
-  <div class="project">
-    <span class="title">{project.title}</span>
-    {#if project.editAccess}
-      <button
-        class="edit"
-        on:click|stopPropagation|preventDefault={() => editProject(project)}
-      >
-        {@html pencilSvg}
-      </button>
-    {/if}
-  </div>
-</Link>
diff --git a/src/pages/app/sidebar/ProjectFilters.svelte b/src/pages/app/sidebar/ProjectFilters.svelte
index 6b8dca4f2..b2a72005c 100644
--- a/src/pages/app/sidebar/ProjectFilters.svelte
+++ b/src/pages/app/sidebar/ProjectFilters.svelte
@@ -5,6 +5,29 @@
   import { _ } from "svelte-i18n";
 </script>
 
+<div class="linksection">
+  <Link plusReplace={true} toUrl={allDocumentsUrl()}>
+    <div class="link">{$_("projects.allDocuments")}</div>
+  </Link>
+  {#if $orgsAndUsers.me !== null}
+    <Link plusReplace={true} toUrl={userUrl($orgsAndUsers.me)}>
+      <div class="link">{$_("projects.yourDocuments")}</div>
+    </Link>
+    <Link plusReplace={true} toUrl={userUrl($orgsAndUsers.me, true)}>
+      <div class="link">{$_("projects.yourPubDocuments")}</div>
+    </Link>
+    {#if $orgsAndUsers.me.organization != null && !$orgsAndUsers.me.organization.individual}
+      <Link plusReplace={true} toUrl={orgUrl($orgsAndUsers.me.organization)}>
+        <div class="link">
+          {$_("projects.orgDocuments", {
+            values: { name: $orgsAndUsers.me.organization.name },
+          })}
+        </div>
+      </Link>
+    {/if}
+  {/if}
+</div>
+
 <style>
   .linksection {
     margin: 20px 0 40px 0;
@@ -29,26 +52,3 @@
     }
   }
 </style>
-
-<div class="linksection">
-  <Link plusReplace={true} toUrl={allDocumentsUrl()}>
-    <div class="link">{$_("projects.allDocuments")}</div>
-  </Link>
-  {#if $orgsAndUsers.me !== null}
-    <Link plusReplace={true} toUrl={userUrl($orgsAndUsers.me)}>
-      <div class="link">{$_("projects.yourDocuments")}</div>
-    </Link>
-    <Link plusReplace={true} toUrl={userUrl($orgsAndUsers.me, true)}>
-      <div class="link">{$_("projects.yourPubDocuments")}</div>
-    </Link>
-    {#if $orgsAndUsers.me.organization != null && !$orgsAndUsers.me.organization.individual}
-      <Link plusReplace={true} toUrl={orgUrl($orgsAndUsers.me.organization)}>
-        <div class="link">
-          {$_("projects.orgDocuments", {
-            values: { name: $orgsAndUsers.me.organization.name },
-          })}
-        </div>
-      </Link>
-    {/if}
-  {/if}
-</div>
diff --git a/src/pages/app/sidebar/Projects.svelte b/src/pages/app/sidebar/Projects.svelte
index b00e07a78..f83c2606d 100644
--- a/src/pages/app/sidebar/Projects.svelte
+++ b/src/pages/app/sidebar/Projects.svelte
@@ -20,6 +20,26 @@
   $: alphabetizedProjects = sort($projects.projects);
 </script>
 
+<details class="projects">
+  <summary class="sticky">
+    <div class="titlesection">
+      <Title small={true}>{$_("projects.header")}</Title>
+      <Button on:click={newProject} small={true}
+        >{$_("projects.newProject")}</Button
+      >
+    </div>
+  </summary>
+  <div class="projectcontainer">
+    {#if alphabetizedProjects.length > 0}
+      {#each alphabetizedProjects as project}
+        <Project {project} />
+      {/each}
+    {:else}
+      <small>{$_("projects.createProject")}</small>
+    {/if}
+  </div>
+</details>
+
 <style>
   .projects {
     padding: 20px 25px;
@@ -51,23 +71,3 @@
     display: block;
   }
 </style>
-
-<details class="projects">
-  <summary class="sticky">
-    <div class="titlesection">
-      <Title small={true}>{$_("projects.header")}</Title>
-      <Button on:click={newProject} small={true}
-        >{$_("projects.newProject")}</Button
-      >
-    </div>
-  </summary>
-  <div class="projectcontainer">
-    {#if alphabetizedProjects.length > 0}
-      {#each alphabetizedProjects as project}
-        <Project {project} />
-      {/each}
-    {:else}
-      <small>{$_("projects.createProject")}</small>
-    {/if}
-  </div>
-</details>
diff --git a/src/pages/app/sidebar/Sidebar.svelte b/src/pages/app/sidebar/Sidebar.svelte
index 981382a04..51f447d24 100644
--- a/src/pages/app/sidebar/Sidebar.svelte
+++ b/src/pages/app/sidebar/Sidebar.svelte
@@ -17,6 +17,23 @@
   export let expanded;
 </script>
 
+<aside class="sidebar" class:expanded>
+  <header>
+    <Hamburger on:toggle={(e) => dispatch("retractSidebar")} />
+    <Logo />
+  </header>
+
+  <ProjectFilters />
+
+  {#if $orgsAndUsers.me !== null}
+    <Projects on:retractSidebar />
+    <AddonSidebar />
+  {/if}
+
+  <!-- todo get rid of this -->
+  <div class="sidebarbg" />
+</aside>
+
 <style>
   .sidebar {
     position: absolute;
@@ -62,20 +79,3 @@
     }
   }
 </style>
-
-<aside class="sidebar" class:expanded>
-  <header>
-    <Hamburger on:toggle={(e) => dispatch("retractSidebar")} />
-    <Logo />
-  </header>
-
-  <ProjectFilters />
-
-  {#if $orgsAndUsers.me !== null}
-    <Projects on:retractSidebar />
-    <AddonSidebar />
-  {/if}
-
-  <!-- todo get rid of this -->
-  <div class="sidebarbg" />
-</aside>
diff --git a/src/pages/embed/note/Note.svelte b/src/pages/embed/note/Note.svelte
index 5113e4a24..21b022bad 100644
--- a/src/pages/embed/note/Note.svelte
+++ b/src/pages/embed/note/Note.svelte
@@ -62,118 +62,6 @@
   });
 </script>
 
-<style lang="scss">
-  .DC-note {
-    position: relative;
-    padding: 0 0.5em;
-    border: 1px solid #ebebeb;
-    box-shadow: inset 0 0 40px #505050;
-    font: 400 10pt/14pt -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI",
-      Roboto, "Helvetica Neue", Arial, sans-serif;
-    color: black;
-    background-color: white;
-    background-size: 100% auto;
-    background-repeat: no-repeat;
-    background-position: center center;
-
-    a {
-      color: #5a76a0;
-      text-decoration: underline;
-    }
-
-    > * {
-      position: relative;
-      z-index: 1;
-    }
-
-    .DC-note-header,
-    .DC-note-body,
-    :global(.DC-note-credit) {
-      margin: 10px auto;
-      padding: 0 5px;
-      max-width: 600px;
-    }
-
-    .DC-note-title {
-      font-weight: bold;
-    }
-
-    .DC-note-image-max-bounds {
-      box-sizing: border-box;
-      border-radius: $radius;
-      box-shadow: 0 0 7px rgba(0, 0, 0, 0.25);
-      position: relative;
-      font-size: 0;
-      overflow: hidden;
-      margin: 10px auto;
-
-      &.public {
-        border: $annotationBorderWidth solid $annotationBorder;
-      }
-
-      &.organization {
-        border: $annotationBorderWidth solid $organizationAnnotation;
-      }
-
-      &.private {
-        border: $annotationBorderWidth solid $privateAnnotation;
-      }
-
-      .DC-note-image-aspect-ratio {
-        position: relative;
-        overflow: hidden;
-        height: 0;
-        max-width: 100%;
-
-        .DC-note-image-link {
-          position: absolute;
-          width: 100%;
-          height: 100%;
-          top: 0;
-          left: 0;
-          right: 0;
-          bottom: 0;
-          overflow: hidden;
-          display: block;
-
-          :global(img) {
-            margin: 0 !important;
-            border: 0 !important;
-            outline: 0 !important;
-            max-width: none !important;
-            max-height: none !important;
-            display: block !important;
-            position: absolute;
-            height: auto;
-          }
-        }
-      }
-    }
-
-    .DC-note-credit {
-      font-size: 0.9em;
-    }
-
-    :global(.DC-note-logotype-link) {
-      font-weight: 700;
-      font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI",
-        Roboto, "Helvetica Neue", Arial, sans-serif;
-    }
-
-    .DC-note-background-fader {
-      position: absolute;
-      width: 100%;
-      height: 100%;
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
-      z-index: 0;
-      background-color: rgba(255, 255, 255, 0.93);
-    }
-  }
-</style>
-
 <svelte:head>
   {#if doc != null && note != null && canonicalNoteUrl != "" && title != ""}
     <!-- Insert canonical URL -->
@@ -283,3 +171,122 @@
     {/if}
   </div>
 {/if}
+
+<style lang="scss">
+  .DC-note {
+    position: relative;
+    padding: 0 0.5em;
+    border: 1px solid #ebebeb;
+    box-shadow: inset 0 0 40px #505050;
+    font:
+      400 10pt/14pt -apple-system,
+      system-ui,
+      BlinkMacSystemFont,
+      "Segoe UI",
+      Roboto,
+      "Helvetica Neue",
+      Arial,
+      sans-serif;
+    color: black;
+    background-color: white;
+    background-size: 100% auto;
+    background-repeat: no-repeat;
+    background-position: center center;
+
+    a {
+      color: #5a76a0;
+      text-decoration: underline;
+    }
+
+    > * {
+      position: relative;
+      z-index: 1;
+    }
+
+    .DC-note-header,
+    .DC-note-body,
+    :global(.DC-note-credit) {
+      margin: 10px auto;
+      padding: 0 5px;
+      max-width: 600px;
+    }
+
+    .DC-note-title {
+      font-weight: bold;
+    }
+
+    .DC-note-image-max-bounds {
+      box-sizing: border-box;
+      border-radius: $radius;
+      box-shadow: 0 0 7px rgba(0, 0, 0, 0.25);
+      position: relative;
+      font-size: 0;
+      overflow: hidden;
+      margin: 10px auto;
+
+      &.public {
+        border: $annotationBorderWidth solid $annotationBorder;
+      }
+
+      &.organization {
+        border: $annotationBorderWidth solid $organizationAnnotation;
+      }
+
+      &.private {
+        border: $annotationBorderWidth solid $privateAnnotation;
+      }
+
+      .DC-note-image-aspect-ratio {
+        position: relative;
+        overflow: hidden;
+        height: 0;
+        max-width: 100%;
+
+        .DC-note-image-link {
+          position: absolute;
+          width: 100%;
+          height: 100%;
+          top: 0;
+          left: 0;
+          right: 0;
+          bottom: 0;
+          overflow: hidden;
+          display: block;
+
+          :global(img) {
+            margin: 0 !important;
+            border: 0 !important;
+            outline: 0 !important;
+            max-width: none !important;
+            max-height: none !important;
+            display: block !important;
+            position: absolute;
+            height: auto;
+          }
+        }
+      }
+    }
+
+    .DC-note-credit {
+      font-size: 0.9em;
+    }
+
+    :global(.DC-note-logotype-link) {
+      font-weight: 700;
+      font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI",
+        Roboto, "Helvetica Neue", Arial, sans-serif;
+    }
+
+    .DC-note-background-fader {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      z-index: 0;
+      background-color: rgba(255, 255, 255, 0.93);
+    }
+  }
+</style>
diff --git a/src/pages/embed/page/Annotation.svelte b/src/pages/embed/page/Annotation.svelte
index a5af4715f..dd94e4951 100644
--- a/src/pages/embed/page/Annotation.svelte
+++ b/src/pages/embed/page/Annotation.svelte
@@ -47,6 +47,19 @@
     : `top:${note.y2 * 100}%`;
 </script>
 
+<div
+  class="dc-embed-annotation"
+  bind:this={annotationElem}
+  style="{leftRightStyle};{topDownStyle}"
+>
+  <h1>
+    <a href={noteUrl} target="_blank">{note.title}</a>
+  </h1>
+  <div class="content">
+    {@html DomPurify.sanitize(note.content)}
+  </div>
+</div>
+
 <style lang="scss">
   .dc-embed-annotation {
     max-height: 156px;
@@ -79,16 +92,3 @@
     }
   }
 </style>
-
-<div
-  class="dc-embed-annotation"
-  bind:this={annotationElem}
-  style="{leftRightStyle};{topDownStyle}"
->
-  <h1>
-    <a href={noteUrl} target="_blank">{note.title}</a>
-  </h1>
-  <div class="content">
-    {@html DomPurify.sanitize(note.content)}
-  </div>
-</div>
diff --git a/src/pages/embed/page/Note.svelte b/src/pages/embed/page/Note.svelte
index cf3621216..a081508d4 100644
--- a/src/pages/embed/page/Note.svelte
+++ b/src/pages/embed/page/Note.svelte
@@ -3,6 +3,18 @@
   export let active = false;
 </script>
 
+<div
+  class="dc-embed-note"
+  class:public={note.access == "public"}
+  class:organization={note.access == "organization"}
+  class:private={note.access == "private"}
+  class:active
+  style="left: {note.x1 * 100}%; top: {note.y1 * 100}%; right: {(1 - note.x2) *
+    100}%;
+  bottom: {(1 - note.y2) * 100}%"
+  on:click
+/>
+
 <style lang="scss">
   .dc-embed-note {
     display: inline-block;
@@ -36,15 +48,3 @@
     }
   }
 </style>
-
-<div
-  class="dc-embed-note"
-  class:public={note.access == "public"}
-  class:organization={note.access == "organization"}
-  class:private={note.access == "private"}
-  class:active
-  style="left: {note.x1 * 100}%; top: {note.y1 * 100}%; right: {(1 - note.x2) *
-    100}%;
-  bottom: {(1 - note.y2) * 100}%"
-  on:click
-/>
diff --git a/src/pages/embed/page/Page.svelte b/src/pages/embed/page/Page.svelte
index d2aca612a..f7a9f9357 100644
--- a/src/pages/embed/page/Page.svelte
+++ b/src/pages/embed/page/Page.svelte
@@ -68,50 +68,6 @@
   }
 </script>
 
-<style lang="scss">
-  .dc-embed {
-    font-size: 10pt;
-    max-width: 600px;
-    background: rgb(244, 244, 244);
-    padding: 18px 20px;
-    box-sizing: border-box;
-    border: solid 1px gainsboro;
-    border-radius: $radius;
-
-    a {
-      color: #5a76a0;
-      text-decoration: underline;
-    }
-
-    :global(img) {
-      max-width: 100%;
-      height: auto;
-      margin: 0;
-      border: 1px solid #ccc;
-      -webkit-box-sizing: border-box;
-      box-sizing: border-box;
-      clear: both;
-    }
-
-    .dc-page {
-      font-size: 14px;
-      line-height: 18px;
-    }
-
-    .dc-embed-container {
-      position: relative;
-      line-height: 0;
-      margin: 10px 0;
-    }
-
-    .dc-embed-shim {
-      position: absolute;
-      background: rgba(0, 0, 0, 0.4);
-      cursor: pointer;
-    }
-  }
-</style>
-
 <svelte:head>
   {#if doc != null && canonicalPageUrl != "" && title != ""}
     <!-- Insert canonical URL -->
@@ -225,3 +181,47 @@
     </div>
   {/if}
 </div>
+
+<style lang="scss">
+  .dc-embed {
+    font-size: 10pt;
+    max-width: 600px;
+    background: rgb(244, 244, 244);
+    padding: 18px 20px;
+    box-sizing: border-box;
+    border: solid 1px gainsboro;
+    border-radius: $radius;
+
+    a {
+      color: #5a76a0;
+      text-decoration: underline;
+    }
+
+    :global(img) {
+      max-width: 100%;
+      height: auto;
+      margin: 0;
+      border: 1px solid #ccc;
+      -webkit-box-sizing: border-box;
+      box-sizing: border-box;
+      clear: both;
+    }
+
+    .dc-page {
+      font-size: 14px;
+      line-height: 18px;
+    }
+
+    .dc-embed-container {
+      position: relative;
+      line-height: 0;
+      margin: 10px 0;
+    }
+
+    .dc-embed-shim {
+      position: absolute;
+      background: rgba(0, 0, 0, 0.4);
+      cursor: pointer;
+    }
+  }
+</style>
diff --git a/src/pages/entities/Entities.svelte b/src/pages/entities/Entities.svelte
index 35599b710..1abf017b1 100644
--- a/src/pages/entities/Entities.svelte
+++ b/src/pages/entities/Entities.svelte
@@ -158,115 +158,6 @@
     entitiesByCategory == null ? [] : Object.keys(entitiesByCategory).sort();
 </script>
 
-<style lang="scss">
-  p {
-    max-width: 33em;
-  }
-
-  a {
-    color: $primary;
-  }
-
-  .highlight {
-    background: rgb(250, 244, 208);
-  }
-
-  .body {
-    margin: 20px;
-  }
-
-  .categories {
-    margin: 0 -10px;
-  }
-
-  .category {
-    border: solid 1px gainsboro;
-    margin: 10px;
-    display: inline-block;
-    vertical-align: top;
-
-    .categorytitle {
-      font-weight: bold;
-      padding: 6px 10px;
-    }
-
-    .entity {
-      padding: 6px 10px;
-      cursor: pointer;
-
-      .subtitle {
-        color: $gray;
-        font-weight: 12px;
-      }
-
-      &:hover {
-        background: $primary;
-        color: white;
-
-        .subtitle {
-          color: $light-gray;
-
-          a {
-            color: white;
-
-            &:hover {
-              text-decoration: underline;
-            }
-          }
-        }
-      }
-    }
-  }
-
-  .paginator {
-    .paginate {
-      color: $searchSpecial;
-      cursor: pointer;
-      user-select: none;
-
-      &:hover {
-        opacity: 0.8;
-      }
-    }
-  }
-
-  .close {
-    @include buttonLike;
-    display: inline-block;
-    margin-left: 5px;
-  }
-
-  summary {
-    @include buttonLike;
-    outline: none;
-    margin-left: 8px;
-  }
-
-  .filters {
-    margin-bottom: 20px;
-    display: inline-block;
-    border: solid 1px gainsboro;
-    padding: 20px 20px 20px 20px;
-  }
-
-  .filtergroup {
-    display: inline-block;
-    vertical-align: top;
-    margin-right: 30px;
-
-    h3 {
-      margin-bottom: 0.5em;
-    }
-
-    .action {
-      color: $primary;
-      font-size: 13px;
-      @include buttonLike;
-      margin: 0.5em 0;
-    }
-  }
-</style>
-
 <div class="body">
   <p>
     <Link back={true} color={true}>{$_("entities.back")}</Link>
@@ -532,3 +423,112 @@
     {/if}
   {:else}{$_("common.loading")}{/if}
 </div>
+
+<style lang="scss">
+  p {
+    max-width: 33em;
+  }
+
+  a {
+    color: $primary;
+  }
+
+  .highlight {
+    background: rgb(250, 244, 208);
+  }
+
+  .body {
+    margin: 20px;
+  }
+
+  .categories {
+    margin: 0 -10px;
+  }
+
+  .category {
+    border: solid 1px gainsboro;
+    margin: 10px;
+    display: inline-block;
+    vertical-align: top;
+
+    .categorytitle {
+      font-weight: bold;
+      padding: 6px 10px;
+    }
+
+    .entity {
+      padding: 6px 10px;
+      cursor: pointer;
+
+      .subtitle {
+        color: $gray;
+        font-weight: 12px;
+      }
+
+      &:hover {
+        background: $primary;
+        color: white;
+
+        .subtitle {
+          color: $light-gray;
+
+          a {
+            color: white;
+
+            &:hover {
+              text-decoration: underline;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .paginator {
+    .paginate {
+      color: $searchSpecial;
+      cursor: pointer;
+      user-select: none;
+
+      &:hover {
+        opacity: 0.8;
+      }
+    }
+  }
+
+  .close {
+    @include buttonLike;
+    display: inline-block;
+    margin-left: 5px;
+  }
+
+  summary {
+    @include buttonLike;
+    outline: none;
+    margin-left: 8px;
+  }
+
+  .filters {
+    margin-bottom: 20px;
+    display: inline-block;
+    border: solid 1px gainsboro;
+    padding: 20px 20px 20px 20px;
+  }
+
+  .filtergroup {
+    display: inline-block;
+    vertical-align: top;
+    margin-right: 30px;
+
+    h3 {
+      margin-bottom: 0.5em;
+    }
+
+    .action {
+      color: $primary;
+      font-size: 13px;
+      @include buttonLike;
+      margin: 0.5em 0;
+    }
+  }
+</style>
diff --git a/src/pages/home/HomeTemplate.svelte b/src/pages/home/HomeTemplate.svelte
index 5ad1e7e4c..0507f9084 100644
--- a/src/pages/home/HomeTemplate.svelte
+++ b/src/pages/home/HomeTemplate.svelte
@@ -26,6 +26,87 @@
   export let showLogin = true;
 </script>
 
+<Loader active={$auth.signingIn}>
+  <div class="container">
+    <header>
+      <div class="headercontents">
+        <div class="logo">
+          <Link to="app">
+            {@html mastLogoSvg}
+          </Link>
+        </div>
+        {#if showLogin}
+          <div class="narrowhide">
+            {#if $orgsAndUsers.me != null}
+              <div class="signupcontainer">
+                <div class="supplemental">
+                  {$_("homeTemplate.signedIn", {
+                    values: { name: $orgsAndUsers.me.name },
+                  })}
+                </div>
+                <div class="signin">
+                  <a href={SIGN_OUT_URL}>{$_("homeTemplate.signOut")}</a>
+                </div>
+                <Link to="app">
+                  <Button>{$_("homeTemplate.goToApp")}</Button>
+                </Link>
+              </div>
+            {:else}
+              <div class="signupcontainer">
+                <div class="signin">
+                  <a href={SIGN_IN_URL}>{$_("homeTemplate.signIn")}</a>
+                </div>
+                <a href={SIGN_UP_URL}>
+                  <Button>{$_("homeTemplate.signUp")}</Button>
+                </a>
+              </div>
+            {/if}
+          </div>
+        {/if}
+      </div>
+      {#if showLogin}
+        <div class="narrowshow">
+          {#if $orgsAndUsers.me != null}
+            <div class="signupcontainer">
+              <div class="supplemental">
+                {$_("homeTemplate.signedIn", {
+                  values: { name: $orgsAndUsers.me.name },
+                })}
+              </div>
+              <div class="signin">
+                <a href={SIGN_OUT_URL}>{$_("homeTemplate.signOut")}</a>
+              </div>
+              <Link to="app">
+                <Button>{$_("homeTemplate.goToApp")}</Button>
+              </Link>
+            </div>
+          {:else}
+            <div class="signupcontainer">
+              <div class="signin">
+                <a href={SIGN_IN_URL}>{$_("homeTemplate.signIn")}</a>
+              </div>
+              <a href={SIGN_UP_URL}>
+                <Button>{$_("homeTemplate.signUp")}</Button>
+              </a>
+            </div>
+          {/if}
+        </div>
+      {/if}
+    </header>
+    {#if showMast}
+      <div class="mastcontainer">
+        {@html mastheadSvg}
+        {@html mastheadResponsiveSvg}
+      </div>
+    {/if}
+    <div class="content">
+      <slot />
+    </div>
+
+    <footer />
+  </div>
+</Loader>
+
 <style>
   :global(.masthead) {
     width: 100%;
@@ -170,84 +251,3 @@
     width: 100%;
   }
 </style>
-
-<Loader active={$auth.signingIn}>
-  <div class="container">
-    <header>
-      <div class="headercontents">
-        <div class="logo">
-          <Link to="app">
-            {@html mastLogoSvg}
-          </Link>
-        </div>
-        {#if showLogin}
-          <div class="narrowhide">
-            {#if $orgsAndUsers.me != null}
-              <div class="signupcontainer">
-                <div class="supplemental">
-                  {$_("homeTemplate.signedIn", {
-                    values: { name: $orgsAndUsers.me.name },
-                  })}
-                </div>
-                <div class="signin">
-                  <a href={SIGN_OUT_URL}>{$_("homeTemplate.signOut")}</a>
-                </div>
-                <Link to="app">
-                  <Button>{$_("homeTemplate.goToApp")}</Button>
-                </Link>
-              </div>
-            {:else}
-              <div class="signupcontainer">
-                <div class="signin">
-                  <a href={SIGN_IN_URL}>{$_("homeTemplate.signIn")}</a>
-                </div>
-                <a href={SIGN_UP_URL}>
-                  <Button>{$_("homeTemplate.signUp")}</Button>
-                </a>
-              </div>
-            {/if}
-          </div>
-        {/if}
-      </div>
-      {#if showLogin}
-        <div class="narrowshow">
-          {#if $orgsAndUsers.me != null}
-            <div class="signupcontainer">
-              <div class="supplemental">
-                {$_("homeTemplate.signedIn", {
-                  values: { name: $orgsAndUsers.me.name },
-                })}
-              </div>
-              <div class="signin">
-                <a href={SIGN_OUT_URL}>{$_("homeTemplate.signOut")}</a>
-              </div>
-              <Link to="app">
-                <Button>{$_("homeTemplate.goToApp")}</Button>
-              </Link>
-            </div>
-          {:else}
-            <div class="signupcontainer">
-              <div class="signin">
-                <a href={SIGN_IN_URL}>{$_("homeTemplate.signIn")}</a>
-              </div>
-              <a href={SIGN_UP_URL}>
-                <Button>{$_("homeTemplate.signUp")}</Button>
-              </a>
-            </div>
-          {/if}
-        </div>
-      {/if}
-    </header>
-    {#if showMast}
-      <div class="mastcontainer">
-        {@html mastheadSvg}
-        {@html mastheadResponsiveSvg}
-      </div>
-    {/if}
-    <div class="content">
-      <slot />
-    </div>
-
-    <footer />
-  </div>
-</Loader>
diff --git a/src/pages/viewer/AllText.svelte b/src/pages/viewer/AllText.svelte
index 582a4885b..b3ef89f5d 100644
--- a/src/pages/viewer/AllText.svelte
+++ b/src/pages/viewer/AllText.svelte
@@ -45,6 +45,24 @@
   }
 </script>
 
+<div class="doc" bind:this={docElem}>
+  {#each pages as page, i}
+    <div class="page">
+      <div class="numbercontainer">
+        <div id={i + 1} class="number" use:showIfFullyVisible>
+          <a href={`#${i + 1}`}>{$_("document.pageAbbrev")}&nbsp;{i + 1}</a>
+        </div>
+      </div>
+      <TextPage
+        text={page.contents}
+        highlights={$layout.searchHighlights != null
+          ? $layout.searchHighlights[i]
+          : null}
+      />
+    </div>
+  {/each}
+</div>
+
 <style lang="scss">
   .doc {
     margin-bottom: 30px;
@@ -82,21 +100,3 @@
     }
   }
 </style>
-
-<div class="doc" bind:this={docElem}>
-  {#each pages as page, i}
-    <div class="page">
-      <div class="numbercontainer">
-        <div id={i + 1} class="number" use:showIfFullyVisible>
-          <a href={`#${i + 1}`}>{$_("document.pageAbbrev")}&nbsp;{i + 1}</a>
-        </div>
-      </div>
-      <TextPage
-        text={page.contents}
-        highlights={$layout.searchHighlights != null
-          ? $layout.searchHighlights[i]
-          : null}
-      />
-    </div>
-  {/each}
-</div>
diff --git a/src/pages/viewer/Annotation.svelte b/src/pages/viewer/Annotation.svelte
index 0063303c0..13449918c 100644
--- a/src/pages/viewer/Annotation.svelte
+++ b/src/pages/viewer/Annotation.svelte
@@ -97,10 +97,10 @@
     y1 == null || y2 == null
       ? "none"
       : y1 < ANNOTATION_PADDING
-      ? "down"
-      : y2 > $doc.docHeight - ANNOTATION_PADDING
-      ? "up"
-      : "none";
+        ? "down"
+        : y2 > $doc.docHeight - ANNOTATION_PADDING
+          ? "up"
+          : "none";
 
   $: noteUrl = page.document.noteHashUrl(annotation);
 
@@ -169,6 +169,217 @@
   }
 </script>
 
+<div
+  class="annotation"
+  class:grayed
+  class:behind
+  class:pagenote={pageNote}
+  class:up={shift == "up"}
+  class:public={access == "public"}
+  class:organization={access == "organization"}
+  class:private={access == "private"}
+  class:disabled={$loading}
+  on:mousedown|stopPropagation
+  style={shift == "up" || pageNote
+    ? ""
+    : `top: ${annotation.y1 * 100}%; height: ${annotation.height * 100}%`}
+>
+  <header
+    bind:this={annotationElem}
+    bind:offsetHeight={headerHeight}
+    class:showimage={showImageOnPageNote}
+    class:hidden={shift == "down"}
+  >
+    {#if !pageNote}
+      <div class="closeflag">
+        <button class="closer buttonLike" on:click={cancelAnnotation}>
+          {@html closeInlineSvg}
+        </button>
+      </div>
+    {/if}
+    <Loader active={$loading} transparent={true}>
+      <!-- Title -->
+      {#if editMode}
+        <input
+          maxlength={noteTitleLimit}
+          bind:this={titleInput}
+          placeholder={$_("annotation.title")}
+          bind:value={title}
+        />
+      {:else}
+        <h3>
+          {#if titlePassages}
+            {#each titlePassages as passage}
+              <h4 class="highlight">
+                {#each passage as term}
+                  {#if term.type == "highlight"}
+                    <span class="passage highlighted">{term.text}</span>
+                  {:else}
+                    <span class="passage">{term.text}</span>
+                  {/if}
+                {/each}
+              </h4>
+            {/each}
+          {:else}
+            {annotation.title}
+          {/if}
+          {#if !compact}
+            <a class="link" href={noteUrl}>
+              {@html simpleLinkSvg}
+            </a>
+            {#if page.document.editAccess}
+              <button class="pencil" on:click={() => (editOverride = true)}>
+                {@html pencilSvg}
+              </button>
+            {/if}
+          {/if}
+        </h3>
+      {/if}
+    </Loader>
+  </header>
+  {#if shift == "down"}
+    <header />
+  {/if}
+  {#if !pageNote || showImageOnPageNote}
+    <div class="excerpt">
+      <div
+        class="body"
+        style={showImageOnPageNote
+          ? `height: 0; padding-top: ${annotation.height * aspect * 100}%`
+          : ""}
+      >
+        <div
+          style="margin-top: {-annotation.y1 * aspect * 100 -
+            (showImageOnPageNote ? annotation.height * aspect * 100 : 0)}%"
+        >
+          <ProgressiveImage
+            alt="Page {page.pageNumber + 1} of {page.document.title}"
+            {width}
+            aspect={page.aspect}
+            {page}
+          />
+          <!-- Faded flanks -->
+          <div
+            class="faded left"
+            class:nobottom={showImageOnPageNote}
+            style="left: 0; width: {annotation.x1 * 100}%"
+          />
+          <div
+            class="faded right"
+            class:nobottom={showImageOnPageNote}
+            style="left: {annotation.x2 * 100}%; right: 0"
+          />
+        </div>
+      </div>
+    </div>
+  {/if}
+  <footer
+    bind:offsetHeight={footerHeight}
+    bind:offsetWidth={footerWidth}
+    class:showimage={showImageOnPageNote}
+    class:capsize={pageNote && !editMode}
+  >
+    {#if shift == "down"}
+      <div class="closeflag">
+        <button class="closer" on:click={cancelAnnotation}>
+          {@html closeInlineSvg}
+        </button>
+      </div>
+      <Loader active={$loading} transparent={true}>
+        <!-- Title -->
+        {#if editMode}
+          <input
+            maxlength={noteTitleLimit}
+            bind:this={titleInput}
+            placeholder={$_("annotation.title")}
+            bind:value={title}
+            class="padded"
+          />
+        {:else}
+          <h3>
+            {annotation.title}
+            <a class="link" href={noteUrl}>
+              {@html simpleLinkSvg}
+            </a>
+            {#if page.document.editAccess}
+              <button class="pencil" on:click={() => (editOverride = true)}>
+                {@html pencilSvg}
+              </button>
+            {/if}
+          </h3>
+        {/if}
+      </Loader>
+    {/if}
+
+    <!-- Description/Content -->
+    {#if editMode}
+      <HtmlEditor
+        maxlength={noteContentLimit}
+        placeholder={$_("annotation.description")}
+        bind:value={description}
+      />
+    {:else if hlContent}
+      <span class="highlight">
+        <HtmlField content={hlContent} />
+      </span>
+    {:else}
+      <HtmlField content={annotation.content} />
+    {/if}
+    <!-- Footer content -->
+    {#if editMode}
+      <AccessToggle
+        stacked={footerWidth < 350}
+        bind:access
+        editAccess={page.document.editAccess}
+      />
+      <div class="buttonpadded">
+        <Button
+          on:click={createOrUpdateAnnotation}
+          disabledReason={titleValid
+            ? changeValid
+              ? null
+              : $_("annotation.unchanged")
+            : $_("annotation.noTitle")}
+        >
+          {#if editOverride}{$_("dialog.update")}{:else}{$_("dialog.save")}{/if}
+        </Button>
+        {#if editOverride}
+          <Button danger={true} on:click={handleDelete}
+            >{$_("dialog.delete")}</Button
+          >
+        {/if}
+        <Button secondary={true} on:click={handleCancel}
+          >{$_("dialog.cancel")}</Button
+        >
+      </div>
+    {:else if !compact}
+      <div class="twopanel">
+        <div class="cell leftalign">
+          {#if access == "organization"}
+            {$_("annotation.org")}
+          {:else if access == "private"}
+            {$_("annotation.private")}
+          {/if}
+        </div>
+        <div class="cell rightalign">
+          {#if annotation.organization == null}
+            {$_("annotation.by", { values: { name: annotation.username } })}
+          {:else}
+            {$_("annotation.byOrg", {
+              values: {
+                name: annotation.username,
+                org: annotation.organization,
+              },
+            })}
+          {/if}
+        </div>
+      </div>
+    {/if}
+  </footer>
+</div>
+
+<svelte:window on:keydown={handleKeyDown} />
+
 <style lang="scss">
   .annotation {
     --annotationBg: white;
@@ -542,214 +753,3 @@
     }
   }
 </style>
-
-<div
-  class="annotation"
-  class:grayed
-  class:behind
-  class:pagenote={pageNote}
-  class:up={shift == "up"}
-  class:public={access == "public"}
-  class:organization={access == "organization"}
-  class:private={access == "private"}
-  class:disabled={$loading}
-  on:mousedown|stopPropagation
-  style={shift == "up" || pageNote
-    ? ""
-    : `top: ${annotation.y1 * 100}%; height: ${annotation.height * 100}%`}
->
-  <header
-    bind:this={annotationElem}
-    bind:offsetHeight={headerHeight}
-    class:showimage={showImageOnPageNote}
-    class:hidden={shift == "down"}
-  >
-    {#if !pageNote}
-      <div class="closeflag">
-        <button class="closer buttonLike" on:click={cancelAnnotation}>
-          {@html closeInlineSvg}
-        </button>
-      </div>
-    {/if}
-    <Loader active={$loading} transparent={true}>
-      <!-- Title -->
-      {#if editMode}
-        <input
-          maxlength={noteTitleLimit}
-          bind:this={titleInput}
-          placeholder={$_("annotation.title")}
-          bind:value={title}
-        />
-      {:else}
-        <h3>
-          {#if titlePassages}
-            {#each titlePassages as passage}
-              <h4 class="highlight">
-                {#each passage as term}
-                  {#if term.type == "highlight"}
-                    <span class="passage highlighted">{term.text}</span>
-                  {:else}
-                    <span class="passage">{term.text}</span>
-                  {/if}
-                {/each}
-              </h4>
-            {/each}
-          {:else}
-            {annotation.title}
-          {/if}
-          {#if !compact}
-            <a class="link" href={noteUrl}>
-              {@html simpleLinkSvg}
-            </a>
-            {#if page.document.editAccess}
-              <button class="pencil" on:click={() => (editOverride = true)}>
-                {@html pencilSvg}
-              </button>
-            {/if}
-          {/if}
-        </h3>
-      {/if}
-    </Loader>
-  </header>
-  {#if shift == "down"}
-    <header />
-  {/if}
-  {#if !pageNote || showImageOnPageNote}
-    <div class="excerpt">
-      <div
-        class="body"
-        style={showImageOnPageNote
-          ? `height: 0; padding-top: ${annotation.height * aspect * 100}%`
-          : ""}
-      >
-        <div
-          style="margin-top: {-annotation.y1 * aspect * 100 -
-            (showImageOnPageNote ? annotation.height * aspect * 100 : 0)}%"
-        >
-          <ProgressiveImage
-            alt="Page {page.pageNumber + 1} of {page.document.title}"
-            {width}
-            aspect={page.aspect}
-            {page}
-          />
-          <!-- Faded flanks -->
-          <div
-            class="faded left"
-            class:nobottom={showImageOnPageNote}
-            style="left: 0; width: {annotation.x1 * 100}%"
-          />
-          <div
-            class="faded right"
-            class:nobottom={showImageOnPageNote}
-            style="left: {annotation.x2 * 100}%; right: 0"
-          />
-        </div>
-      </div>
-    </div>
-  {/if}
-  <footer
-    bind:offsetHeight={footerHeight}
-    bind:offsetWidth={footerWidth}
-    class:showimage={showImageOnPageNote}
-    class:capsize={pageNote && !editMode}
-  >
-    {#if shift == "down"}
-      <div class="closeflag">
-        <button class="closer" on:click={cancelAnnotation}>
-          {@html closeInlineSvg}
-        </button>
-      </div>
-      <Loader active={$loading} transparent={true}>
-        <!-- Title -->
-        {#if editMode}
-          <input
-            maxlength={noteTitleLimit}
-            bind:this={titleInput}
-            placeholder={$_("annotation.title")}
-            bind:value={title}
-            class="padded"
-          />
-        {:else}
-          <h3>
-            {annotation.title}
-            <a class="link" href={noteUrl}>
-              {@html simpleLinkSvg}
-            </a>
-            {#if page.document.editAccess}
-              <button class="pencil" on:click={() => (editOverride = true)}>
-                {@html pencilSvg}
-              </button>
-            {/if}
-          </h3>
-        {/if}
-      </Loader>
-    {/if}
-
-    <!-- Description/Content -->
-    {#if editMode}
-      <HtmlEditor
-        maxlength={noteContentLimit}
-        placeholder={$_("annotation.description")}
-        bind:value={description}
-      />
-    {:else if hlContent}
-      <span class="highlight">
-        <HtmlField content={hlContent} />
-      </span>
-    {:else}
-      <HtmlField content={annotation.content} />
-    {/if}
-    <!-- Footer content -->
-    {#if editMode}
-      <AccessToggle
-        stacked={footerWidth < 350}
-        bind:access
-        editAccess={page.document.editAccess}
-      />
-      <div class="buttonpadded">
-        <Button
-          on:click={createOrUpdateAnnotation}
-          disabledReason={titleValid
-            ? changeValid
-              ? null
-              : $_("annotation.unchanged")
-            : $_("annotation.noTitle")}
-        >
-          {#if editOverride}{$_("dialog.update")}{:else}{$_("dialog.save")}{/if}
-        </Button>
-        {#if editOverride}
-          <Button danger={true} on:click={handleDelete}
-            >{$_("dialog.delete")}</Button
-          >
-        {/if}
-        <Button secondary={true} on:click={handleCancel}
-          >{$_("dialog.cancel")}</Button
-        >
-      </div>
-    {:else if !compact}
-      <div class="twopanel">
-        <div class="cell leftalign">
-          {#if access == "organization"}
-            {$_("annotation.org")}
-          {:else if access == "private"}
-            {$_("annotation.private")}
-          {/if}
-        </div>
-        <div class="cell rightalign">
-          {#if annotation.organization == null}
-            {$_("annotation.by", { values: { name: annotation.username } })}
-          {:else}
-            {$_("annotation.byOrg", {
-              values: {
-                name: annotation.username,
-                org: annotation.organization,
-              },
-            })}
-          {/if}
-        </div>
-      </div>
-    {/if}
-  </footer>
-</div>
-
-<svelte:window on:keydown={handleKeyDown} />
diff --git a/src/pages/viewer/Body.svelte b/src/pages/viewer/Body.svelte
index f4c107efd..aebdc89ef 100644
--- a/src/pages/viewer/Body.svelte
+++ b/src/pages/viewer/Body.svelte
@@ -281,6 +281,29 @@
   }
 </script>
 
+<ActionPane bind:actionHeight />
+
+<div
+  style="top: {$layout.headerHeight +
+    actionOffset}px; bottom: {$layout.footerHeight}px;
+  right: {$layout.sidebarWidth}px;"
+  bind:this={docElem}
+  class="doc"
+  on:mousedown={handleMouseDown}
+  class:grayed={$layout.displayAnnotate || $layout.selectNoteEmbed}
+>
+  {#if $doc.mode == "search"}
+    <SearchResults />
+  {/if}
+</div>
+
+<svelte:window
+  on:gesturestart|preventDefault
+  on:gesturechange|preventDefault
+  on:gestureend|preventDefault
+  on:keypress={handleKeyPress}
+/>
+
 <style lang="scss">
   .doc {
     position: absolute;
@@ -305,26 +328,3 @@
     }
   }
 </style>
-
-<ActionPane bind:actionHeight />
-
-<div
-  style="top: {$layout.headerHeight +
-    actionOffset}px; bottom: {$layout.footerHeight}px;
-  right: {$layout.sidebarWidth}px;"
-  bind:this={docElem}
-  class="doc"
-  on:mousedown={handleMouseDown}
-  class:grayed={$layout.displayAnnotate || $layout.selectNoteEmbed}
->
-  {#if $doc.mode == "search"}
-    <SearchResults />
-  {/if}
-</div>
-
-<svelte:window
-  on:gesturestart|preventDefault
-  on:gesturechange|preventDefault
-  on:gestureend|preventDefault
-  on:keypress={handleKeyPress}
-/>
diff --git a/src/pages/viewer/ContentItem.svelte b/src/pages/viewer/ContentItem.svelte
index e1b983ce9..c3a13993d 100644
--- a/src/pages/viewer/ContentItem.svelte
+++ b/src/pages/viewer/ContentItem.svelte
@@ -24,6 +24,79 @@
   };
 </script>
 
+{#if sectionOrNote.type == "section"}
+  <!-- Show section -->
+  {#if sectionOrNote.children.length > 0}
+    <details class="dc" open>
+      <summary>
+        <a
+          href={pageUrl(sectionOrNote.section.page)}
+          class="section"
+          on:click={() => restorePosition(sectionOrNote.section.page)}
+        >
+          <NoWhitespace>
+            <span class="title">{sectionOrNote.section.title}</span>
+            <span>&nbsp;</span>
+            <span class="page"
+              >{$_("document.pageAbbrev")}&nbsp;{sectionOrNote.section.page +
+                1}</span
+            >
+          </NoWhitespace>
+        </a>
+      </summary>
+      <ul class="children">
+        {#each sectionOrNote.children as child}
+          <li>
+            <NoWhitespace>
+              <span class="circle">
+                {@html smallCircleSvg}
+              </span>
+              <span>&nbsp;</span>
+              <svelte:self sectionOrNote={child} />
+            </NoWhitespace>
+          </li>
+        {/each}
+      </ul>
+    </details>
+  {:else}
+    <a
+      href={pageUrl(sectionOrNote.section.page)}
+      on:click={() => restorePosition(sectionOrNote.section.page)}
+    >
+      <div class="section">
+        <NoWhitespace>
+          <span class="title">{sectionOrNote.section.title}</span>
+          <span>&nbsp;</span>
+          <span class="page"
+            >{$_("document.pageAbbrev")}&nbsp;{sectionOrNote.section.page +
+              1}</span
+          >
+        </NoWhitespace>
+      </div>
+    </a>
+  {/if}
+{:else}
+  <!-- Show note -->
+  <a
+    href={noteUrl(sectionOrNote.note)}
+    on:click={() => showAnnotation(sectionOrNote.note, true)}
+  >
+    <div
+      class="note"
+      class:hover={sectionOrNote.note == $layout.hoveredNote}
+      use:hoveredNote={sectionOrNote.note}
+    >
+      <NoWhitespace>
+        <span class="title">{sectionOrNote.note.title}</span>
+        <span>&nbsp;</span>
+        <span class="page"
+          >{$_("document.pageAbbrev")}&nbsp;{sectionOrNote.note.page + 1}</span
+        >
+      </NoWhitespace>
+    </div>
+  </a>
+{/if}
+
 <style lang="scss">
   .page {
     color: #666;
@@ -97,76 +170,3 @@
     }
   }
 </style>
-
-{#if sectionOrNote.type == "section"}
-  <!-- Show section -->
-  {#if sectionOrNote.children.length > 0}
-    <details class="dc" open>
-      <summary>
-        <a
-          href={pageUrl(sectionOrNote.section.page)}
-          class="section"
-          on:click={() => restorePosition(sectionOrNote.section.page)}
-        >
-          <NoWhitespace>
-            <span class="title">{sectionOrNote.section.title}</span>
-            <span>&nbsp;</span>
-            <span class="page"
-              >{$_("document.pageAbbrev")}&nbsp;{sectionOrNote.section.page +
-                1}</span
-            >
-          </NoWhitespace>
-        </a>
-      </summary>
-      <ul class="children">
-        {#each sectionOrNote.children as child}
-          <li>
-            <NoWhitespace>
-              <span class="circle">
-                {@html smallCircleSvg}
-              </span>
-              <span>&nbsp;</span>
-              <svelte:self sectionOrNote={child} />
-            </NoWhitespace>
-          </li>
-        {/each}
-      </ul>
-    </details>
-  {:else}
-    <a
-      href={pageUrl(sectionOrNote.section.page)}
-      on:click={() => restorePosition(sectionOrNote.section.page)}
-    >
-      <div class="section">
-        <NoWhitespace>
-          <span class="title">{sectionOrNote.section.title}</span>
-          <span>&nbsp;</span>
-          <span class="page"
-            >{$_("document.pageAbbrev")}&nbsp;{sectionOrNote.section.page +
-              1}</span
-          >
-        </NoWhitespace>
-      </div>
-    </a>
-  {/if}
-{:else}
-  <!-- Show note -->
-  <a
-    href={noteUrl(sectionOrNote.note)}
-    on:click={() => showAnnotation(sectionOrNote.note, true)}
-  >
-    <div
-      class="note"
-      class:hover={sectionOrNote.note == $layout.hoveredNote}
-      use:hoveredNote={sectionOrNote.note}
-    >
-      <NoWhitespace>
-        <span class="title">{sectionOrNote.note.title}</span>
-        <span>&nbsp;</span>
-        <span class="page"
-          >{$_("document.pageAbbrev")}&nbsp;{sectionOrNote.note.page + 1}</span
-        >
-      </NoWhitespace>
-    </div>
-  </a>
-{/if}
diff --git a/src/pages/viewer/ExtraPageContent.svelte b/src/pages/viewer/ExtraPageContent.svelte
index cb7316af3..24943130b 100644
--- a/src/pages/viewer/ExtraPageContent.svelte
+++ b/src/pages/viewer/ExtraPageContent.svelte
@@ -29,13 +29,13 @@
   }
 </script>
 
+<div class="extrapagecontent" bind:this={elem}>
+  <slot />
+</div>
+
 <style lang="scss">
   div {
     position: relative;
     overflow-wrap: break-word;
   }
 </style>
-
-<div class="extrapagecontent" bind:this={elem}>
-  <slot />
-</div>
diff --git a/src/pages/viewer/Footer.svelte b/src/pages/viewer/Footer.svelte
index fe334a9aa..cf94c3639 100644
--- a/src/pages/viewer/Footer.svelte
+++ b/src/pages/viewer/Footer.svelte
@@ -15,6 +15,27 @@
   $: style = `height: ${FOOTER_HEIGHT}px;`;
 </script>
 
+<footer class="vheader" class:disabled={disableControls} {style}>
+  <div class="vcontent">
+    {#if !compact}
+      <div class="cell side hide floatleft" {style}>
+        <ViewDropdown />
+      </div>
+      <div class="cell center" {style}>
+        <Paginator />
+      </div>
+      <div class="cell side right floatright" {style}>
+        <span class="hide ib adjustright" class:hideearly={embed}>
+          <Zoom />
+        </span>
+        {#if embed && showFullscreen}
+          <FullScreen />
+        {/if}
+      </div>
+    {/if}
+  </div>
+</footer>
+
 <style>
   footer {
     position: absolute;
@@ -85,24 +106,3 @@
     }
   }
 </style>
-
-<footer class="vheader" class:disabled={disableControls} {style}>
-  <div class="vcontent">
-    {#if !compact}
-      <div class="cell side hide floatleft" {style}>
-        <ViewDropdown />
-      </div>
-      <div class="cell center" {style}>
-        <Paginator />
-      </div>
-      <div class="cell side right floatright" {style}>
-        <span class="hide ib adjustright" class:hideearly={embed}>
-          <Zoom />
-        </span>
-        {#if embed && showFullscreen}
-          <FullScreen />
-        {/if}
-      </div>
-    {/if}
-  </div>
-</footer>
diff --git a/src/pages/viewer/Header.svelte b/src/pages/viewer/Header.svelte
index 3885db2d0..f6c9111d0 100644
--- a/src/pages/viewer/Header.svelte
+++ b/src/pages/viewer/Header.svelte
@@ -18,6 +18,50 @@
   export let embed = false;
 </script>
 
+<header
+  class="vheader"
+  class:disabled={disableControls}
+  style="height: {HEADER_HEIGHT}px"
+>
+  <div class="vcontent">
+    <!-- Expanding cell to hold title and optional back -->
+    <div class="cell">
+      {#if !embed}
+        <div class="back">
+          <Link back={true}>
+            {@html backArrowSvg}
+          </Link>
+        </div>
+      {/if}
+    </div>
+    <div class="cell expand">
+      {#if loaded}
+        <div class="title">
+          {#if !embed && document.readable}
+            <Loader active={true} pad={true} />
+          {/if}
+          {#if title}
+            <h1 class:padleft={embed}>{document.title}</h1>
+            <h2>
+              {$_("titleHeader.contributedBy", {
+                values: {
+                  name: showOrg ? document.orgString : document.userOrgString,
+                },
+              })}
+            </h2>
+          {/if}
+        </div>
+      {/if}
+    </div>
+    <div class="cell">
+      <Search />
+    </div>
+    <div class="cell">
+      <Hamburger />
+    </div>
+  </div>
+</header>
+
 <style>
   header {
     z-index: var(--viewerHeaderZ);
@@ -68,47 +112,3 @@
     margin: 0 5px;
   }
 </style>
-
-<header
-  class="vheader"
-  class:disabled={disableControls}
-  style="height: {HEADER_HEIGHT}px"
->
-  <div class="vcontent">
-    <!-- Expanding cell to hold title and optional back -->
-    <div class="cell">
-      {#if !embed}
-        <div class="back">
-          <Link back={true}>
-            {@html backArrowSvg}
-          </Link>
-        </div>
-      {/if}
-    </div>
-    <div class="cell expand">
-      {#if loaded}
-        <div class="title">
-          {#if !embed && document.readable}
-            <Loader active={true} pad={true} />
-          {/if}
-          {#if title}
-            <h1 class:padleft={embed}>{document.title}</h1>
-            <h2>
-              {$_("titleHeader.contributedBy", {
-                values: {
-                  name: showOrg ? document.orgString : document.userOrgString,
-                },
-              })}
-            </h2>
-          {/if}
-        </div>
-      {/if}
-    </div>
-    <div class="cell">
-      <Search />
-    </div>
-    <div class="cell">
-      <Hamburger />
-    </div>
-  </div>
-</header>
diff --git a/src/pages/viewer/InternalPage.svelte b/src/pages/viewer/InternalPage.svelte
index 0b915a9fa..6e868d458 100644
--- a/src/pages/viewer/InternalPage.svelte
+++ b/src/pages/viewer/InternalPage.svelte
@@ -142,126 +142,6 @@
   }
 </script>
 
-<style lang="scss">
-  .numbercontainer {
-    position: absolute;
-    top: 0;
-    height: 100%;
-    user-select: none;
-
-    .number {
-      position: sticky;
-      text-align: right;
-      box-sizing: border-box;
-      padding: 12px 20px 12px 0;
-      font-weight: bold;
-      font-size: 12px;
-      white-space: pre;
-      top: 20px;
-
-      &.grayed {
-        pointer-events: none;
-      }
-
-      a {
-        &:hover {
-          text-decoration: underline;
-        }
-      }
-    }
-  }
-
-  .page {
-    width: 100%;
-    height: 100%;
-    user-select: none;
-  }
-
-  .redaction {
-    position: absolute;
-    background: black;
-    pointer-events: none;
-  }
-
-  .tag {
-    @include buttonLike;
-
-    position: absolute;
-    left: -35px;
-    opacity: 0.5;
-    z-index: $viewerTagZ;
-
-    &:hover,
-    &.hover {
-      opacity: 0.8;
-    }
-
-    &.grayed {
-      pointer-events: none;
-      visibility: hidden;
-    }
-
-    &.disabled {
-      pointer-events: none;
-    }
-  }
-
-  .annotation {
-    position: absolute;
-    pointer-events: none;
-    margin-left: -$annotationBorderWidth;
-    margin-top: -$annotationBorderWidth;
-    border-radius: $radius;
-    box-sizing: content-box;
-
-    &.selectable {
-      cursor: pointer;
-      pointer-events: all;
-
-      &:hover,
-      &.hover {
-        box-shadow: 1px 2px 7px rgba(0, 0, 0, 0.2);
-      }
-    }
-
-    &.public {
-      border: $annotationBorderWidth solid $annotationBorder;
-      background: rgba($annotationBorder, 0.2);
-    }
-
-    &.organization {
-      border: $annotationBorderWidth solid $organizationAnnotation;
-      background: rgba($organizationAnnotation, 0.2);
-    }
-
-    &.private {
-      border: $annotationBorderWidth solid $privateAnnotation;
-      background: rgba($privateAnnotation, 0.2);
-    }
-
-    &.grayed {
-      pointer-events: none;
-      visibility: hidden;
-    }
-
-    &.amplified {
-      backdrop-filter: brightness(125%);
-
-      &.public {
-        background: rgba($annotationBorder, 0.1);
-      }
-
-      &.organization {
-        background: rgba($organizationAnnotation, 0.1);
-      }
-
-      &.private {
-        background: rgba($privateAnnotation, 0.1);
-      }
-    }
-  }
-</style>
-
 <div class="numbercontainer" style="right: {width}px;">
   <div
     class="number"
@@ -440,3 +320,123 @@
 </div>
 
 <svelte:window on:mouseup={handleMouseUp} />
+
+<style lang="scss">
+  .numbercontainer {
+    position: absolute;
+    top: 0;
+    height: 100%;
+    user-select: none;
+
+    .number {
+      position: sticky;
+      text-align: right;
+      box-sizing: border-box;
+      padding: 12px 20px 12px 0;
+      font-weight: bold;
+      font-size: 12px;
+      white-space: pre;
+      top: 20px;
+
+      &.grayed {
+        pointer-events: none;
+      }
+
+      a {
+        &:hover {
+          text-decoration: underline;
+        }
+      }
+    }
+  }
+
+  .page {
+    width: 100%;
+    height: 100%;
+    user-select: none;
+  }
+
+  .redaction {
+    position: absolute;
+    background: black;
+    pointer-events: none;
+  }
+
+  .tag {
+    @include buttonLike;
+
+    position: absolute;
+    left: -35px;
+    opacity: 0.5;
+    z-index: $viewerTagZ;
+
+    &:hover,
+    &.hover {
+      opacity: 0.8;
+    }
+
+    &.grayed {
+      pointer-events: none;
+      visibility: hidden;
+    }
+
+    &.disabled {
+      pointer-events: none;
+    }
+  }
+
+  .annotation {
+    position: absolute;
+    pointer-events: none;
+    margin-left: -$annotationBorderWidth;
+    margin-top: -$annotationBorderWidth;
+    border-radius: $radius;
+    box-sizing: content-box;
+
+    &.selectable {
+      cursor: pointer;
+      pointer-events: all;
+
+      &:hover,
+      &.hover {
+        box-shadow: 1px 2px 7px rgba(0, 0, 0, 0.2);
+      }
+    }
+
+    &.public {
+      border: $annotationBorderWidth solid $annotationBorder;
+      background: rgba($annotationBorder, 0.2);
+    }
+
+    &.organization {
+      border: $annotationBorderWidth solid $organizationAnnotation;
+      background: rgba($organizationAnnotation, 0.2);
+    }
+
+    &.private {
+      border: $annotationBorderWidth solid $privateAnnotation;
+      background: rgba($privateAnnotation, 0.2);
+    }
+
+    &.grayed {
+      pointer-events: none;
+      visibility: hidden;
+    }
+
+    &.amplified {
+      backdrop-filter: brightness(125%);
+
+      &.public {
+        background: rgba($annotationBorder, 0.1);
+      }
+
+      &.organization {
+        background: rgba($organizationAnnotation, 0.1);
+      }
+
+      &.private {
+        background: rgba($privateAnnotation, 0.1);
+      }
+    }
+  }
+</style>
diff --git a/src/pages/viewer/ModifyImage.svelte b/src/pages/viewer/ModifyImage.svelte
index f576eea06..c46e066c5 100644
--- a/src/pages/viewer/ModifyImage.svelte
+++ b/src/pages/viewer/ModifyImage.svelte
@@ -18,18 +18,18 @@
     id == null
       ? $viewer.document
       : $viewer.document != null && id == $viewer.document.id
-      ? $viewer.document
-      : $modification.documentCache[id];
+        ? $viewer.document
+        : $modification.documentCache[id];
 
   const DEFAULT_PAGE_SIZE = 1;
   $: pageSize =
     document == null
       ? DEFAULT_PAGE_SIZE
       : document.pageSizes == null
-      ? DEFAULT_PAGE_SIZE
-      : document.pageSizes[page] == null
-      ? DEFAULT_PAGE_SIZE
-      : document.pageSizes[page];
+        ? DEFAULT_PAGE_SIZE
+        : document.pageSizes[page] == null
+          ? DEFAULT_PAGE_SIZE
+          : document.pageSizes[page];
 
   $: {
     if ($viewer.document != null && id != $viewer.document.id) {
diff --git a/src/pages/viewer/NoteBody.svelte b/src/pages/viewer/NoteBody.svelte
index 998aad7c2..f7a38efb3 100644
--- a/src/pages/viewer/NoteBody.svelte
+++ b/src/pages/viewer/NoteBody.svelte
@@ -6,22 +6,6 @@
   let width = 0;
 </script>
 
-<style lang="scss">
-  .doc {
-    left: 0;
-    background: $viewerBodyBg;
-    position: absolute;
-    overflow: auto;
-    padding: 2em 0;
-
-    .notes {
-      max-width: 720px;
-      width: 90%;
-      margin: 0 auto;
-    }
-  }
-</style>
-
 <div
   style="top: {$layout.headerHeight}px; bottom: {$layout.footerHeight}px; right:
   {$layout.sidebarWidth}px;"
@@ -47,3 +31,19 @@
     {/if}
   </div>
 </div>
+
+<style lang="scss">
+  .doc {
+    left: 0;
+    background: $viewerBodyBg;
+    position: absolute;
+    overflow: auto;
+    padding: 2em 0;
+
+    .notes {
+      max-width: 720px;
+      width: 90%;
+      margin: 0 auto;
+    }
+  }
+</style>
diff --git a/src/pages/viewer/Page.svelte b/src/pages/viewer/Page.svelte
index 394be51a2..cf4db7ba2 100644
--- a/src/pages/viewer/Page.svelte
+++ b/src/pages/viewer/Page.svelte
@@ -10,9 +10,6 @@
   export let resizeCallback = () => {};
 </script>
 
-<style lang="scss">
-</style>
-
 <div>
   {#if page.document != null}
     <InternalPage
@@ -26,3 +23,6 @@
     />
   {/if}
 </div>
+
+<style lang="scss">
+</style>
diff --git a/src/pages/viewer/PageNoteInsert.svelte b/src/pages/viewer/PageNoteInsert.svelte
index c5070f4eb..9621e987b 100644
--- a/src/pages/viewer/PageNoteInsert.svelte
+++ b/src/pages/viewer/PageNoteInsert.svelte
@@ -38,6 +38,50 @@
   });
 </script>
 
+<div
+  class="container"
+  style={expanded
+    ? `margin-top: ${-EXPANDED_MARGIN * scale}px; height: ${
+        EXPANDED_MARGIN * scale
+      }px`
+    : `margin-top: ${-UNEXPANDED_MARGIN * scale}px; height: ${
+        (RETRACTED_HEIGHT + UNEXPANDED_MARGIN) * scale
+      }px`}
+  on:mouseover={expand}
+  on:mouseleave={retract}
+  on:mousedown={() => startPageNote(pageNumber - 1)}
+>
+  <div
+    class="padder"
+    style="padding-top: {(expanded
+      ? -RETRACTED_HEIGHT + EXPANDED_MARGIN
+      : -RETRACTED_HEIGHT + UNEXPANDED_MARGIN) * scale}px"
+  >
+    <div
+      class="insert"
+      class:expanded
+      style={expanded
+        ? `height: ${EXPANDED_MARGIN * scale}px`
+        : `height: ${RETRACTED_HEIGHT * scale}px`}
+    >
+      <div
+        class="plus"
+        class:expanded={expanded && scale > 0.65}
+        style="height: {PLUS_SIZE * scale}px; line-height: {PLUS_SIZE *
+          scale}px;
+        border-radius: {BORDER_SIZE * scale}px; margin-top: {(-PLUS_SIZE *
+          scale) /
+          2}px"
+      >
+        <div>
+          {$_("annotation.addPageNote")} ({$_("document.pageAbbrev")}
+          {pageNumber})
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
 <style lang="scss">
   .container {
     position: absolute;
@@ -93,47 +137,3 @@
     }
   }
 </style>
-
-<div
-  class="container"
-  style={expanded
-    ? `margin-top: ${-EXPANDED_MARGIN * scale}px; height: ${
-        EXPANDED_MARGIN * scale
-      }px`
-    : `margin-top: ${-UNEXPANDED_MARGIN * scale}px; height: ${
-        (RETRACTED_HEIGHT + UNEXPANDED_MARGIN) * scale
-      }px`}
-  on:mouseover={expand}
-  on:mouseleave={retract}
-  on:mousedown={() => startPageNote(pageNumber - 1)}
->
-  <div
-    class="padder"
-    style="padding-top: {(expanded
-      ? -RETRACTED_HEIGHT + EXPANDED_MARGIN
-      : -RETRACTED_HEIGHT + UNEXPANDED_MARGIN) * scale}px"
-  >
-    <div
-      class="insert"
-      class:expanded
-      style={expanded
-        ? `height: ${EXPANDED_MARGIN * scale}px`
-        : `height: ${RETRACTED_HEIGHT * scale}px`}
-    >
-      <div
-        class="plus"
-        class:expanded={expanded && scale > 0.65}
-        style="height: {PLUS_SIZE * scale}px; line-height: {PLUS_SIZE *
-          scale}px;
-        border-radius: {BORDER_SIZE * scale}px; margin-top: {(-PLUS_SIZE *
-          scale) /
-          2}px"
-      >
-        <div>
-          {$_("annotation.addPageNote")} ({$_("document.pageAbbrev")}
-          {pageNumber})
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
diff --git a/src/pages/viewer/SearchResults.svelte b/src/pages/viewer/SearchResults.svelte
index f9b4bad97..b077d5bb5 100644
--- a/src/pages/viewer/SearchResults.svelte
+++ b/src/pages/viewer/SearchResults.svelte
@@ -24,6 +24,47 @@
   }
 </script>
 
+{#if $layout.searchPages != null}
+  <div class="results">
+    {#if $layout.totalResults > 0}
+      <p>
+        {$_("searchResults.resultPages", {
+          values: {
+            results: $layout.totalResults,
+            pages: $layout.searchPages.length,
+          },
+        })}
+      </p>
+    {:else}
+      <p>{$_("searchResults.noSearchResults")}</p>
+    {/if}
+    {#each $layout.searchPages as { page }}
+      <div class="page" on:click={() => handlePage(page)}>
+        <h2>
+          {$_("document.pageAbbrev")}
+          {page + 1}
+          <small>
+            {$_("searchResults.occurrences", {
+              values: { n: $layout.searchHighlights[page].length },
+            })}
+          </small>
+        </h2>
+        {#each $layout.searchHighlights[page] as highlight}
+          <div class="result">
+            <NoWhitespace>
+              {#each highlight as passage}
+                <span class:highlight={passage.type == "highlight"}>
+                  {passage.text}
+                </span>
+              {/each}
+            </NoWhitespace>
+          </div>
+        {/each}
+      </div>
+    {/each}
+  </div>
+{/if}
+
 <style lang="scss">
   .results {
     max-width: 700px;
@@ -83,44 +124,3 @@
     }
   }
 </style>
-
-{#if $layout.searchPages != null}
-  <div class="results">
-    {#if $layout.totalResults > 0}
-      <p>
-        {$_("searchResults.resultPages", {
-          values: {
-            results: $layout.totalResults,
-            pages: $layout.searchPages.length,
-          },
-        })}
-      </p>
-    {:else}
-      <p>{$_("searchResults.noSearchResults")}</p>
-    {/if}
-    {#each $layout.searchPages as { page }}
-      <div class="page" on:click={() => handlePage(page)}>
-        <h2>
-          {$_("document.pageAbbrev")}
-          {page + 1}
-          <small>
-            {$_("searchResults.occurrences", {
-              values: { n: $layout.searchHighlights[page].length },
-            })}
-          </small>
-        </h2>
-        {#each $layout.searchHighlights[page] as highlight}
-          <div class="result">
-            <NoWhitespace>
-              {#each highlight as passage}
-                <span class:highlight={passage.type == "highlight"}>
-                  {passage.text}
-                </span>
-              {/each}
-            </NoWhitespace>
-          </div>
-        {/each}
-      </div>
-    {/each}
-  </div>
-{/if}
diff --git a/src/pages/viewer/SelectableWord.svelte b/src/pages/viewer/SelectableWord.svelte
index dd79ceb37..9f85fee41 100644
--- a/src/pages/viewer/SelectableWord.svelte
+++ b/src/pages/viewer/SelectableWord.svelte
@@ -64,40 +64,6 @@
   });
 </script>
 
-<style lang="scss">
-  .selectabletext {
-    position: absolute;
-    color: transparent;
-    user-select: text;
-    display: inline-block;
-    transform-origin: left top;
-    white-space: pre;
-    font-family: monospace;
-
-    &::selection {
-      background: rgba(66, 147, 240, 0.3);
-      mix-blend-mode: multiply;
-    }
-  }
-
-  .highlight {
-    position: absolute;
-    pointer-events: none;
-    background: #f3e94d52;
-    background: linear-gradient(#f3e94d52, #f5dd0152);
-    border: 1px solid #f5e800;
-    padding: 1px;
-    border-radius: 3px;
-    box-shadow: 0 0 5px #666;
-    box-sizing: border-box;
-    mix-blend-mode: darken;
-  }
-
-  .resizing {
-    display: none;
-  }
-</style>
-
 {#if sizeNeeded}
   <div
     bind:this={sizer}
@@ -119,9 +85,7 @@
     transform: {transform}{!sizeNeeded && direction == 'right'
     ? ` translate(${-pageWidth / scaleX}px,0)`
     : ''};
-    {!sizeNeeded
-    ? `padding-bottom: ${pageHeight / scaleY}px;`
-    : ''}
+    {!sizeNeeded ? `padding-bottom: ${pageHeight / scaleY}px;` : ''}
     {!sizeNeeded && direction == 'left'
     ? `padding-right: ${pageWidth / scaleX}px;`
     : ''}
@@ -138,12 +102,44 @@
     class="highlight"
     class:resizing={isResizing && !sizeNeeded}
     style="
-    left:calc({left * 100}% - {highlightPaddingX *
-      scale}px);
-    top:calc({top * 100}% - {highlightPaddingY *
-      scale}px);
+    left:calc({left * 100}% - {highlightPaddingX * scale}px);
+    top:calc({top * 100}% - {highlightPaddingY * scale}px);
     width:{(exactWidth + highlightPaddingX * 2) *
       scale}px;height:{(exactHeight + highlightPaddingY * 2) * scale}px;
     "
   />
 {/if}
+
+<style lang="scss">
+  .selectabletext {
+    position: absolute;
+    color: transparent;
+    user-select: text;
+    display: inline-block;
+    transform-origin: left top;
+    white-space: pre;
+    font-family: monospace;
+
+    &::selection {
+      background: rgba(66, 147, 240, 0.3);
+      mix-blend-mode: multiply;
+    }
+  }
+
+  .highlight {
+    position: absolute;
+    pointer-events: none;
+    background: #f3e94d52;
+    background: linear-gradient(#f3e94d52, #f5dd0152);
+    border: 1px solid #f5e800;
+    padding: 1px;
+    border-radius: 3px;
+    box-shadow: 0 0 5px #666;
+    box-sizing: border-box;
+    mix-blend-mode: darken;
+  }
+
+  .resizing {
+    display: none;
+  }
+</style>
diff --git a/src/pages/viewer/Sidebar.svelte b/src/pages/viewer/Sidebar.svelte
index bd9757e2a..64eb60759 100644
--- a/src/pages/viewer/Sidebar.svelte
+++ b/src/pages/viewer/Sidebar.svelte
@@ -124,86 +124,6 @@
   }
 </script>
 
-<style lang="scss">
-  .sidebar {
-    position: absolute;
-    right: 0;
-    background: #f0f0f0;
-    box-shadow: -4px 0px 4px rgba(0, 0, 0, 0.12);
-    overflow: auto;
-    z-index: var(--viewerSidebarZ, 7);
-    max-width: 100%;
-    -webkit-overflow-scrolling: touch;
-
-    &.white {
-      background: white;
-    }
-
-    &.disabled {
-      filter: brightness(90%);
-      user-select: none;
-
-      * {
-        pointer-events: none;
-      }
-    }
-
-    .updating {
-      color: var(--gray, rgba(0, 0, 0, 0.53));
-      font-size: 12px;
-      margin: 10px 0;
-    }
-
-    .actions {
-      font-size: 12px;
-      text-transform: uppercase;
-      font-weight: bold;
-      padding: 6px 20px;
-      background: #dadada;
-      background: linear-gradient(#ececec, #dadada);
-      border-top: solid 1px #ccc;
-      border-bottom: solid 1px #ccc;
-      box-shadow: 0 0 2px rgba(0, 0, 0, 0.12);
-      text-shadow: 0 1px 0 #ffffff5c;
-    }
-
-    .title {
-      padding: 16px 20px 16px 20px;
-      background: white;
-
-      h2 {
-        font-size: 16px;
-      }
-    }
-
-    hr {
-      border: none;
-      border-top: 1px solid #ccc;
-    }
-
-    $small: 12px;
-
-    a {
-      font-size: $small;
-      color: var(--viewerLink, #004276);
-    }
-
-    small {
-      font-size: $small;
-
-      p {
-        margin: 10px 0;
-      }
-    }
-  }
-
-  .inlineheader {
-    color: black;
-    display: inline-block;
-    vertical-align: middle;
-  }
-</style>
-
 <div
   class="sidebar"
   class:white={!signedIn}
@@ -309,3 +229,83 @@
     {/if}
   {/if}
 </div>
+
+<style lang="scss">
+  .sidebar {
+    position: absolute;
+    right: 0;
+    background: #f0f0f0;
+    box-shadow: -4px 0px 4px rgba(0, 0, 0, 0.12);
+    overflow: auto;
+    z-index: var(--viewerSidebarZ, 7);
+    max-width: 100%;
+    -webkit-overflow-scrolling: touch;
+
+    &.white {
+      background: white;
+    }
+
+    &.disabled {
+      filter: brightness(90%);
+      user-select: none;
+
+      * {
+        pointer-events: none;
+      }
+    }
+
+    .updating {
+      color: var(--gray, rgba(0, 0, 0, 0.53));
+      font-size: 12px;
+      margin: 10px 0;
+    }
+
+    .actions {
+      font-size: 12px;
+      text-transform: uppercase;
+      font-weight: bold;
+      padding: 6px 20px;
+      background: #dadada;
+      background: linear-gradient(#ececec, #dadada);
+      border-top: solid 1px #ccc;
+      border-bottom: solid 1px #ccc;
+      box-shadow: 0 0 2px rgba(0, 0, 0, 0.12);
+      text-shadow: 0 1px 0 #ffffff5c;
+    }
+
+    .title {
+      padding: 16px 20px 16px 20px;
+      background: white;
+
+      h2 {
+        font-size: 16px;
+      }
+    }
+
+    hr {
+      border: none;
+      border-top: 1px solid #ccc;
+    }
+
+    $small: 12px;
+
+    a {
+      font-size: $small;
+      color: var(--viewerLink, #004276);
+    }
+
+    small {
+      font-size: $small;
+
+      p {
+        margin: 10px 0;
+      }
+    }
+  }
+
+  .inlineheader {
+    color: black;
+    display: inline-block;
+    vertical-align: middle;
+  }
+</style>
diff --git a/src/pages/viewer/SidebarAction.svelte b/src/pages/viewer/SidebarAction.svelte
index 978523417..b10a75e74 100644
--- a/src/pages/viewer/SidebarAction.svelte
+++ b/src/pages/viewer/SidebarAction.svelte
@@ -7,6 +7,11 @@
   export { className as class };
 </script>
 
+<button class={`action ${className}`} class:disabled on:click={action}>
+  <h3>{header}</h3>
+  <p>{description}</p>
+</button>
+
 <style>
   .action {
     appearance: none;
@@ -47,8 +52,3 @@
     margin: 8px 0;
   }
 </style>
-
-<button class={`action ${className}`} class:disabled on:click={action}>
-  <h3>{header}</h3>
-  <p>{description}</p>
-</button>
diff --git a/src/pages/viewer/SimpleBody.svelte b/src/pages/viewer/SimpleBody.svelte
index 78d4990d6..dbe992620 100644
--- a/src/pages/viewer/SimpleBody.svelte
+++ b/src/pages/viewer/SimpleBody.svelte
@@ -22,6 +22,21 @@
   }
 </script>
 
+<div
+  style="top: {$layout.headerHeight}px; bottom: {$layout.footerHeight}px; right:
+  {$layout.sidebarWidth}px;"
+  bind:this={docElem}
+  on:scroll={handleScroll}
+  class="doc"
+  class:grayed={$layout.displayAnnotate}
+>
+  {#if $doc.mode == "text"}
+    <AllText {scrollParams} />
+  {:else if $doc.mode == "search"}
+    <SearchResults />
+  {/if}
+</div>
+
 <style lang="scss">
   .doc {
     position: absolute;
@@ -44,18 +59,3 @@
     }
   }
 </style>
-
-<div
-  style="top: {$layout.headerHeight}px; bottom: {$layout.footerHeight}px; right:
-  {$layout.sidebarWidth}px;"
-  bind:this={docElem}
-  on:scroll={handleScroll}
-  class="doc"
-  class:grayed={$layout.displayAnnotate}
->
-  {#if $doc.mode == "text"}
-    <AllText {scrollParams} />
-  {:else if $doc.mode == "search"}
-    <SearchResults />
-  {/if}
-</div>
diff --git a/src/pages/viewer/TableOfContents.svelte b/src/pages/viewer/TableOfContents.svelte
index 5244ea162..00bb042cc 100644
--- a/src/pages/viewer/TableOfContents.svelte
+++ b/src/pages/viewer/TableOfContents.svelte
@@ -4,12 +4,6 @@
   import { viewer } from "@/viewer/viewer.js";
 </script>
 
-<style>
-  .toc {
-    padding: 8px 0;
-  }
-</style>
-
 <div class="toc">
   {#if $viewer.sectionsAndNotes != null}
     {#each $viewer.sectionsAndNotes as sectionOrNote}
@@ -17,3 +11,9 @@
     {/each}
   {/if}
 </div>
+
+<style>
+  .toc {
+    padding: 8px 0;
+  }
+</style>
diff --git a/src/pages/viewer/ThumbnailBody.svelte b/src/pages/viewer/ThumbnailBody.svelte
index 5d89e4119..1105b43d8 100644
--- a/src/pages/viewer/ThumbnailBody.svelte
+++ b/src/pages/viewer/ThumbnailBody.svelte
@@ -135,6 +135,77 @@
   const MAX_THUMB_HEIGHT = 119;
 </script>
 
+<ActionPane bind:actionHeight />
+
+<div
+  style="top: {$layout.headerHeight +
+    actionOffset}px; bottom: {$layout.footerHeight}px; right:
+  {$layout.sidebarWidth}px;"
+  class="doc"
+  bind:this={container}
+  bind:clientWidth={containerWidth}
+  bind:clientHeight={containerHeight}
+  on:scroll={handleScroll}
+>
+  <div
+    style="padding-top: {paddingTop}px; padding-bottom: {paddingBottom}px; padding-left: {paddingLeft}px"
+  >
+    {#each pages as page (`${page.index}-${JSON.stringify(page.descriptor.json())}`)}
+      <span class="item" style="width: {itemWidth}px; height: {itemHeight}px">
+        <span
+          class="imgwrap"
+          class:selected={$modification.modifySelectedMap[page.index]}
+        >
+          <div class="pgnum" class:left={!modify}>
+            {$_("document.pageAbbrev")}
+            {page.index + 1}
+          </div>
+          {#if modify}
+            {#if !insertOnly}
+              <div
+                class="selector"
+                on:click={(e) => select(page.index, e.shiftKey)}
+              />
+            {/if}
+            {#if showInserts}
+              <div
+                on:click={() => modification.selectInsert(page.index)}
+                class="insert before"
+                class:emphasized={(insertOnly && !$modification.hasInsert) ||
+                  $modification.insert == page.index}
+              />
+              {#if page.index == $modification.pageCount - 1}
+                <div
+                  on:click={() => modification.selectInsert(page.index + 1)}
+                  class="insert after"
+                  class:emphasized={(insertOnly && !$modification.hasInsert) ||
+                    $modification.insert == page.index + 1}
+                />
+              {/if}
+            {/if}
+          {/if}
+          <Modification descriptor={page.descriptor}>
+            <span
+              class="img"
+              class:disabled={insertOnly}
+              on:click={(e) => select(page.index, e.shiftKey)}
+            >
+              <ModifyImage
+                id={page.document}
+                page={page.pg}
+                descriptor={page.descriptor}
+                size={140}
+                maxThumb={[MAX_THUMB_WIDTH, MAX_THUMB_HEIGHT]}
+              />
+            </span>
+          </Modification>
+        </span>
+      </span>
+      {#if page.index % itemsPerRow == itemsPerRow - 1}<br />{/if}
+    {/each}
+  </div>
+</div>
+
 <style lang="scss">
   .doc {
     left: 0;
@@ -283,74 +354,3 @@
     }
   }
 </style>
-
-<ActionPane bind:actionHeight />
-
-<div
-  style="top: {$layout.headerHeight +
-    actionOffset}px; bottom: {$layout.footerHeight}px; right:
-  {$layout.sidebarWidth}px;"
-  class="doc"
-  bind:this={container}
-  bind:clientWidth={containerWidth}
-  bind:clientHeight={containerHeight}
-  on:scroll={handleScroll}
->
-  <div
-    style="padding-top: {paddingTop}px; padding-bottom: {paddingBottom}px; padding-left: {paddingLeft}px"
-  >
-    {#each pages as page (`${page.index}-${JSON.stringify(page.descriptor.json())}`)}
-      <span class="item" style="width: {itemWidth}px; height: {itemHeight}px">
-        <span
-          class="imgwrap"
-          class:selected={$modification.modifySelectedMap[page.index]}
-        >
-          <div class="pgnum" class:left={!modify}>
-            {$_("document.pageAbbrev")}
-            {page.index + 1}
-          </div>
-          {#if modify}
-            {#if !insertOnly}
-              <div
-                class="selector"
-                on:click={(e) => select(page.index, e.shiftKey)}
-              />
-            {/if}
-            {#if showInserts}
-              <div
-                on:click={() => modification.selectInsert(page.index)}
-                class="insert before"
-                class:emphasized={(insertOnly && !$modification.hasInsert) ||
-                  $modification.insert == page.index}
-              />
-              {#if page.index == $modification.pageCount - 1}
-                <div
-                  on:click={() => modification.selectInsert(page.index + 1)}
-                  class="insert after"
-                  class:emphasized={(insertOnly && !$modification.hasInsert) ||
-                    $modification.insert == page.index + 1}
-                />
-              {/if}
-            {/if}
-          {/if}
-          <Modification descriptor={page.descriptor}>
-            <span
-              class="img"
-              class:disabled={insertOnly}
-              on:click={(e) => select(page.index, e.shiftKey)}
-            >
-              <ModifyImage
-                id={page.document}
-                page={page.pg}
-                descriptor={page.descriptor}
-                size={140}
-                maxThumb={[MAX_THUMB_WIDTH, MAX_THUMB_HEIGHT]}
-              />
-            </span>
-          </Modification>
-        </span>
-      </span>
-      {#if page.index % itemsPerRow == itemsPerRow - 1}<br />{/if}
-    {/each}
-  </div>
-</div>
diff --git a/src/pages/viewer/controls/FullScreen.svelte b/src/pages/viewer/controls/FullScreen.svelte
index c76621e54..b23d696a2 100644
--- a/src/pages/viewer/controls/FullScreen.svelte
+++ b/src/pages/viewer/controls/FullScreen.svelte
@@ -5,6 +5,18 @@
   import fullScreenSvg from "@/assets/fullscreen.svg?raw";
 </script>
 
+{#if $viewer.loaded}
+  <a target="_blank" href={$viewer.document.canonicalUrl}>
+    <span class="fullscreen">
+      {@html fullScreenSvg}
+    </span>
+  </a>
+{:else}
+  <span class="fullscreen">
+    {@html fullScreenSvg}
+  </span>
+{/if}
+
 <style lang="scss">
   .fullscreen {
     @include buttonLike;
@@ -19,15 +31,3 @@
     }
   }
 </style>
-
-{#if $viewer.loaded}
-  <a target="_blank" href={$viewer.document.canonicalUrl}>
-    <span class="fullscreen">
-      {@html fullScreenSvg}
-    </span>
-  </a>
-{:else}
-  <span class="fullscreen">
-    {@html fullScreenSvg}
-  </span>
-{/if}
diff --git a/src/pages/viewer/controls/Hamburger.svelte b/src/pages/viewer/controls/Hamburger.svelte
index fed9e2484..0e800b981 100644
--- a/src/pages/viewer/controls/Hamburger.svelte
+++ b/src/pages/viewer/controls/Hamburger.svelte
@@ -5,6 +5,13 @@
   import viewerHamburgerSvg from "@/assets/viewer_hamburger.svg?raw";
 </script>
 
+<button
+  class="hamburger plausible-event-name=viewer-hamburger"
+  on:click={toggleSidebar}
+>
+  {@html viewerHamburgerSvg}
+</button>
+
 <style lang="scss">
   .hamburger {
     background: none;
@@ -13,10 +20,3 @@
     margin: 0.5em;
   }
 </style>
-
-<button
-  class="hamburger plausible-event-name=viewer-hamburger"
-  on:click={toggleSidebar}
->
-  {@html viewerHamburgerSvg}
-</button>
diff --git a/src/pages/viewer/controls/Paginator.svelte b/src/pages/viewer/controls/Paginator.svelte
index d35d107a6..8f226058c 100644
--- a/src/pages/viewer/controls/Paginator.svelte
+++ b/src/pages/viewer/controls/Paginator.svelte
@@ -85,6 +85,49 @@
   }
 </script>
 
+{#if $viewer.loaded && $doc.mode !== "search" && $doc.mode !== "notes" && $doc.mode !== "thumbnail"}
+  <div class="paginator">
+    <button class="paginate left buttonLike" on:click={() => decrement(false)}>
+      {@html leftPaginator}
+    </button>
+    <span class="page">
+      <span class="hidden">{$viewer.document.pageCount}</span>
+      <span class="absolute">{$doc.visiblePageNumber}</span>
+      <input
+        type="text"
+        inputmode="numeric"
+        pattern="[0-9]*"
+        bind:this={input}
+        bind:value={customPage}
+        on:focus={() => {
+          intentionalBlur = false;
+          customPage = `${$doc.visiblePageNumber}`;
+          hadInput = false;
+          select();
+        }}
+        on:blur={handleInput}
+        on:input={() => (hadInput = true)}
+        on:keydown={(e) => {
+          if (input != document.activeElement) return;
+          if (e.key == "Escape") {
+            dismiss();
+          } else if (e.key == "Enter") {
+            handleInput();
+          } else if (e.key == "ArrowUp") {
+            increment(true);
+          } else if (e.key == "ArrowDown") {
+            decrement(true);
+          }
+        }}
+      />
+    </span>
+    <span class="rest">{$_("paginator.of")} {$viewer.document.pageCount}</span>
+    <button class="paginate right buttonLike" on:click={() => increment(false)}>
+      {@html rightPaginator}
+    </button>
+  </div>
+{/if}
+
 <style lang="scss">
   .paginator {
     --inputHeight: 23px;
@@ -158,46 +201,3 @@
     }
   }
 </style>
-
-{#if $viewer.loaded && $doc.mode !== "search" && $doc.mode !== "notes" && $doc.mode !== "thumbnail"}
-  <div class="paginator">
-    <button class="paginate left buttonLike" on:click={() => decrement(false)}>
-      {@html leftPaginator}
-    </button>
-    <span class="page">
-      <span class="hidden">{$viewer.document.pageCount}</span>
-      <span class="absolute">{$doc.visiblePageNumber}</span>
-      <input
-        type="text"
-        inputmode="numeric"
-        pattern="[0-9]*"
-        bind:this={input}
-        bind:value={customPage}
-        on:focus={() => {
-          intentionalBlur = false;
-          customPage = `${$doc.visiblePageNumber}`;
-          hadInput = false;
-          select();
-        }}
-        on:blur={handleInput}
-        on:input={() => (hadInput = true)}
-        on:keydown={(e) => {
-          if (input != document.activeElement) return;
-          if (e.key == "Escape") {
-            dismiss();
-          } else if (e.key == "Enter") {
-            handleInput();
-          } else if (e.key == "ArrowUp") {
-            increment(true);
-          } else if (e.key == "ArrowDown") {
-            decrement(true);
-          }
-        }}
-      />
-    </span>
-    <span class="rest">{$_("paginator.of")} {$viewer.document.pageCount}</span>
-    <button class="paginate right buttonLike" on:click={() => increment(false)}>
-      {@html rightPaginator}
-    </button>
-  </div>
-{/if}
diff --git a/src/pages/viewer/controls/Search.svelte b/src/pages/viewer/controls/Search.svelte
index 15ca332a7..9918483fc 100644
--- a/src/pages/viewer/controls/Search.svelte
+++ b/src/pages/viewer/controls/Search.svelte
@@ -58,6 +58,42 @@
   }
 </script>
 
+<div class="input" class:expand={$layout.searchExpanded}>
+  <div class="container">
+    <input
+      type="search"
+      bind:this={searchElem}
+      bind:value={query}
+      placeholder={$_("searchBar.search")}
+      disabled={$layout.searchPending}
+      on:keypress={(e) => {
+        if (e.key == "Enter") {
+          search();
+        }
+      }}
+    />
+  </div>
+  <button
+    class="searchicon buttonLike"
+    class:disabled={invalidQuery || $layout.searchPending}
+    on:click={search}
+  >
+    {@html searchIconSvg}
+  </button>
+  <button class="closeicon buttonLike" on:click={retract}>
+    {@html closeInlineSvg}
+  </button>
+</div>
+<button
+  class="icon buttonLike"
+  class:hide={$layout.searchExpanded}
+  on:click={expandSearch}
+>
+  {@html viewerSearchIconSvg}
+</button>
+
+<svelte:window on:keydown={handleKeyDown} />
+
 <style>
   .icon {
     margin: 0 12px;
@@ -126,39 +162,3 @@
     display: inherit;
   }
 </style>
-
-<div class="input" class:expand={$layout.searchExpanded}>
-  <div class="container">
-    <input
-      type="search"
-      bind:this={searchElem}
-      bind:value={query}
-      placeholder={$_("searchBar.search")}
-      disabled={$layout.searchPending}
-      on:keypress={(e) => {
-        if (e.key == "Enter") {
-          search();
-        }
-      }}
-    />
-  </div>
-  <button
-    class="searchicon buttonLike"
-    class:disabled={invalidQuery || $layout.searchPending}
-    on:click={search}
-  >
-    {@html searchIconSvg}
-  </button>
-  <button class="closeicon buttonLike" on:click={retract}>
-    {@html closeInlineSvg}
-  </button>
-</div>
-<button
-  class="icon buttonLike"
-  class:hide={$layout.searchExpanded}
-  on:click={expandSearch}
->
-  {@html viewerSearchIconSvg}
-</button>
-
-<svelte:window on:keydown={handleKeyDown} />
diff --git a/src/pages/viewer/controls/Zoom.svelte b/src/pages/viewer/controls/Zoom.svelte
index 618f50ba9..6b5d32f64 100644
--- a/src/pages/viewer/controls/Zoom.svelte
+++ b/src/pages/viewer/controls/Zoom.svelte
@@ -72,6 +72,34 @@
   }
 </script>
 
+<span class="zoom" class:disabled={$doc.mode !== "image"}>
+  <button
+    class="icon plausible-event-name=viewer-zoom plausible-event-zoom=zoom-in"
+    on:click={zoomIn}
+  >
+    {@html plusSvg}
+  </button>
+  <div class="separator" />
+  <button
+    class="icon plausible-event-name=viewer-zoom plausible-event-zoom=zoom-out"
+    on:click={zoomOut}
+  >
+    {@html minusSvg}
+  </button>
+
+  <select bind:this={select} on:blur={handleChange}>
+    <option value="default">{($doc.viewerScale * 100).toFixed()}%</option>
+    <option disabled>---</option>
+    <option value="width">{$_("zoom.fitWidth")}</option>
+    <option value="height">{$_("zoom.fitHeight")}</option>
+    <option value="50">50%</option>
+    <option value="100">100%</option>
+    <option value="150">150%</option>
+    <option value="200">200%</option>
+    <option value="400">400%</option>
+  </select>
+</span>
+
 <style lang="scss">
   .zoom {
     vertical-align: middle;
@@ -105,31 +133,3 @@
     border: none;
   }
 </style>
-
-<span class="zoom" class:disabled={$doc.mode !== "image"}>
-  <button
-    class="icon plausible-event-name=viewer-zoom plausible-event-zoom=zoom-in"
-    on:click={zoomIn}
-  >
-    {@html plusSvg}
-  </button>
-  <div class="separator" />
-  <button
-    class="icon plausible-event-name=viewer-zoom plausible-event-zoom=zoom-out"
-    on:click={zoomOut}
-  >
-    {@html minusSvg}
-  </button>
-
-  <select bind:this={select} on:blur={handleChange}>
-    <option value="default">{($doc.viewerScale * 100).toFixed()}%</option>
-    <option disabled>---</option>
-    <option value="width">{$_("zoom.fitWidth")}</option>
-    <option value="height">{$_("zoom.fitHeight")}</option>
-    <option value="50">50%</option>
-    <option value="100">100%</option>
-    <option value="150">150%</option>
-    <option value="200">200%</option>
-    <option value="400">400%</option>
-  </select>
-</span>
diff --git a/src/pages/viewer/pane/ActionPane.svelte b/src/pages/viewer/pane/ActionPane.svelte
index 96b36e33e..5c10b57ff 100644
--- a/src/pages/viewer/pane/ActionPane.svelte
+++ b/src/pages/viewer/pane/ActionPane.svelte
@@ -17,6 +17,36 @@
   }
 </script>
 
+<!-- Action pane -->
+{#if $layout.action !== null}
+  <div
+    class="actionpane"
+    style="top: {$layout.headerHeight}px; right: {$layout.sidebarWidth}px"
+    bind:clientHeight={actionHeight}
+  >
+    <div class="actionclose">
+      <button class="buttonLike" on:click={cancelActions}>
+        <XCircle24 />
+      </button>
+    </div>
+    <div class="actioncontent">
+      {#if $layout.selectNoteEmbed}
+        <SelectNotePane />
+      {:else if $layout.redacting}
+        <RedactPane />
+      {:else if $layout.annotating}
+        <AnnotatePane />
+      {:else if $layout.modifying}
+        <ModifyPane />
+      {:else if $layout.searching}
+        <SearchPane />
+      {/if}
+    </div>
+  </div>
+{/if}
+
+<svelte:window on:keydown={handleKeyDown} />
+
 <style>
   .actionpane {
     position: absolute;
@@ -58,33 +88,3 @@
     margin: 0 4px;
   }
 </style>
-
-<!-- Action pane -->
-{#if $layout.action !== null}
-  <div
-    class="actionpane"
-    style="top: {$layout.headerHeight}px; right: {$layout.sidebarWidth}px"
-    bind:clientHeight={actionHeight}
-  >
-    <div class="actionclose">
-      <button class="buttonLike" on:click={cancelActions}>
-        <XCircle24 />
-      </button>
-    </div>
-    <div class="actioncontent">
-      {#if $layout.selectNoteEmbed}
-        <SelectNotePane />
-      {:else if $layout.redacting}
-        <RedactPane />
-      {:else if $layout.annotating}
-        <AnnotatePane />
-      {:else if $layout.modifying}
-        <ModifyPane />
-      {:else if $layout.searching}
-        <SearchPane />
-      {/if}
-    </div>
-  </div>
-{/if}
-
-<svelte:window on:keydown={handleKeyDown} />
diff --git a/src/pages/viewer/pane/ModifyPane.svelte b/src/pages/viewer/pane/ModifyPane.svelte
index 7b0712a6a..94c3805a0 100644
--- a/src/pages/viewer/pane/ModifyPane.svelte
+++ b/src/pages/viewer/pane/ModifyPane.svelte
@@ -16,39 +16,6 @@
   const MAX_THUMB_HEIGHT = 39;
 </script>
 
-<style lang="scss">
-  .buffer {
-    position: relative;
-    display: inline-block;
-    vertical-align: bottom;
-
-    .item {
-      display: inline-block;
-      vertical-align: top;
-      width: 45px;
-
-      &.faded {
-        position: relative;
-        mask-image: linear-gradient(to right, black, transparent 70%);
-      }
-
-      .img {
-        display: inline-block;
-        margin: 0 5px;
-        border: solid 1.5px $primary;
-        box-sizing: border-box;
-        background: white;
-        overflow: hidden;
-        vertical-align: top;
-
-        :global(img) {
-          object-fit: contain !important;
-        }
-      }
-    }
-  }
-</style>
-
 {#if $modification.modifyHasSelection}
   <h3>
     {$_("modifyPane.pagesSelected", {
@@ -202,3 +169,36 @@
     >
   </div>
 {/if}
+
+<style lang="scss">
+  .buffer {
+    position: relative;
+    display: inline-block;
+    vertical-align: bottom;
+
+    .item {
+      display: inline-block;
+      vertical-align: top;
+      width: 45px;
+
+      &.faded {
+        position: relative;
+        mask-image: linear-gradient(to right, black, transparent 70%);
+      }
+
+      .img {
+        display: inline-block;
+        margin: 0 5px;
+        border: solid 1.5px $primary;
+        box-sizing: border-box;
+        background: white;
+        overflow: hidden;
+        vertical-align: top;
+
+        :global(img) {
+          object-fit: contain !important;
+        }
+      }
+    }
+  }
+</style>
diff --git a/src/pages/viewer/pane/SearchPane.svelte b/src/pages/viewer/pane/SearchPane.svelte
index 4c9ab6021..169747208 100644
--- a/src/pages/viewer/pane/SearchPane.svelte
+++ b/src/pages/viewer/pane/SearchPane.svelte
@@ -3,12 +3,6 @@
   import { layout } from "@/viewer/layout.js";
 </script>
 
-<style>
-  .searchpane :global(em) {
-    color: var(--searchSpecial, #5a00ff);
-  }
-</style>
-
 {#if $layout.searchPages !== null}
   <div class="searchpane">
     <b>
@@ -24,3 +18,9 @@
     </div>
   </div>
 {/if}
+
+<style>
+  .searchpane :global(em) {
+    color: var(--searchSpecial, #5a00ff);
+  }
+</style>
diff --git a/src/premium-credits/CreditMeter.svelte b/src/premium-credits/CreditMeter.svelte
index 96e9958af..3e43e9c67 100644
--- a/src/premium-credits/CreditMeter.svelte
+++ b/src/premium-credits/CreditMeter.svelte
@@ -22,6 +22,26 @@
   const low = max ? max / 4 : undefined;
 </script>
 
+<label for={id} class="creditMeter">
+  <span class="text">
+    {label}
+  </span>
+  <span class="number">
+    <Price {value} iconSize={1.25} />
+    {#if max}
+      <span class="denominator">
+        /{max.toLocaleString()}
+      </span>
+    {/if}
+  </span>
+  {#if helpText}
+    <p class="helpText">{helpText}</p>
+  {/if}
+  {#if max}
+    <meter {id} {value} {max} {low} class="meter" />
+  {/if}
+</label>
+
 <style>
   .creditMeter {
     display: flex;
@@ -69,23 +89,3 @@
     border: 1px solid rgba(0, 0, 0, 0.1);
   }
 </style>
-
-<label for={id} class="creditMeter">
-  <span class="text">
-    {label}
-  </span>
-  <span class="number">
-    <Price {value} iconSize={1.25} />
-    {#if max}
-      <span class="denominator">
-        /{max.toLocaleString()}
-      </span>
-    {/if}
-  </span>
-  {#if helpText}
-    <p class="helpText">{helpText}</p>
-  {/if}
-  {#if max}
-    <meter {id} {value} {max} {low} class="meter" />
-  {/if}
-</label>
diff --git a/src/premium-credits/Price.svelte b/src/premium-credits/Price.svelte
index c95105488..70dbeba17 100644
--- a/src/premium-credits/Price.svelte
+++ b/src/premium-credits/Price.svelte
@@ -5,6 +5,11 @@
   export let iconSize = 1;
 </script>
 
+<span class="price">
+  <span class="flex-auto center-self"><Credit size={iconSize} /></span>
+  <span class="flex-grow flex-auto">{value?.toLocaleString()}</span>
+</span>
+
 <style>
   .price {
     display: inline-flex;
@@ -22,8 +27,3 @@
     flex-basis: auto;
   }
 </style>
-
-<span class="price">
-  <span class="flex-auto center-self"><Credit size={iconSize} /></span>
-  <span class="flex-grow flex-auto">{value?.toLocaleString()}</span>
-</span>
diff --git a/src/premium-credits/UpgradePrompt.svelte b/src/premium-credits/UpgradePrompt.svelte
index 70a88557b..861ea90e4 100644
--- a/src/premium-credits/UpgradePrompt.svelte
+++ b/src/premium-credits/UpgradePrompt.svelte
@@ -7,6 +7,18 @@
   export let callToAction: string | null = null;
 </script>
 
+<div class="container">
+  <div class="message">
+    <span class="badge"><Credit badge size={2} /></span>
+    <p>{message}</p>
+  </div>
+  {#if callToAction}
+    <div class="action">
+      <Button premium label={callToAction} on:click />
+    </div>
+  {/if}
+</div>
+
 <style>
   .container {
     display: flex;
@@ -37,15 +49,3 @@
     flex: 1 1 100%;
   }
 </style>
-
-<div class="container">
-  <div class="message">
-    <span class="badge"><Credit badge size={2} /></span>
-    <p>{message}</p>
-  </div>
-  {#if callToAction}
-    <div class="action">
-      <Button premium label={callToAction} on:click />
-    </div>
-  {/if}
-</div>
diff --git a/src/router/Link.svelte b/src/router/Link.svelte
index 5789e6d3d..2ebed8c04 100644
--- a/src/router/Link.svelte
+++ b/src/router/Link.svelte
@@ -50,24 +50,6 @@
   }
 </script>
 
-<style>
-  .active {
-    font-weight: bold;
-  }
-
-  .ib {
-    display: inline-block;
-  }
-
-  .color {
-    color: var(--primary) !important;
-  }
-
-  a {
-    cursor: pointer;
-  }
-</style>
-
 {#if !back}
   {#if newPage}
     <a
@@ -102,3 +84,21 @@
     <slot />
   </a>
 {/if}
+
+<style>
+  .active {
+    font-weight: bold;
+  }
+
+  .ib {
+    display: inline-block;
+  }
+
+  .color {
+    color: var(--primary) !important;
+  }
+
+  a {
+    cursor: pointer;
+  }
+</style>
diff --git a/src/style/fonts.scss b/src/style/fonts.scss
index 3847b4456..af98e2578 100644
--- a/src/style/fonts.scss
+++ b/src/style/fonts.scss
@@ -1,56 +1,83 @@
-
 /* source-sans-pro-regular - latin */
 @font-face {
-  font-family: 'Source Sans Pro';
+  font-family: "Source Sans Pro";
   font-style: normal;
   font-weight: 400;
-  src: url('/fonts/source-sans-pro-v21-latin-regular.eot'); /* IE9 Compat Modes */
-  src: local(''),
-       url('/fonts/source-sans-pro-v21-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
-       url('/fonts/source-sans-pro-v21-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
-       url('/fonts/source-sans-pro-v21-latin-regular.woff') format('woff'), /* Modern Browsers */
-       url('/fonts/source-sans-pro-v21-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
-       url('/fonts/source-sans-pro-v21-latin-regular.svg#SourceSansPro') format('svg'); /* Legacy iOS */
+  src: url("/fonts/source-sans-pro-v21-latin-regular.eot"); /* IE9 Compat Modes */
+  src:
+    local(""),
+    url("/fonts/source-sans-pro-v21-latin-regular.eot?#iefix")
+      format("embedded-opentype"),
+    /* IE6-IE8 */ url("/fonts/source-sans-pro-v21-latin-regular.woff2")
+      format("woff2"),
+    /* Super Modern Browsers */
+      url("/fonts/source-sans-pro-v21-latin-regular.woff") format("woff"),
+    /* Modern Browsers */ url("/fonts/source-sans-pro-v21-latin-regular.ttf")
+      format("truetype"),
+    /* Safari, Android, iOS */
+      url("/fonts/source-sans-pro-v21-latin-regular.svg#SourceSansPro")
+      format("svg"); /* Legacy iOS */
 }
 
 /* source-sans-pro-italic - latin */
 @font-face {
-  font-family: 'Source Sans Pro';
+  font-family: "Source Sans Pro";
   font-style: italic;
   font-weight: 400;
-  src: url('/fonts/source-sans-pro-v21-latin-italic.eot'); /* IE9 Compat Modes */
-  src: local(''),
-       url('/fonts/source-sans-pro-v21-latin-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
-       url('/fonts/source-sans-pro-v21-latin-italic.woff2') format('woff2'), /* Super Modern Browsers */
-       url('/fonts/source-sans-pro-v21-latin-italic.woff') format('woff'), /* Modern Browsers */
-       url('/fonts/source-sans-pro-v21-latin-italic.ttf') format('truetype'), /* Safari, Android, iOS */
-       url('/fonts/source-sans-pro-v21-latin-italic.svg#SourceSansPro') format('svg'); /* Legacy iOS */
+  src: url("/fonts/source-sans-pro-v21-latin-italic.eot"); /* IE9 Compat Modes */
+  src:
+    local(""),
+    url("/fonts/source-sans-pro-v21-latin-italic.eot?#iefix")
+      format("embedded-opentype"),
+    /* IE6-IE8 */ url("/fonts/source-sans-pro-v21-latin-italic.woff2")
+      format("woff2"),
+    /* Super Modern Browsers */
+      url("/fonts/source-sans-pro-v21-latin-italic.woff") format("woff"),
+    /* Modern Browsers */ url("/fonts/source-sans-pro-v21-latin-italic.ttf")
+      format("truetype"),
+    /* Safari, Android, iOS */
+      url("/fonts/source-sans-pro-v21-latin-italic.svg#SourceSansPro")
+      format("svg"); /* Legacy iOS */
 }
 
 /* source-sans-pro-600 - latin */
 @font-face {
-  font-family: 'Source Sans Pro';
+  font-family: "Source Sans Pro";
   font-style: normal;
   font-weight: 600;
-  src: url('/fonts/source-sans-pro-v21-latin-600.eot'); /* IE9 Compat Modes */
-  src: local(''),
-       url('/fonts/source-sans-pro-v21-latin-600.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
-       url('/fonts/source-sans-pro-v21-latin-600.woff2') format('woff2'), /* Super Modern Browsers */
-       url('/fonts/source-sans-pro-v21-latin-600.woff') format('woff'), /* Modern Browsers */
-       url('/fonts/source-sans-pro-v21-latin-600.ttf') format('truetype'), /* Safari, Android, iOS */
-       url('/fonts/source-sans-pro-v21-latin-600.svg#SourceSansPro') format('svg'); /* Legacy iOS */
+  src: url("/fonts/source-sans-pro-v21-latin-600.eot"); /* IE9 Compat Modes */
+  src:
+    local(""),
+    url("/fonts/source-sans-pro-v21-latin-600.eot?#iefix")
+      format("embedded-opentype"),
+    /* IE6-IE8 */ url("/fonts/source-sans-pro-v21-latin-600.woff2")
+      format("woff2"),
+    /* Super Modern Browsers */ url("/fonts/source-sans-pro-v21-latin-600.woff")
+      format("woff"),
+    /* Modern Browsers */ url("/fonts/source-sans-pro-v21-latin-600.ttf")
+      format("truetype"),
+    /* Safari, Android, iOS */
+      url("/fonts/source-sans-pro-v21-latin-600.svg#SourceSansPro")
+      format("svg"); /* Legacy iOS */
 }
 
 /* source-sans-pro-700 - latin */
 @font-face {
-  font-family: 'Source Sans Pro';
+  font-family: "Source Sans Pro";
   font-style: normal;
   font-weight: 700;
-  src: url('/fonts/source-sans-pro-v21-latin-700.eot'); /* IE9 Compat Modes */
-  src: local(''),
-       url('/fonts/source-sans-pro-v21-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
-       url('/fonts/source-sans-pro-v21-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
-       url('/fonts/source-sans-pro-v21-latin-700.woff') format('woff'), /* Modern Browsers */
-       url('/fonts/source-sans-pro-v21-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
-       url('/fonts/source-sans-pro-v21-latin-700.svg#SourceSansPro') format('svg'); /* Legacy iOS */
+  src: url("/fonts/source-sans-pro-v21-latin-700.eot"); /* IE9 Compat Modes */
+  src:
+    local(""),
+    url("/fonts/source-sans-pro-v21-latin-700.eot?#iefix")
+      format("embedded-opentype"),
+    /* IE6-IE8 */ url("/fonts/source-sans-pro-v21-latin-700.woff2")
+      format("woff2"),
+    /* Super Modern Browsers */ url("/fonts/source-sans-pro-v21-latin-700.woff")
+      format("woff"),
+    /* Modern Browsers */ url("/fonts/source-sans-pro-v21-latin-700.ttf")
+      format("truetype"),
+    /* Safari, Android, iOS */
+      url("/fonts/source-sans-pro-v21-latin-700.svg#SourceSansPro")
+      format("svg"); /* Legacy iOS */
 }
diff --git a/src/style/variables.css b/src/style/variables.css
index 1f6ef7048..fb78add8a 100644
--- a/src/style/variables.css
+++ b/src/style/variables.css
@@ -24,7 +24,7 @@
   --actionPane: #fffdea;
   --highlight-orange: #ff785c;
   --inputBg: #ffffff;
-  --premium: #24CC99;
+  --premium: #24cc99;
 
   /* Viewer */
   --viewerPaneColor: #f3f3f3;
diff --git a/src/viewer/modification/Modification.svelte b/src/viewer/modification/Modification.svelte
index 3f59b2425..eb3a0ec69 100644
--- a/src/viewer/modification/Modification.svelte
+++ b/src/viewer/modification/Modification.svelte
@@ -4,13 +4,13 @@
   $: transform = descriptor.toTransform();
 </script>
 
+<span class="modification" style="transform: {transform}">
+  <slot />
+</span>
+
 <style lang="scss">
   .modification {
     display: inline-block;
     transform-origin: top left;
   }
 </style>
-
-<span class="modification" style="transform: {transform}">
-  <slot />
-</span>
diff --git a/src/viewer/modification/modifySpec.test.js b/src/viewer/modification/modifySpec.test.js
index 4a65853d3..25a9344e5 100644
--- a/src/viewer/modification/modifySpec.test.js
+++ b/src/viewer/modification/modifySpec.test.js
@@ -60,18 +60,7 @@ test("page spec to numbers", () => {
   expect(runify([1, 2, 3]).toNumbers()).toEqual([1, 2, 3]);
   expect(runify([1, 3]).toNumbers()).toEqual([1, 3]);
   expect(runify([1, 3, 4, 7, 8, 9, 1, 2, 3, 4, 5, 1]).toNumbers()).toEqual([
-    1,
-    3,
-    4,
-    7,
-    8,
-    9,
-    1,
-    2,
-    3,
-    4,
-    5,
-    1,
+    1, 3, 4, 7, 8, 9, 1, 2, 3, 4, 5, 1,
   ]);
 });
 
@@ -81,18 +70,7 @@ test("parse page spec", () => {
   expect(getNumbers("1-3")).toEqual([1, 2, 3]);
   expect(getNumbers("1,3")).toEqual([1, 3]);
   expect(getNumbers("1,3-4,7-9,1-5,1")).toEqual([
-    1,
-    3,
-    4,
-    7,
-    8,
-    9,
-    1,
-    2,
-    3,
-    4,
-    5,
-    1,
+    1, 3, 4, 7, 8, 9, 1, 2, 3, 4, 5, 1,
   ]);
 });