Fix UI bugs

Signed-off-by: Leslie Lazzarino <leslie.lazzarino@gmail.com>

Author: leslielazzarino

.gitignore

@@ -1,4 +1,5 @@
 .idea
+.claude
 node_modules
 /build
 *.xpi

docs/USERGUIDE.md

@@ -122,7 +122,7 @@ keeping token use in check. A live counter shows LLM/tool calls while it works;
 **After a report is generated**
 
 - **Linked emails** — the report cites the emails behind its statements as inline chips.
-  Click **↗** on a chip to open that email in a tab, or **↩** to start a reply to it.
+  Click a chip to open that email in a tab, or its **↩** button to start a reply to it.
   (The links work within the current Thunderbird session.)
 - **Refine** — type a follow-up instruction and send again; the report continues the
   same conversation (e.g. *"group these by sender"*).

public/organiseConfirm.html

@@ -53,19 +53,37 @@
         min-height: 18px;
         margin: 0 0 8px;
       }
-      /* Scrollable list filling the remaining height. */
+      /* Everything except the list keeps its natural height. Without `flex: 0 0 auto` these are
+         shrinkable, so on a full page (content taller than the window) the browser compresses the
+         heading, status line, pager and footer — and lets them spring back on a short last page.
+         That is what made the dialog "jump" when paging. */
+      h1,
+      .subtitle,
+      #status,
+      .pager,
+      .footer {
+        flex: 0 0 auto;
+      }
+      /* Scrollable list filling the remaining height. `flex-basis: 0` (not `auto`) makes its size
+         depend only on the free space, never on how many rows the current page happens to have, and
+         a reserved scrollbar gutter stops the rows from shifting sideways when a short page needs no
+         scrollbar. Together these keep every page pixel-identical. */
       #move-list {
-        flex: 1 1 auto;
+        flex: 1 1 0;
         min-height: 120px;
         overflow-y: auto;
+        scrollbar-gutter: stable;
         border: 1px solid var(--border);
         border-radius: 6px;
         background: var(--subtle-bg);
       }
+      /* Fixed row height so a row can never be taller or shorter than its neighbours. */
       .move-row {
         display: flex;
         align-items: center;
         gap: 10px;
+        height: 52px;
+        box-sizing: border-box;
         padding: 8px 10px;
         border-bottom: 1px solid var(--border);
       }
@@ -78,12 +96,14 @@
       }
       .move-subject {
         font-size: 13px;
+        line-height: 1.35;
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
       }
       .move-author {
         font-size: 12px;
+        line-height: 1.35;
         color: var(--muted);
         white-space: nowrap;
         overflow: hidden;

public/reports.html

@@ -448,28 +448,42 @@
       .report-placeholder {
         color: var(--muted);
       }
-      /* Inline email citation chip: label + Open/Reply glyph buttons. */
+      /* Inline email citation chip: the label opens the email, the trailing glyph replies to it. */
       .email-citation {
         display: inline-flex;
         align-items: center;
-        gap: 4px;
+        gap: 2px;
         margin: 0 1px;
-        padding: 0 2px 0 6px;
+        padding: 0 2px 0 0;
         border: 1px solid var(--border);
         border-radius: 999px;
         background: var(--field-bg);
         vertical-align: baseline;
         line-height: 1.6;
       }
+      /* The label is a button so the whole chip body — not just a small glyph — opens the email. */
       .email-citation-label {
+        display: inline-block;
         max-width: 220px;
         overflow: hidden;
         text-overflow: ellipsis;
         white-space: nowrap;
+        padding: 0 4px 0 8px;
+        margin: 0;
+        border: none;
+        border-radius: 999px 0 0 999px;
+        background: transparent;
+        font-family: inherit;
         font-size: 12px;
+        line-height: inherit;
         color: var(--fg);
+        cursor: pointer;
+      }
+      .email-citation-label:hover {
+        background: var(--accent);
+        color: var(--accent-fg);
       }
-      .email-citation button {
+      .email-citation .email-reply {
         display: inline-flex;
         align-items: center;
         justify-content: center;
@@ -484,7 +498,7 @@
         line-height: 1;
         cursor: pointer;
       }
-      .email-citation button:hover {
+      .email-citation .email-reply:hover {
         background: var(--accent);
         color: var(--accent-fg);
       }

src/__tests__/reportMarkdown.test.ts

@@ -25,14 +25,17 @@ describe("renderReportHtml", () => {
     expect(html.querySelector("code")?.textContent).toBe("code");
   });
 
-  test("turns an email citation into a chip with Open/Reply buttons carrying the id", () => {
+  test("turns an email citation into a chip whose label opens and whose button replies", () => {
     const html = render('Resolved on Tuesday [Alice — "Re: Invoice"](email:12345).');
     const chip = html.querySelector(".email-citation");
     expect(chip).not.toBeNull();
-    expect(chip?.querySelector(".email-citation-label")?.textContent).toBe('Alice — "Re: Invoice"');
 
     const open = chip?.querySelector<HTMLButtonElement>(".email-open");
     const reply = chip?.querySelector<HTMLButtonElement>(".email-reply");
+    // The label itself is the open control, so there is no separate arrow glyph on the chip.
+    expect(open?.textContent).toBe('Alice — "Re: Invoice"');
+    expect(open?.classList.contains("email-citation-label")).toBe(true);
+    expect(chip?.querySelectorAll("button")).toHaveLength(2);
     expect(open?.dataset.emailId).toBe("12345");
     expect(reply?.dataset.emailId).toBe("12345");
     // The surrounding prose is preserved around the chip.

src/reportMarkdown.ts

@@ -33,23 +33,20 @@ interface InlineMatch {
   build: (doc: Document) => Node;
 }
 
-/** Build the email-citation chip: a label plus Open/Reply buttons tagged with the message id. */
+/** Build the email-citation chip: a clickable label (opens the email) plus a Reply button. */
 function buildEmailChip(doc: Document, id: string, label: string): Node {
   const chip = doc.createElement("span");
   chip.className = "email-citation";
 
-  const name = doc.createElement("span");
-  name.className = "email-citation-label";
-  name.textContent = label;
-  chip.appendChild(name);
-
+  // The label itself is the "open" control: the whole chip (everything but the reply button)
+  // opens the cited email, so there is no separate arrow glyph.
   const openBtn = doc.createElement("button");
   openBtn.type = "button";
-  openBtn.className = "email-open";
+  openBtn.className = "email-citation-label email-open";
   openBtn.dataset.emailId = id;
   openBtn.title = "Open this email";
   openBtn.setAttribute("aria-label", `Open email: ${label}`);
-  openBtn.textContent = "↗";
+  openBtn.textContent = label;
   chip.appendChild(openBtn);
 
   const replyBtn = doc.createElement("button");