@celestia-island/hikari 0.40.30 → 0.40.31

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@celestia-island/hikari",
-  "version": "0.40.30",
+  "version": "0.40.31",
   "private": false,
   "type": "module",
   "description": "Hikari Vue 3 component library — production-grade UI components based on shittim-chest design system",

package/src/components/HkAffixPicker.scss

@@ -67,7 +67,9 @@
   max-width: 24rem;
 }
 
-/* One selected entry: [flag] label (meta) •active-dot   ×]
+/* One selected entry: [flag] value|label (meta) •active-dot   ×]
+ * With `tagValues` the primary text is the key's mapped value (italic
+ * muted "Not set" while empty); without it, the autonym label.
  * The × opens the shared confirm message box — the dialog's Confirm is
  * what actually erases; the × alone never does. */
 .hk-affix-tag {
@@ -126,6 +128,13 @@
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+
+  /* Value-driven tags (HkLocalizedInput): the language is listed but
+   * holds no text yet — the italic muted "Not set" placeholder. */
+  &[data-unset] {
+    font-style: italic;
+    color: rgb(var(--color-muted));
+  }
 }
 
 .hk-affix-tag-meta {
@@ -167,12 +176,12 @@
 }
 
 /* ── option rows ────────────────────────────────────────────────────── */
-/* Positioned host for the overlay scrollbar tracks: wraps ONLY the
- * scrolling list viewport (the menu body also contains the header/
- * search band), carries the popup's width constraints so the geometry
- * is unchanged by the wrapper. */
+/* Width container for the option list — carries the popup's width
+ * constraints so the list block keeps its designed measure inside the
+ * hosting window (HkSelectPanel popout / mobile sheet). It is NOT a
+ * scroll region: the window owns THE single scrollbar and scrolls the
+ * whole popup content (tags + search + rows) as one. */
 .hk-affix-scroll {
-  position: relative;
   display: flex;
   flex-direction: column;
   min-width: 13rem;
@@ -189,20 +198,15 @@
   width: 100%;
 }
 
