Fix text

src/langs/json/en.json

@@ -63,7 +63,8 @@
     "dismiss": "Dismiss",
     "dispatch": "Dispatch",
     "organize": "Organize",
-    "run": "Run"
+    "run": "Run",
+    "required": "This field is required"
   },
   "dialogReprocessDialog": {
     "title": "Confirm reprocess",
@@ -188,7 +189,7 @@
     "noSearchResults": "No search results",
     "queryNoResults": "Your search query returned no results. Try again with a broader search query.",
     "welcome": "Welcome to DocumentCloud!",
-    "verify": "Before you can upload documents, you need to be verify your account. You can do this by joining a verified news organization or by requesting verification for yourself.",
+    "verify": "Before you can upload documents, you need to verify your account. You can do this by joining a verified news organization or by requesting verification for yourself.",
     "allowed_actions": "Until you're verified, you can search through the public repository, organize documents you're interested in into projects, leave private notes, and collaborate on editing and annotating documents other users invite you to.",
     "requestVerificationAction": "Request verification",
     "orgs": "Search organizations",

src/lib/components/accounts/Unverified.svelte

@@ -50,10 +50,14 @@ a user who is logged in but has `verified_journalist = false`.
   <Unverified24 slot="icon" />
   <p>{$_("unverified.verify")}</p>
   <Flex class="buttons" gap={1}>
-    <Button href={SQUARELET_ORGS_URL} target="_blank">
+    <Button mode="primary" href={SQUARELET_ORGS_URL} target="_blank">
       {$_("unverified.orgs")}
     </Button>
-    <Button href={prefill(VERIFICATION_FORM_URL, user)} target="_blank">
+    <Button
+      mode="primary"
+      href={prefill(VERIFICATION_FORM_URL, user)}
+      target="_blank"
+    >
       {$_("unverified.requestVerificationAction")}
     </Button>
   </Flex>

src/lib/components/common/KV.svelte

@@ -48,5 +48,6 @@
   .value {
     color: var(--blue-5, #153359);
     font-style: normal;
+    word-break: break-all;
   }
 </style>

src/lib/components/common/stories/KV.stories.svelte

@@ -30,3 +30,18 @@
 <Story name="no link">
   <KV key="Project" value="Old Computer Project" />
 </Story>
+
+<Story name="Long Value">
+  <div class="constrain-width">
+    <KV
+      key="id"
+      value="f2a6eaad9a6ebf4753bacd1e9731f29d67c2b84b7098165d2ae9cb83797c52452d66f8d6c342fd29a4229c31b7cd55ad91324be9f897fe5a4b858055d2f0ec65"
+    />
+  </div>
+</Story>
+
+<style>
+  .constrain-width {
+    max-width: 20rem;
+  }
+</style>

src/lib/components/documents/Header.svelte

@@ -64,6 +64,7 @@
     font-weight: var(--font-semibold);
     font-size: var(--font-xl);
     line-height: 1.2;
+    word-break: break-all;
   }
   .access {
     flex: 0 1 auto;

src/lib/components/documents/NoteHighlights.svelte

@@ -25,7 +25,7 @@
   import HighlightGroup from "../common/HighlightGroup.svelte";
 
   export let document: Document;
-  export let open = false;
+  export let open = true;
 
   $: highlights = Object.entries(document.note_highlights ?? {});
   $: notes = new Map(document.notes?.map((n) => [n.id, n]));

src/lib/components/documents/PageHighlights.svelte

@@ -22,7 +22,7 @@
   import { pageNumber } from "$lib/utils/search";
 
   export let document: Document;
-  export let open = false;
+  export let open = true;
 
   $: highlights = Object.entries(document.highlights ?? {});
 

src/lib/components/documents/stories/Header.stories.svelte

@@ -32,3 +32,14 @@
   name="With HTML description"
   args={{ document: { ...document, description: html } }}
 />
+
+<Story
+  name="With Long Title"
+  args={{
+    document: {
+      ...document,
+      title:
+        "This%20is%20an%20unbroken%20title%20that%20just%20goes%20on%20and%20on%20and%20on%20why%20did%20nobody%20edit%20it%3F",
+    },
+  }}
+/>

src/lib/components/forms/DocumentUpload.svelte

@@ -178,8 +178,8 @@ progress through the three-part upload process.
 
     const form = new FormData(e.target as HTMLFormElement);
 
-    const access = form.get("access") as Access;
-    const titles = form.getAll("title") as string[];
+    const access = (form.get("access") as Access) ?? "private";
+    const titles = (form.getAll("title") as string[]) ?? [];
     const revision_control = form.get("revision_control") === "on";
 
     // only run on files that are "ready" and haven't started uploading
@@ -364,7 +364,7 @@ progress through the three-part upload process.
 
           <Field>
             <FieldLabel>{$_("uploadDialog.accessLevel")}</FieldLabel>
-            <AccessLevel name="access" bind:selected={access} />
+            <AccessLevel name="access" bind:selected={access} required />
           </Field>
           <Field>
             <FieldLabel>{$_("uploadDialog.projects")}</FieldLabel>

src/lib/components/forms/UploadListItem.svelte

@@ -125,8 +125,10 @@
 
 <style>
   .title {
-    flex: 1 0 auto;
+    flex: 1 1 auto;
+    max-width: 100%;
   }
+
   .fileInfo {
     flex: 0 1 0;
     font-size: var(--font-xs);

src/lib/components/forms/stories/DocumentUpload.stories.svelte

@@ -55,3 +55,19 @@
 />
 
 <Story name="Unverified user" args={{ ...args, user: writable(user) }} />
+
+<Story
+  name="With Long File Name"
+  args={{
+    ...args,
+    files: [
+      new File(
+        [new ArrayBuffer(128000)],
+        "f2a6eaad9a6ebf4753bacd1e9731f29d67c2b84b7098165d2ae9cb83797c52452d66f8d6c342fd29a4229c31b7cd55ad91324be9f897fe5a4b858055d2f0ec65.pdf",
+        {
+          type: "application/pdf",
+        },
+      ),
+    ],
+  }}
+/>

src/lib/components/inputs/AccessLevel.svelte

@@ -43,30 +43,39 @@
   export let name: string;
   export let selected: Access = levels[0]!.value;
   export let direction: "column" | "row" = "column";
+  export let required = false;
 </script>
 
-<Flex {direction} gap={0.5}>
-  {#each levels as level}
-    <div class="option" class:selected={level.value === selected}>
-      <input
-        class="sr-only"
-        type="radio"
-        {name}
-        id={level.value}
-        bind:group={selected}
-        value={level.value}
-      />
-      <label for={level.value} class="detail">
-        <Flex gap={0.5}>
-          <svelte:component this={level.icon} />
-          <Flex direction="column" gap={0.125}>
-            <p class="title">{level.title}</p>
-            <p class="description">{level.description}</p>
+<Flex direction="column">
+  {#if required && !selected}
+    <p class="error">
+      {$_("dialog.required")}
+    </p>
+  {/if}
+  <Flex {direction} gap={0.5}>
+    {#each levels as level}
+      <div class="option" class:selected={level.value === selected}>
+        <label for={level.value} class="detail">
+          <Flex gap={0.5}>
+            <svelte:component this={level.icon} />
+            <Flex direction="column" gap={0.125}>
+              <p class="title">{level.title}</p>
+              <p class="description">{level.description}</p>
+            </Flex>
           </Flex>
-        </Flex>
-      </label>
-    </div>
-  {/each}
+          <input
+            class="sr-only"
+            type="radio"
+            {name}
+            id={level.value}
+            bind:group={selected}
+            value={level.value}
+            {required}
+          />
+        </label>
+      </div>
+    {/each}
+  </Flex>
 </Flex>
 
 <style>
@@ -96,6 +105,10 @@
     font-size: var(--font-xs);
     opacity: 0.7;
   }
+  .error {
+    color: var(--error);
+  }
+
   .sr-only {
     position: absolute;
     clip: rect(1px, 1px, 1px, 1px);

src/lib/components/inputs/Field.svelte

@@ -46,6 +46,7 @@
     margin: 0.5rem 0;
     font-size: var(--font-sm, 0.875em);
     color: var(--gray-4);
+    word-break: break-all;
   }
   .inline.field {
     width: 100%;

src/lib/components/inputs/stories/AccessLevel.stories.svelte

@@ -22,3 +22,4 @@
 <Story name="Organization" args={{ ...args, selected: "organization" }} />
 <Story name="Public" args={{ ...args, selected: "public" }} />
 <Story name="Row" args={{ ...args, direction: "row" }} />
+<Story name="Required" args={{ required: true, selected: null }} />