+/* NO max-height / overflow here — ONE SCROLLBAR PER WINDOW (2026-09-08
+ * user report: the language sheet showed two nested scrollbars, this
+ * list's 17rem cap + the sheet's own). The list grows with its content
+ * and the hosting window scrolls it. */
 .hk-affix-list {
   display: flex;
   flex-direction: column;
   gap: 1px;
   padding: 4px 6px 8px;
-  max-height: 17rem;
-  overflow-y: auto;
-  /* Overlay scrollbar (useOverlayScrollbar) — the native chrome is
-   * always hidden, never styled. */
-  scrollbar-width: none;
-
-  &::-webkit-scrollbar {
-    display: none;
-  }
 }
 
 .hk-affix-row {

package/src/components/HkAffixPicker.singleScroll.contract.test.ts

@@ -0,0 +1,70 @@
+/**
+ * Source contract: ONE SCROLLBAR PER WINDOW (2026-09-08 user report —
+ * the localized input's language sheet showed two nested scrollbars:
+ * the HkSelectPanel sheet's own AND the affix picker's 17rem-capped row
+ * list scrolling inside it). Principle: every window has exactly ONE
+ * scrollbar serving the window's own content; a second scroll level
+ * belongs in a sub-window, never an inline embed. HkAffixPicker's popup
+ * therefore mounts no scroll region of its own — the window surface
+ * (desktop popout / mobile sheet) scrolls tags + search + rows as one.
+ */
+import { describe, expect, it } from "vitest";
+import { readFileSync } from "node:fs";
+import { dirname, join } from "node:path";
+import { fileURLToPath } from "node:url";
+
+const here = dirname(fileURLToPath(import.meta.url));
+const scss = readFileSync(join(here, "HkAffixPicker.scss"), "utf-8");
+const tsx = readFileSync(join(here, "HkAffixPicker.tsx"), "utf-8");
+
+/** Extract ONE balanced `{...}` declaration block following the given
+ *  selector — a naive `[^}]*` would stop at the first nested `}` and let
+ *  properties appended after a future nested block evade the pin. */
+function cssBlock(src: string, selector: string): string {
+  const at = src.indexOf(selector);
+  expect(at, `${selector} block exists`).toBeGreaterThanOrEqual(0);
+  const open = src.indexOf("{", at);
+  let depth = 0;
+  for (let i = open; i < src.length; i++) {
+    if (src[i] === "{") depth++;
+    else if (src[i] === "}") {
+      depth--;
+      if (depth === 0) return src.slice(open, i + 1);
+    }
+  }
+  return "";
+}
+
+function expectNoScroll(block: string, what: string): void {
+  expect(block, `${what} block exists`).toBeTruthy();
+  expect(block).not.toMatch(/max-height/);
+  expect(block).not.toMatch(/overflow/);
+  expect(block).not.toMatch(/scrollbar-width/);
+}
+
+describe("HkAffixPicker single-scrollbar-per-window contract", () => {
+  it("the row list carries no max-height and no overflow of its own", () => {
+    expectNoScroll(cssBlock(scss, ".hk-affix-list"), ".hk-affix-list");
+  });
+
+  it("the width container is neither a scroll region nor a track host", () => {
+    const block = cssBlock(scss, ".hk-affix-scroll");
+    expectNoScroll(block, ".hk-affix-scroll");
+    // The old overlay-rail host role is gone — nothing needs a
+    // positioning context anymore.
+    expect(block).not.toMatch(/position\s*:/);
+    // Defense in depth: the mobile-sheet descendant override (width/
+    // centering only) must never grow a scroll region either.
+    const sheetBlock = cssBlock(
+      scss.slice(scss.indexOf(".hk-select-sheet-panel .hk-affix-scroll")),
+      ".hk-affix-scroll",
+    );
+    expect(sheetBlock, "sheet descendant block exists").toBeTruthy();
+    expectNoScroll(sheetBlock, ".hk-select-sheet-panel .hk-affix-scroll");
+  });
+
+  it("the popup mounts no overlay scrollbar machinery", () => {
+    expect(tsx).not.toContain("attachOverlayScrollbars");
+    expect(tsx).not.toContain("OverlayScrollbarHandle");
+  });
+});

package/src/components/HkAffixPicker.test.tsx

@@ -29,6 +29,7 @@ interface MountOptions {
   closeOnSelect?: boolean;
   confirmRemove?: boolean;
   disabled?: boolean;
+  tagValues?: Record<string, string>;
 }
 
 function mountPicker(opts: MountOptions = {}) {
@@ -52,6 +53,7 @@ function mountPicker(opts: MountOptions = {}) {
         closeOnSelect: opts.closeOnSelect,
         confirmRemove: opts.confirmRemove,
         disabled: opts.disabled ?? false,
+        tagValues: opts.tagValues,
         onSelect: (key: string) => events.select.push(key),
         onRemove: (key: string) => events.remove.push(key),
         onCustom: (q: string) => events.custom.push(q),
@@ -213,12 +215,12 @@ describe("HkAffixPicker", () => {
     const { container } = mountPicker();
     await openPopup(container);
     // A no-match query swaps the default slot to the empty branch —
-    // the scrolling list (and its overlay-scrollbar host) unmounts.
+    // the list block unmounts.
     await typeQuery("zzz-none");
     expect(document.querySelector(".hk-affix-empty")).toBeTruthy();
     expect(document.querySelector(".hk-affix-scroll")).toBeNull();
     // Clearing the query remounts a FRESH list — the row list must come
-    // back and the overlay host must be remounted for the scrollbar.
+    // back inside its width container.
     await typeQuery("");
     expect(document.querySelector(".hk-affix-empty")).toBeNull();
     expect(rows().map((r) => r.textContent)).toEqual([
@@ -380,4 +382,66 @@ describe("HkAffixPicker", () => {
     await openPopup(container);
     expect(rows()).toHaveLength(0);
   });
+
+  it("tagValues swaps the tag primary text to each key's value", async () => {
+    const { container } = mountPicker({
+      mode: "multi",
+      selected: ["cn", "jp"],
+      tagValues: { cn: "China's stored text", jp: "  " },
+    });
+    await openPopup(container);
+    const texts = tags().map(
+      (t) => t.querySelector(".hk-affix-tag-text")?.textContent,
+    );
+    // cn carries its stored value; jp (whitespace-only = unfilled) shows
+    // the italic unset placeholder.
+    expect(texts).toEqual(["China's stored text", "Not set"]);
+    expect(tags()[0].querySelector(".hk-affix-tag-text")?.hasAttribute("data-unset")).toBe(false);
+    expect(tags()[1].querySelector(".hk-affix-tag-text")?.hasAttribute("data-unset")).toBe(true);
+    // The autonym survives as the tag's identity in the title (and the
+    // confirm dialog / aria naming, asserted in the dialog tests).
+    expect(
+      tags()[0].querySelector<HTMLButtonElement>(".hk-affix-tag-body")?.title,
+    ).toContain("China");
+    // The pick rows are untouched — they keep the autonym labels.
+    expect(rows().map((r) => r.textContent)).toEqual([
+      expect.stringContaining("中华人民共和国"),
+      expect.stringContaining("United States"),
+    ]);
+  });
+
+  it("a tagValues key missing from the map renders the unset placeholder", async () => {
+    const { container } = mountPicker({
+      mode: "multi",
+      selected: ["us"],
+      tagValues: {},
+    });
+    await openPopup(container);
+    const text = tags()[0].querySelector(".hk-affix-tag-text")!;
+    expect(text.textContent).toBe("Not set");
+    expect(text.hasAttribute("data-unset")).toBe(true);
+  });
+
+  it("without tagValues the tags keep the autonym labels (no unset state)", async () => {
+    const { container } = mountPicker({ mode: "multi", selected: ["cn"] });
+    await openPopup(container);
+    const text = tags()[0].querySelector(".hk-affix-tag-text")!;
+    expect(text.textContent).toBe("China");
+    expect(text.hasAttribute("data-unset")).toBe(false);
+  });
+
+  it("mounts NO inner scroll region — the window owns the one scrollbar", async () => {
+    const { container } = mountPicker({
+      mode: "multi",
+      selected: ["cn", "jp", "us"],
+    });
+    await openPopup(container);
+    expect(
+      document.querySelector<HTMLElement>(".hk-affix-list"),
+      "row list renders",
+    ).toBeTruthy();
+    // No overlay-scroll chrome of the list's own inside the popup — the
+    // CSS/text half of the contract is pinned by the contract test.
+    expect(document.querySelector(".hk-affix-list .hk-scrollbar-track")).toBeNull();
+  });
 });

package/src/components/HkAffixPicker.tsx

@@ -1,8 +1,6 @@
 import {
   computed,
   defineComponent,
-  nextTick,
-  onBeforeUnmount,
   ref,
   watch,
   type PropType,
@@ -12,10 +10,6 @@ import {
 import { ChevronDown, Plus, Search, X } from "lucide-vue-next";
 
 import { useI18n } from "../i18n/context";
-import {
-  attachOverlayScrollbars,
-  type OverlayScrollbarHandle,
-} from "../composables/useOverlayScrollbar";
 
 import HkInput from "./HkInput";
 import HkListTransition from "./HkListTransition";
@@ -71,6 +65,23 @@ function isSubsequence(query: string, text: string): boolean {
  *     without leaving the keyboard flow (Enter picks the first row, or
  *     the custom row when nothing matches).
  *
+ * ONE SCROLLBAR PER WINDOW: the popup mounts NO scroll region of its
+ * own — the window surface it opens as (the desktop popout or the
+ * mobile bottom sheet, both provided by HkSelectPanel) owns THE single
+ * scrollbar and scrolls the whole popup content (tags + search + rows)
+ * as one. The row list deliberately carries no max-height/overflow; a
+ * nested second scrollbar inside the same window is a contract
+ * violation (2026-09-08 user report: the language sheet scrolled twice).
+ *
+ * With `tagValues`, the multi picker's TAG LIST switches to
+ * value-driven primary text: a selected key renders its mapped value
+ * (trimmed), and a key with no value renders `tagUnsetText` in an
+ * italic muted state (`data-unset`) — "the language is listed but
+ * nothing typed yet". The autonym label stays in the tag's title /
+ * aria naming and the confirm dialog, which identify the LANGUAGE, not
+ * the current text. Hosts that don't pass `tagValues` keep the
+ * autonym-label tags.
+ *
  * The picker owns ZERO field semantics: selection state lives with the
  * host (`selected` key(s) in, events out), and the chip visuals come
  * from the host through the scoped `chip` slot — the same component
@@ -103,6 +114,18 @@ export const HkAffixPicker = defineComponent({
     /** Gate tag deletion behind a confirm message box (multi mode).
      *  Default true; pass false when the host runs its own guard. */
     confirmRemove: { type: Boolean, default: true },
+    /** Per-key value text replacing the tag list's primary label (multi
+     *  mode). Provided = value-driven tags: a key mapping to a non-empty
+     *  string renders that string; an empty/missing key renders
+     *  `tagUnsetText` italic (`data-unset`). Left undefined = the
+     *  autonym-label tags. Does not affect the pick rows. */
+    tagValues: {
+      type: Object as PropType<Record<string, string>>,
+      default: undefined,
+    },
+    /** Text shown (italic) for a tag whose `tagValues` entry is empty;
+     *  defaulted from the i18n bundle. */
+    tagUnsetText: { type: String, default: undefined },
     /** Override the default close-on-pick (single: true, multi: false).
      *  E.g. a multi picker that should close after each add passes
      *  true; a single picker that should stay open passes false. */
@@ -141,58 +164,17 @@ export const HkAffixPicker = defineComponent({
      *  are outside THIS popup, and the panel's outside-close must not
      *  tear the tag list down mid-decision. */
     const confirmHeld = ref(false);
-    /** The scrolling option list and its overlay-scrollbar host (see the
-     *  default slot — the host wraps ONLY the list viewport, not the
-     *  header/search band). */
-    const listRef = ref<HTMLElement | null>(null);
-    const scrollHostRef = ref<HTMLElement | null>(null);
-    /** Live overlay-scrollbar handle for the open popup; null when the
-     *  popup is closed (content not mounted). */
-    let scrollbar: OverlayScrollbarHandle | null = null;
-    /** The viewport element `scrollbar` is currently attached to, so a
-     *  remounted list (the empty-state swap) can be told apart from the
-     *  same in-flight list across content-size updates. */
-    let scrollbarViewport: HTMLElement | null = null;
 
-    function detachScrollbar() {
-      scrollbar?.detach();
-      scrollbar = null;
-      scrollbarViewport = null;
-    }
-
-    function attachScrollbar() {
-      detachScrollbar();
-      if (listRef.value && scrollHostRef.value) {
-        scrollbarViewport = listRef.value;
-        scrollbar = attachOverlayScrollbars(listRef.value, {
-          axis: "vertical",
-          host: scrollHostRef.value,
-        });
-      }
-    }
-
-    // A fresh open starts calm: empty filter.
+    // A fresh open starts calm: empty filter. (The popup mounts no
+    // scroll machinery of its own — the window surface owns the one
+    // scrollbar — so there is nothing to attach/detach on open/close.)
     watch(open, (v) => {
       if (!v) {
         query.value = "";
       }
-      if (v) {
-        // The list mounts on this very render — attach the overlay
-        // scrollbar once the DOM has landed. A same-tick open→close
-        // must not arm it on the leaving popup (the close branch
-        // already detached it).
-        void nextTick(() => {
-          if (!open.value) return;
-          attachScrollbar();
-        });
-      } else {
-        detachScrollbar();
-      }
       emit("update:open", v);
     });
 
-    onBeforeUnmount(detachScrollbar);
-
     const selectedKeys = computed<readonly string[]>(() =>
       Array.isArray(props.selected) ? props.selected : props.selected ? [props.selected] : [],
     );
@@ -232,29 +214,6 @@ export const HkAffixPicker = defineComponent({
       });
     });
 
-    // Content-size changes from the search filter change the thumb
-    // geometry without resizing the viewport — keep it in sync on the
-    // live scrollbar (no-op while the popup is closed). Post-flush so
-    // the DOM (esp. a remounted list after the empty-state swap) has
-    // landed and the template refs point at the live nodes before we
-    // decide whether to attach, re-attach or update.
-    watch(
-      [filteredRows, query],
-      () => {
-        if (!open.value) return;
-        if (!listRef.value) {
-          detachScrollbar();
-          return;
-        }
-        if (listRef.value !== scrollbarViewport) {
-          attachScrollbar();
-          return;
-        }
-        scrollbar?.update();
-      },
-      { flush: "post" },
-    );
-
     /** Exact label match suppresses the custom row while the user is
      *  simply re-typing an existing entry. */
     const exactMatch = computed(
@@ -351,6 +310,14 @@ export const HkAffixPicker = defineComponent({
         props.searchPlaceholder ?? t("hikari::affixPicker.search", "Search");
       const emptyText = props.emptyText ?? t("hikari::affixPicker.empty", "No matches");
       const removeLabel = t("hikari::affixPicker.remove", "Remove");
+      // Value-driven tags (tagValues provided): each tag's primary text
+      // is its mapped value, or the italic unset text when empty. The
+      // autonym stays the tag's identity in title/aria and the dialog.
+      const valueDriven = props.tagValues !== undefined;
+      const unsetText =
+        props.tagUnsetText ?? t("hikari::affixPicker.unset", "Not set");
+      const tagValue = (key: string): string =>
+        (props.tagValues?.[key] ?? "").trim();
       const placement = props.side === "suffix" ? "bottom-end" : "bottom-start";
       return (
         <>
@@ -420,6 +387,7 @@ export const HkAffixPicker = defineComponent({
                         class="hk-affix-tag-list"
                       >
                         {tags.map((tag) => {
+                          const value = tagValue(tag.key);
                           return (
                             <div
                               key={tag.key}
@@ -429,7 +397,9 @@ export const HkAffixPicker = defineComponent({
                               <button
                                 type="button"
                                 class="hk-affix-tag-body"
-                                title={`${tag.label}${tag.meta ? ` (${tag.meta})` : ""}`}
+                                title={`${tag.label}${tag.meta ? ` (${tag.meta})` : ""}${
+                                  valueDriven ? `: ${value || unsetText}` : ""
+                                }`}
                                 aria-label={`${t("hikari::affixPicker.switchTo", "Switch to")} ${tag.label}`}
                                 onClick={(e: MouseEvent) => {
                                   e.stopPropagation();
@@ -441,7 +411,12 @@ export const HkAffixPicker = defineComponent({
                                     {tag.flag}
                                   </span>
                                 )}
-                                <span class="hk-affix-tag-text">{tag.label}</span>
+                                <span
+                                  class="hk-affix-tag-text"
+                                  data-unset={valueDriven && !value ? "" : undefined}
+                                >
+                                  {valueDriven ? value || unsetText : tag.label}
+                                </span>
                                 {tag.meta && (
                                   <span class="hk-affix-tag-meta">{tag.meta}</span>
                                 )}
@@ -499,8 +474,12 @@ export const HkAffixPicker = defineComponent({
               ),
               default: () =>
                 rows.length > 0 || customVisible.value ? (
-                  <div class="hk-affix-scroll" ref={scrollHostRef}>
-                    <div class="hk-affix-list" ref={listRef}>
+                  /* Width container only — the window surface (HkSelectPanel
+                   * popout / sheet) owns THE single scrollbar and scrolls this
+                   * list with the rest of the popup content; no inner
+                   * max-height/overflow here, ever. */
+                  <div class="hk-affix-scroll">
+                    <div class="hk-affix-list">
                       {rows.map((option) => {
                       const active =
                         props.mode === "single"

package/src/components/HkFileBrowserDialog.scss

@@ -326,15 +326,16 @@
 // Entries area — the list/grid body (state carries on data-layout)
 // ------
 
+/* ONE SCROLLBAR PER WINDOW (2026-09-08 audit): the entries area is NOT a
+ * scroll region — its old 24rem cap + native bar was a second scrollbar
+ * nested inside the modal window. The listing grows with its content and
+ * the HkModal body scroller (the window's ONE scrollbar) scrolls it. */
 .hk-file-browser-entries {
   display: flex;
   flex-direction: column;
   min-height: 12rem;
-  max-height: 24rem;
-  overflow-y: auto;
   border: 1px solid var(--border-subtle);
   border-radius: var(--radius-md);
-  overscroll-behavior: contain;
 }
 
 .hk-file-browser-loading {

package/src/components/HkKeywordSearchModal.scss

@@ -52,27 +52,15 @@
   }
 }
 
-/* Track host for the results list's overlay scrollbar — hugs the LIST
-   band only (the modal body also holds the search-input row). */
-.hk-kw-search-results-wrap {
-  position: relative;
-}
-
+/* ONE SCROLLBAR PER WINDOW (2026-09-08 audit): the results list is NOT a
+   scroll region — its old 22rem/50vh cap + overlay rail was a second
+   scrollbar nested inside the modal window (the HkModal body scroller).
+   The list grows with its content; the modal window scrolls it. */
 .hk-kw-search-results {
   display: flex;
   flex-direction: column;
   gap: var(--hi-space-4, 0.25rem);
-  max-height: min(22rem, 50vh);
-  overflow-y: auto;
-  overflow-x: hidden;
   padding: 0 var(--hi-space-2, 0.125rem);
-  /* Overlay scrollbar (useOverlayScrollbar) — the native chrome is
-     hidden, never styled. */
-  scrollbar-width: none;
-
-  &::-webkit-scrollbar {
-    display: none;
-  }
 }
 
 .hk-kw-search-result {

package/src/components/HkKeywordSearchModal.tsx

@@ -1,11 +1,10 @@
-import { computed, defineComponent, nextTick, onBeforeUnmount, ref, watch, type PropType } from "vue";
+import { computed, defineComponent, onBeforeUnmount, ref, watch, type PropType } from "vue";
 
 import { useI18n } from "../i18n/context";
 
 import "./HkKeywordSearchModal.scss";
 import HModal from "./HkModal";
 import { scheduleCronAfter, type CronHandle } from "../runtime/cronBus";
-import { attachOverlayScrollbars, type OverlayScrollbarHandle } from "../composables/useOverlayScrollbar";
 
 interface FuzzyMatch {
   matched: boolean;
@@ -161,21 +160,21 @@ export default defineComponent({
     }
 
     const resultsRef = ref<HTMLDivElement | null>(null);
-    // Positioned wrapper around ONLY the results list — the rail host.
-    const resultsWrapRef = ref<HTMLDivElement | null>(null);
-    let resultsScrollbar: OverlayScrollbarHandle | null = null;
-
-    onBeforeUnmount(() => {
-      resultsScrollbar?.detach();
-      resultsScrollbar = null;
-      debounceTimer?.disconnect();
-    });
+    /** ONE SCROLLBAR PER WINDOW (2026-09-08 audit): the results list no
+     *  longer scrolls itself (its old 22rem/50vh cap + overlay rail was a
+     *  second scrollbar nested inside the modal window). The HkModal
+     *  body scroller is THE scrollbar; new results reset ITS position. */
+    function resetResultsScroll(): void {
+      resultsRef.value
+        ?.closest<HTMLElement>(".hk-modal-body-scroll")
+        ?.scrollTo({ top: 0 });
+    }
 
-    watch(debouncedQuery, (q) => {
-      if (semanticActive.value) void runSemantic(q);
+    watch(debouncedQuery, () => {
+      if (semanticActive.value) void runSemantic(debouncedQuery.value);
       // New results replace the list (fuzzy + semantic paths both
-      // recompute from debouncedQuery): return the viewport to the top.
-      resultsRef.value?.scrollTo({ top: 0 });
+      // recompute from debouncedQuery): return the window to the top.
+      resetResultsScroll();
     });
 
     const results = computed(() => {
@@ -189,33 +188,22 @@ export default defineComponent({
 
     watch(
       () => props.modelValue,
-      (open) => {
-        if (open) {
+      () => {
+        if (props.modelValue) {
           query.value = "";
           debouncedQuery.value = "";
           semanticResults.value = [];
           semanticLoading.value = false;
-          // The results list mounts with the modal body — attach the
-          // overlay scrollbar (shared chrome) once the DOM has landed;
-          // detach on close so nothing leaks in the modal portal.
-          void nextTick(() => {
-            if (!props.modelValue || !resultsRef.value) return;
-            resultsScrollbar?.detach();
-            // Exact host = the results wrapper (see the render): the
-            // broader modal body also holds the search-input row, and a
-            // rail spanning that would light up in the wrong place.
-            resultsScrollbar = attachOverlayScrollbars(resultsRef.value, {
-              axis: "vertical",
-              host: resultsWrapRef.value ?? undefined,
-            });
-          });
         } else {
-          resultsScrollbar?.detach();
-          resultsScrollbar = null;
+          semanticLoading.value = false;
         }
       },
     );
 
+    onBeforeUnmount(() => {
+      debounceTimer?.disconnect();
+    });
+
     function pick(rec: unknown) {
       emit("select", rec);
       emit("update:modelValue", false);
@@ -278,8 +266,9 @@ export default defineComponent({
             )}
           </div>
 
-          <div class="hk-kw-search-results-wrap" ref={resultsWrapRef}>
-            <div class="hk-kw-search-results" ref={resultsRef}>
+          {/* No inner scroll region — the modal window is THE scroller
+              (ONE SCROLLBAR PER WINDOW, see resetResultsScroll). */}
+          <div class="hk-kw-search-results" ref={resultsRef}>
             {semanticActive.value ? (
               semanticLoading.value && semanticResults.value.length === 0 ? (
                 <div class="hk-kw-search-empty">
@@ -336,7 +325,6 @@ export default defineComponent({
                 </button>
               ))
             )}
-            </div>
           </div>
         </div>
       </HModal>

package/src/components/HkLocalizedInput.test.tsx

@@ -133,27 +133,30 @@ function pickerTags(): HTMLElement[] {
   return [...document.querySelectorAll<HTMLElement>(".hk-affix-tag")];
 }
 
-function tagLabels(): string[] {
+/** Primary texts of the tags — each language's stored value, or the
+ *  italic "Not set" placeholder for the edited-but-unfilled one. */
+function tagTexts(): string[] {
   return pickerTags().map(
     (t) => t.querySelector(".hk-affix-tag-text")?.textContent ?? "",
   );
 }
 
-/** The tag whose label is `label`. */
-function tag(label: string): HTMLElement | undefined {
+/** The tag whose locale-code suffix is `code` (the code suffix is the
+ *  stable identity — the primary text is the language's VALUE). */
+function tagByCode(code: string): HTMLElement | undefined {
   return pickerTags().find(
-    (t) => (t.querySelector(".hk-affix-tag-text")?.textContent ?? "") === label,
+    (t) => t.querySelector(".hk-affix-tag-meta")?.textContent === code,
   );
 }
 
 /** The tag body (switch target) of the language tag. */
-function tagBody(label: string): HTMLButtonElement | undefined {
-  return tag(label)?.querySelector<HTMLButtonElement>(".hk-affix-tag-body") ?? undefined;
+function tagBody(code: string): HTMLButtonElement | undefined {
+  return tagByCode(code)?.querySelector<HTMLButtonElement>(".hk-affix-tag-body") ?? undefined;
 }
 
 /** The × of the language tag (opens the confirm dialog). */
-function tagX(label: string): HTMLButtonElement | undefined {
-  return tag(label)?.querySelector<HTMLButtonElement>(".hk-affix-tag-x") ?? undefined;
+function tagX(code: string): HTMLButtonElement | undefined {
+  return tagByCode(code)?.querySelector<HTMLButtonElement>(".hk-affix-tag-x") ?? undefined;
 }
 
 /** The message box's confirm/cancel buttons (mounted at body level). */
@@ -164,10 +167,6 @@ function boxButton(confirm: boolean): HTMLButtonElement {
   return btn!;
 }
 
-/** Full erase flow: the × opens the shared confirm dialog naming the
- *  entry; the dialog's Confirm erases. The leaving tag lingers through
- *  its transition window (jsdom has no CSS engine, so the ghost clears
- *  on the next-frame fallback) — poll until the tag is really gone. */
 /** Poll until the condition turns truthy (box leave animations and
  *  tag transitions lag a few frames behind the click). */
 async function until(condition: () => boolean, what: string): Promise<void> {
@@ -201,8 +200,13 @@ async function untilBoxOpen(label: string): Promise<void> {
   ).toContain(label);
 }
 
-async function eraseViaConfirm(label: string, tagGone = true) {
-  tagX(label)!.click();
+/** Full erase flow: the × opens the shared confirm dialog naming the
+ *  entry (by its language label); the dialog's Confirm erases. The
+ *  leaving tag lingers through its transition window (jsdom has no CSS
+ *  engine, so the ghost clears on the next-frame fallback) — poll until
+ *  the tag is really gone. */
+async function eraseViaConfirm(code: string, label: string, tagGone = true) {
+  tagX(code)!.click();
   await untilBoxOpen(label);
   boxButton(true).click();
   await until(() => !document.body.querySelector(".hk-message-box-text"), "dialog closes on confirm");
@@ -210,7 +214,7 @@ async function eraseViaConfirm(label: string, tagGone = true) {
   // no other language remains (it stays as the active tag), so the
   // absence wait only applies to genuinely-removed entries.
   if (tagGone) {
-    await until(() => !tag(label), `tag "${label}" erased`);
+    await until(() => !tagByCode(code), `tag "${code}" erased`);
   } else {
     await nextTick();
     await nextTick();
@@ -282,9 +286,11 @@ describe("HkLocalizedInput", () => {
     // The chip stays code-free while the popup is closed.
     expect(queryChip(container).textContent).not.toContain("(zh-Hans)");
     await openPicker(container);
-    // Tags show the bare label plus a muted code suffix — no parens form.
-    const zhTag = tag("简体中文");
+    // Tags show the language's VALUE plus a muted code suffix — no
+    // parens form, and never the autonym as the primary text.
+    const zhTag = tagByCode("zh-Hans");
     expect(zhTag, "tag for the filled translation renders").toBeTruthy();
+    expect(zhTag!.querySelector(".hk-affix-tag-text")?.textContent).toBe("工厂总览");
     expect(zhTag!.querySelector(".hk-affix-tag-meta")?.textContent).toBe("zh-Hans");
     expect(zhTag!.textContent).not.toContain("(zh-Hans)");
     // Addable rows carry their code as the muted meta too.
@@ -324,10 +330,11 @@ describe("HkLocalizedInput", () => {
       translations: { en: "Plant overview", "zh-Hans": "工厂总览" },
     });
     await openPicker(container);
-    // Every language in the map is a tag — the edited one marked active.
-    expect(tagLabels()).toEqual(expect.arrayContaining(["English", "简体中文"]));
+    // Every language in the map is a tag showing its VALUE — the edited
+    // one marked active.
+    expect(tagTexts()).toEqual(expect.arrayContaining(["Plant overview", "工厂总览"]));
     const activeTag = pickerTags().find((t) => t.hasAttribute("data-active"));
-    expect(activeTag?.querySelector(".hk-affix-tag-text")?.textContent).toBe("English");
+    expect(activeTag?.querySelector(".hk-affix-tag-text")?.textContent).toBe("Plant overview");
     // One body + one arm/confirm × per tag.
     for (const t of pickerTags()) {
       expect(t.querySelector(".hk-affix-tag-body"), "body on every tag").toBeTruthy();
@@ -340,9 +347,14 @@ describe("HkLocalizedInput", () => {
   it("lists the edited language even while it holds no translation", async () => {
     const { container } = mountInput({ modelValue: "Plant overview" });
     await openPicker(container);
-    // The field edits English with nothing stored yet — still listed, active.
-    expect(tagLabels()).toEqual(["English"]);
-    expect(tag("English")?.hasAttribute("data-active")).toBe(true);
+    // The field edits English with nothing stored yet — still listed,
+    // active, and showing the italic "Not set" placeholder.
+    expect(tagTexts()).toEqual(["Not set"]);
+    const enTag = tagByCode("en")!;
+    expect(enTag.hasAttribute("data-active")).toBe(true);
+    expect(enTag.querySelector(".hk-affix-tag-text")?.hasAttribute("data-unset")).toBe(true);
+    // The autonym survives as the language's identity (title naming).
+    expect(tagBody("en")?.title).toContain("English");
   });
 
   it("switches to an existing language via its tag body: commits text, loads its value, closes the popup", async () => {
@@ -351,7 +363,7 @@ describe("HkLocalizedInput", () => {
       translations: { en: "Plant overview", "zh-Hans": "工厂总览" },
     });
     await openPicker(container);
-    const body = tagBody("简体中文");
+    const body = tagBody("zh-Hans");
     expect(body).toBeTruthy();
     body!.click();
     await nextTick();
@@ -440,8 +452,8 @@ describe("HkLocalizedInput", () => {
     mounts.push({ app, container });
     expect(queryChip(container).disabled).toBe(false);
     await openPicker(container);
-    // Only the current language's tag remains in the list.
-    expect(tagLabels()).toEqual(["English"]);
+    // Only the current language's tag remains in the list (its value).
+    expect(tagTexts()).toEqual(["Plant overview"]);
   });
 
   it("keeps edits on the switched-from language when the text is blank", async () => {
@@ -450,7 +462,7 @@ describe("HkLocalizedInput", () => {
       translations: { "zh-Hans": "工厂总览" },
     });
     await openPicker(container);
-    const body = tagBody("简体中文");
+    const body = tagBody("zh-Hans");
     body!.click();
     await nextTick();
     await nextTick();
@@ -465,7 +477,7 @@ describe("HkLocalizedInput", () => {
       translations: { en: "Plant overview", "zh-Hans": "工厂总览" },
     });
     await openPicker(container);
-    const body = tagBody("简体中文");
+    const body = tagBody("zh-Hans");
     body!.click();
     await nextTick();
     await nextTick();
@@ -520,7 +532,7 @@ describe("HkLocalizedInput", () => {
     app.mount(container);
     mounts.push({ app, container });
     await openPicker(container);
-    expect(tag("简体中文")?.querySelector(".hk-affix-tag-flag")?.textContent).toBe(flagOf("cn"));
+    expect(tagByCode("zh-Hans")?.querySelector(".hk-affix-tag-flag")?.textContent).toBe(flagOf("cn"));
   });
 
   it("follows a sourceLang change without stealing focus", async () => {
@@ -566,14 +578,14 @@ describe("HkLocalizedInput", () => {
       translations: { en: "Plant overview", "zh-Hans": "工厂总览" },
     });
     await openPicker(container);
-    tagX("简体中文")!.click();
+    tagX("zh-Hans")!.click();
     await untilBoxOpen("简体中文");
     // The dialog names the entry and carries a danger-toned confirm.
     expect(boxButton(true).className).toContain("hk-btn-danger");
     // Cancel → nothing is erased, the dialog closes.
     boxButton(false).click();
     await until(() => !document.body.querySelector(".hk-message-box-text"), "dialog closes on cancel");
-    await until(() => !!tag("简体中文"), "tag stays after cancel");
+    await until(() => !!tagByCode("zh-Hans"), "tag stays after cancel");
   });
 
   it("names the tag body by its switch action and the × by its remove intent", async () => {
@@ -582,8 +594,8 @@ describe("HkLocalizedInput", () => {
       translations: { en: "Plant overview", "zh-Hans": "工厂总览" },
     });
     await openPicker(container);
-    expect(tagBody("简体中文")?.getAttribute("aria-label")).toBe("Switch to 简体中文");
-    expect(tagX("简体中文")?.getAttribute("aria-label")).toBe("Remove — 简体中文");
+    expect(tagBody("zh-Hans")?.getAttribute("aria-label")).toBe("Switch to 简体中文");
+    expect(tagX("zh-Hans")?.getAttribute("aria-label")).toBe("Remove — 简体中文");
   });
 
   it("keeps the picker usable after a dismissed delete dialog", async () => {
@@ -592,13 +604,13 @@ describe("HkLocalizedInput", () => {
       translations: { en: "Plant overview", "zh-Hans": "工厂总览" },
     });
     await openPicker(container);
-    tagX("简体中文")!.click();
+    tagX("zh-Hans")!.click();
     await untilBoxOpen("简体中文");
     boxButton(false).click();
     await until(() => !document.body.querySelector(".hk-message-box-text"), "dialog closes on cancel");
     // The dialog never leaves the picker half-broken: the tag can still
     // switch the edited language right after a dismissal.
-    tagBody("简体中文")!.click();
+    tagBody("zh-Hans")!.click();
     await nextTick();
     await nextTick();
     expect(document.activeElement).toBe(queryField(container));
@@ -610,7 +622,7 @@ describe("HkLocalizedInput", () => {
       translations: { en: "Plant overview", "zh-Hans": "工厂总览" },
     });
     await openPicker(container);
-    await eraseViaConfirm("简体中文");
+    await eraseViaConfirm("zh-Hans", "简体中文");
     // The map loses only the erased language; no edit-state events fire.
     expect(events.translations.at(-1)).toEqual({ en: "Plant overview" });
     expect(events.modelValue).toEqual([]);
@@ -618,7 +630,7 @@ describe("HkLocalizedInput", () => {
     expect(queryField(container).value).toBe("Plant overview");
     expect(queryChip(container).textContent).toContain("English");
     // The popup STAYS open and the list updates live.
-    expect(tagLabels()).toEqual(["English"]);
+    expect(tagTexts()).toEqual(["Plant overview"]);
     expect(pickerRows().some((r) => (r.textContent ?? "").includes("日本語"))).toBe(true);
   });
 
@@ -628,10 +640,10 @@ describe("HkLocalizedInput", () => {
       translations: { en: "Plant overview", "zh-Hans": "工厂总览", ja: "プラント概覧" },
     });
     await openPicker(container);
-    await eraseViaConfirm("简体中文");
-    await eraseViaConfirm("日本語");
+    await eraseViaConfirm("zh-Hans", "简体中文");
+    await eraseViaConfirm("ja", "日本語");
     expect(events.translations.at(-1)).toEqual({ en: "Plant overview" });
-    expect(tagLabels()).toEqual(["English"]);
+    expect(tagTexts()).toEqual(["Plant overview"]);
   });
 
   it("falls back to the source language when the edited language is erased", async () => {
@@ -643,20 +655,20 @@ describe("HkLocalizedInput", () => {
     // Switch to zh-Hans first so erasing it means erasing the edited
     // language while the source still holds a translation.
     await openPicker(container);
-    tagBody("简体中文")!.click();
+    tagBody("zh-Hans")!.click();
     await nextTick();
     await nextTick();
     expect(queryChip(container).textContent).toContain("简体中文");
     expect(queryChip(container).textContent).not.toContain("(zh-Hans)");
     await openPicker(container);
-    await eraseViaConfirm("简体中文");
+    await eraseViaConfirm("zh-Hans", "简体中文");
     expect(events.translations.at(-1)).toEqual({ en: "Plant overview" });
     expect(events.modelValue.at(-1)).toBe("Plant overview");
     expect(events.languagechange.at(-1)).toBe("en");
     expect(queryChip(container).textContent).toContain("English");
     expect(queryChip(container).textContent).not.toContain("(en)");
     // The popup stays open after an erase.
-    expect(tagLabels()).toEqual(["English"]);
+    expect(tagTexts()).toEqual(["Plant overview"]);
   });
 
   it("falls back to the first remaining translation when the source language is erased", async () => {
@@ -666,7 +678,7 @@ describe("HkLocalizedInput", () => {
       translations: { en: "Plant overview", "zh-Hans": "工厂总览" },
     });
     await openPicker(container);
-    await eraseViaConfirm("English");
+    await eraseViaConfirm("en", "English");
     expect(events.translations.at(-1)).toEqual({ "zh-Hans": "工厂总览" });
     expect(events.modelValue.at(-1)).toBe("工厂总览");
     expect(events.languagechange.at(-1)).toBe("zh-Hans");
@@ -680,12 +692,13 @@ describe("HkLocalizedInput", () => {
       translations: { en: "Plant overview" },
     });
     await openPicker(container);
-    await eraseViaConfirm("English", false);
+    await eraseViaConfirm("en", "English", false);
     expect(events.translations.at(-1)).toEqual({});
     expect(events.modelValue.at(-1)).toBe("");
-    // The edited language tag stays (active); the popup stays open.
-    expect(tagLabels()).toEqual(["English"]);
-    expect(tag("English")?.hasAttribute("data-active")).toBe(true);
+    // The edited language tag stays (active, italic Not set); the popup
+    // stays open.
+    expect(tagTexts()).toEqual(["Not set"]);
+    expect(tagByCode("en")?.hasAttribute("data-active")).toBe(true);
     expect(pickerRows().some((r) => (r.textContent ?? "").includes("日本語"))).toBe(true);
   });
 
@@ -695,7 +708,7 @@ describe("HkLocalizedInput", () => {
       translations: { en: "Plant overview", "zh-Hans": "工厂总览" },
     });
     await openPicker(container);
-    tagBody("English")!.click();
+    tagBody("en")!.click();
     await nextTick();
     await nextTick();
     await untilPickerSettled();
@@ -723,4 +736,34 @@ describe("HkLocalizedInput", () => {
     expect(events.modelValue.at(-1)).toBe("Line one\nLine two");
     expect(events.translations.at(-1)).toEqual({ en: "Line one\nLine two" });
   });
+
+  it("tags show stored values; an unfilled language vanishes once left", async () => {
+    const { events, container } = mountInput({
+      modelValue: "",
+      translations: { "zh-Hans": "工厂总览" },
+    });
+    await openPicker(container);
+    // Filled language → its value as the primary text; the edited-but-
+    // unfilled source language → the italic Not set placeholder (the
+    // only tag that can ever be empty).
+    expect(tagTexts()).toEqual(["工厂总览", "Not set"]);
+    expect(tagByCode("en")!.querySelector(".hk-affix-tag-text")?.hasAttribute("data-unset")).toBe(true);
+    expect(tagByCode("zh-Hans")!.querySelector(".hk-affix-tag-text")?.hasAttribute("data-unset")).toBe(false);
+    // The autonym + code still identify the language beside the value.
+    expect(tagBody("zh-Hans")!.title).toContain("简体中文");
+    expect(tagByCode("zh-Hans")!.querySelector(".hk-affix-tag-meta")?.textContent).toBe("zh-Hans");
+    // Switching away from the unfilled language (adding ja moves the
+    // field there): "en" never entered translations, so it leaves the
+    // list — the Not set state only ever marks the CURRENT edit.
+    const jaRow = pickerRows().find((r) => (r.textContent ?? "").includes("日本語"));
+    jaRow!.click();
+    await nextTick();
+    await nextTick();
+    expect(events.languagechange.at(-1)).toBe("ja");
+    await untilPickerSettled();
+    await openPicker(container);
+    expect(tagByCode("en")).toBeUndefined();
+    expect(tagTexts()).toEqual(["工厂总览", "Not set"]);
+    expect(tagByCode("ja")).toBeTruthy();
+  });
 });

package/src/components/HkLocalizedInput.tsx

@@ -14,9 +14,11 @@ export interface HkLocaleOption {
   code: string;
   /** Display label — apps pass the SAME text their global language
    *  switcher shows (e.g. the autonym "简体中文" / "English"). The chip
-   *  renders the bare label; the menu's language tags render the label
-   *  plus a small code suffix, so the code lives only in the opened
-   *  menu. */
+   *  renders the bare label; the menu's language tags render the
+   *  language's stored translation (or the italic "Not set") plus a
+   *  small code suffix, and the label survives as the tag's title /
+   *  aria / confirm-dialog naming; the add-language rows render the
+   *  label plus the code. */
   label: string;
   /** Optional flag glyph rendered in the menu tags, matching the app's
    *  language switcher rows when they carry one. */
@@ -36,11 +38,19 @@ export interface HkLocaleOption {
  *   - Click the chip → the shared HkAffixPicker (multi-select, right
  *     anchored, closes on pick so the field is immediately editable):
  *       · a TAG LIST of every language currently present — the one being
- *         edited carries the active dot. The × on a tag arms the delete
- *         (danger tint) and a second tap erases; the popup stays open
- *         after removals so several translations can be wiped in one
- *         pass, with squeeze-in / squeeze-out list transitions
- *         (HkListTransition, animation-context aware);
+ *         edited carries the active dot. A tag's primary text is that
+ *         language's CURRENT TRANSLATION (value-driven `tagValues`), not
+ *         its autonym; the language being edited but not yet filled
+ *         renders an italic muted "Not set" placeholder (the only tag
+ *         that can be empty — an unfilled language vanishes from the
+ *         list the moment the field switches away, since empty values
+ *         never enter `translations`). The autonym and locale code stay
+ *         on the tag as title/aria naming and the muted code suffix.
+ *         The × on a tag arms the delete (danger tint) and a second tap
+ *         erases; the popup stays open after removals so several
+ *         translations can be wiped in one pass, with squeeze-in /
+ *         squeeze-out list transitions (HkListTransition,
+ *         animation-context aware);
  *       · a SEARCHABLE list of the languages NOT yet present — typing
  *         filters, picking adds the language and drops the field
  *         straight into edit state for it. This replaces the old
@@ -56,6 +66,8 @@ export interface HkLocaleOption {
  * (as a muted suffix on each tag) so the code never burns space inside
  * the field. The popup participates in the shared modal/dropdown stacking
  * contexts via HkMenu's popup-manager integration — safe inside modals.
+ * The popup mounts no scroll region of its own: the window surface it
+ * opens as owns the ONE scrollbar (HkAffixPicker contract).
  *
  * Set `multiline` to edit long-form translations: the field becomes an
  * auto-growing textarea (`rows` seeds the height, `autoGrow` lets it
@@ -305,6 +317,7 @@ export const HkLocalizedInput = defineComponent({
                     "Add language",
                   )}
                   emptyText={t("hikari::localizedInput.noMatches", "No matching language")}
+                  tagValues={props.translations}
                   onSelect={(code: string) => switchLanguage(code)}
                   onRemove={(code: string) => eraseLanguage(code)}
                 >

package/src/components/HkPopupSelect.scss

@@ -131,8 +131,9 @@
 
 // Mobile sheet form (HPopover sheetOnMobile): full-width option list with
 // touch-sized rows (row geometry flows from the shared sheet tokens).
-.hk-popover-panel.hk-is-sheet.hk-popup-select-content {
-  .hk-popup-select-viewport {
-    max-height: min(56vh, 24rem);
-  }
-}
+// ONE SCROLLBAR PER WINDOW (2026-09-08 audit): the sheet PANEL is the
+// window scroller (.hk-popover-panel.hk-is-sheet carries overflow-y:
+// auto), so the viewport must NOT cap itself here — an inner max-height
+// lit a second nested scrollbar inside the same window. The desktop
+// popout keeps its 240px content cap + viewport scroll, where the
+// viewport bar is the popup's only scrollbar.

package/src/components/HkProgressDialog.scss

@@ -1,27 +1,13 @@
-// HkProgressDialog.scss — the log pane's chrome. Inline styles cannot
-// carry the `::-webkit-scrollbar` half of the native-bar hide, so the
-// pane's visual block lives here like every other overlay-scroll
-// consumer (see packages/theme/styles/_scrollbar.scss).
+// HkProgressDialog.scss — the log pane's chrome.
+// ONE SCROLLBAR PER WINDOW (2026-09-08 audit): the pane is NOT a scroll
+// region — its old 10rem cap + overlay rail was a second scrollbar nested
+// inside the modal window. Logs grow unbounded; the HkModal body scroller
+// (the window's ONE scrollbar) scrolls them, and the tailing watcher in
+// HkProgressDialog.tsx keeps the latest line visible.
 // Use theme variables with namespace to avoid conflicts
 @use "./hikari-vars" as vars;
-/* Track host: wraps ONLY the log pane so the rail hugs the log band,
-   not the spinner/progress bands above it. */
-.s-progress-dialog-log-wrap {
-  position: relative;
-}
 
 .s-progress-dialog-log {
-  max-height: 10rem;
-  overflow: hidden auto;
-
-  /* Overlay scrollbar (useOverlayScrollbar) — the native chrome is
-     always hidden, never styled. */
-  scrollbar-width: none;
-
-  &::-webkit-scrollbar {
-    display: none;
-  }
-
   border-radius: 0.375rem;
   background: rgba(0, 0, 0, 0.06);
   padding: 0.5rem;

package/src/components/HkProgressDialog.tsx

@@ -1,7 +1,6 @@
-import { defineComponent, nextTick, onBeforeUnmount, ref, watch } from "vue";
+import { defineComponent, nextTick, ref, watch } from "vue";
 
 import { useProgressDialog } from "../composables/useProgressDialog";
-import { attachOverlayScrollbars, type OverlayScrollbarHandle } from "../composables/useOverlayScrollbar";
 import HModal from "./HkModal";
 import HProgressBar from "./HkProgressBar";
 import HSpinner from "./HkSpinner";
@@ -12,43 +11,22 @@ export default defineComponent({
   setup() {
     const state = useProgressDialog();
     const logRef = ref<HTMLElement>();
-    // Positioned wrapper around the conditional log pane — the rail host
-    // (the modal body also holds the spinner/progress bands).
-    const logWrapRef = ref<HTMLElement>();
-    // Overlay scrollbar (shared chrome) on the conditional log pane —
-    // attached when it mounts, detached when it unmounts.
-    let logScrollbar: OverlayScrollbarHandle | null = null;
-
-    function syncLogScrollbar() {
-      void nextTick(() => {
-        if (logRef.value) {
-          logScrollbar ??= attachOverlayScrollbars(logRef.value, {
-            axis: "vertical",
-            host: logWrapRef.value,
-          });
-        } else {
-          logScrollbar?.detach();
-          logScrollbar = null;
-        }
-      });
+    // ONE SCROLLBAR PER WINDOW (2026-09-08 audit): the log pane no longer
+    // scrolls itself — its old 10rem cap + overlay rail was a second
+    // scrollbar nested inside the modal window (the HkModal body
+    // scroller). Tailing now scrolls THAT window to the bottom.
+    function scrollWindowToBottom() {
+      const win = logRef.value?.closest<HTMLElement>(".hk-modal-body-scroll");
+      if (win) win.scrollTop = win.scrollHeight;
     }
 
     watch(
       () => state.logs.length,
       () => {
-        syncLogScrollbar();
-        nextTick(() => {
-          const el = logRef.value;
-          if (el) el.scrollTop = el.scrollHeight;
-        });
+        void nextTick(scrollWindowToBottom);
       },
     );
 
-    onBeforeUnmount(() => {
-      logScrollbar?.detach();
-      logScrollbar = null;
-    });
-
     return () => (
       <HModal
         modelValue={state.open}
@@ -68,14 +46,12 @@ export default defineComponent({
             </div>
           )}
           {state.logs.length > 0 ? (
-            <div ref={logWrapRef} class="s-progress-dialog-log-wrap">
-              <div ref={logRef} class="s-progress-dialog-log">
-                <ul style={{ listStyle: "none", margin: 0, padding: 0 }}>
-                  {state.logs.map((line, i) => (
-                    <li key={i}>{line}</li>
-                  ))}
-                </ul>
-              </div>
+            <div ref={logRef} class="s-progress-dialog-log">
+              <ul style={{ listStyle: "none", margin: 0, padding: 0 }}>
+                {state.logs.map((line, i) => (
+                  <li key={i}>{line}</li>
+                ))}
+              </ul>
             </div>
           ) : null}
         </div>

package/src/i18n/locales/en/components.json

@@ -197,6 +197,7 @@
   "hikari::messageBox.ok": "OK",
   "hikari::affixPicker.removeConfirmTitle": "Remove entry",
   "hikari::affixPicker.removeConfirm": "Remove \"{label}\"? This cannot be undone.",
+  "hikari::affixPicker.unset": "Not set",
   "hikari::messageBox.alertTitle": "Notice",
   "hikari::messageBox.confirmTitle": "Please confirm",
   "hikari::messageBox.promptTitle": "Input"

package/src/i18n/locales/zh-Hans/components.json

@@ -201,6 +201,7 @@
   "hikari::messageBox.ok": "好",
   "hikari::affixPicker.removeConfirmTitle": "移除条目",
   "hikari::affixPicker.removeConfirm": "移除「{label}」？此操作不可撤销。",
+  "hikari::affixPicker.unset": "未设置",
   "hikari::messageBox.alertTitle": "提示",
   "hikari::messageBox.confirmTitle": "请确认",
   "hikari::messageBox.promptTitle": "输入"

package/src/i18n/locales/zh-Hant/components.json

@@ -201,6 +201,7 @@
   "hikari::messageBox.ok": "好",
   "hikari::affixPicker.removeConfirmTitle": "移除項目",
   "hikari::affixPicker.removeConfirm": "移除「{label}」？此操作無法復原。",
+  "hikari::affixPicker.unset": "未設定",
   "hikari::messageBox.alertTitle": "提示",
   "hikari::messageBox.confirmTitle": "請確認",
   "hikari::messageBox.promptTitle": "輸入"