diff --git a/web_ui/src/app/chrome/AppBar.test.tsx b/web_ui/src/app/chrome/AppBar.test.tsx
new file mode 100644
index 0000000..aaa3626
--- /dev/null
+++ b/web_ui/src/app/chrome/AppBar.test.tsx
@@ -0,0 +1,229 @@
+import { ReactFlowProvider } from "@xyflow/react";
+import { render, screen, within } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it, vi } from "vitest";
+import { AppBar } from "./AppBar";
+import { OverlayProvider } from "../overlays/overlays";
+import { SceneStore } from "../canvas/sceneStore";
+import type { WsTransport } from "../../lib/ws/transport";
+
+// R8a (UI/UX issue list findings #5 and #8): this is the first dedicated
+// test file for AppBar.tsx. jsdom does not implement CSS @container queries
+// (or any layout at all), so it cannot verify the RESPONSIVE half of finding
+// #5's fix - which of the two copies of a button is actually visible at a
+// given width is a live-browser-only concern, verified separately. What
+// these tests cover instead: the dead provider-mode <select> from finding #8
+// is genuinely gone; every real button (both the inline copy and its
+// overflow-menu duplicate) is present and calls the correct handler; the
+// overflow menu opens/closes correctly; and every duplicated pair carries
+// the same data-tier value, since a mismatch there would silently break the
+// CSS wiring in a way no visual glance at one window size would catch.
+
+function makeStore(): SceneStore {
+  const transport = { subscribe: vi.fn(), intent: vi.fn() } as unknown as WsTransport;
+  return new SceneStore(transport);
+}
+
+function renderAppBar(store = makeStore()) {
+  render(
+    <OverlayProvider>
+      <ReactFlowProvider>
+        <AppBar store={store} />
+      </ReactFlowProvider>
+    </OverlayProvider>,
+  );
+  return { store };
+}
+
+describe("AppBar", () => {
+  it("no longer renders the provider-mode select (finding #8) - Settings is the only provider surface", () => {
+    renderAppBar();
+    expect(screen.queryByRole("combobox")).toBeNull();
+    expect(screen.queryByText("Ollama (Local)")).toBeNull();
+    expect(screen.queryByTitle("Switching provider modes isn't available yet")).toBeNull();
+  });
+
+  it("Library, Save and Settings are present as plain toolbar buttons (the tier that never collapses)", () => {
+    renderAppBar();
+    expect(screen.getByRole("button", { name: "Library" })).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: "Save" })).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: "Settings" })).toBeInTheDocument();
+    // None of the three ever has a data-tier - confirmed by absence, not a
+    // positive class check, since "never collapses" IS "has no tier".
+    for (const label of ["Library", "Save", "Settings"]) {
+      expect(screen.getByRole("button", { name: label })).not.toHaveAttribute("data-tier");
+    }
+  });
+
+  it("Save calls store.saveChat", async () => {
+    const user = userEvent.setup();
+    const { store } = renderAppBar();
+    const spy = vi.spyOn(store, "saveChat");
+    await user.click(screen.getByRole("button", { name: "Save" }));
+    expect(spy).toHaveBeenCalledOnce();
+  });
+
+  it("Settings toggles real overlay-open state, not latched click state (audit B6)", async () => {
+    const user = userEvent.setup();
+    renderAppBar();
+    const settings = screen.getByRole("button", { name: "Settings" });
+    expect(settings.className).not.toContain("checked");
+    await user.click(settings);
+    expect(settings.className).toContain("checked");
+    await user.click(settings);
+    expect(settings.className).not.toContain("checked");
+  });
+
+  describe("overflow menu (finding #5)", () => {
+    it("does not render until the trigger is clicked", () => {
+      renderAppBar();
+      expect(screen.queryByRole("dialog")).toBeNull();
+    });
+
+    it("opens on trigger click and closes on a second click", async () => {
+      const user = userEvent.setup();
+      renderAppBar();
+      const trigger = screen.getByRole("button", { name: "More toolbar actions" });
+      expect(trigger).toHaveAttribute("aria-expanded", "false");
+      // Popover (overlays.tsx) renders role="dialog", not role="menu" - the
+      // trigger's aria-haspopup must say so too, or a screen reader
+      // announces a control that opens something other than what it does.
+      expect(trigger).toHaveAttribute("aria-haspopup", "dialog");
+
+      await user.click(trigger);
+      expect(screen.getByRole("dialog")).toBeInTheDocument();
+      expect(trigger).toHaveAttribute("aria-expanded", "true");
+
+      await user.click(trigger);
+      expect(screen.queryByRole("dialog")).toBeNull();
+      expect(trigger).toHaveAttribute("aria-expanded", "false");
+    });
+
+    it("closes on Escape", async () => {
+      const user = userEvent.setup();
+      renderAppBar();
+      await user.click(screen.getByRole("button", { name: "More toolbar actions" }));
+      expect(screen.getByRole("dialog")).toBeInTheDocument();
+      await user.keyboard("{Escape}");
+      expect(screen.queryByRole("dialog")).toBeNull();
+    });
+
+    it("contains a duplicate of every collapsible button", async () => {
+      const user = userEvent.setup();
+      renderAppBar();
+
+      await user.click(screen.getByRole("button", { name: "More toolbar actions" }));
+      const menuItems = within(screen.getByRole("dialog"));
+
+      for (const label of [
+        "Export PNG",
+        "Pins",
+        "Organize",
+        "View",
+        "Plugins",
+        "Zoom In",
+        "Zoom Out",
+        "Reset",
+        "Fit All",
+        "About",
+        "Help",
+      ]) {
+        expect(menuItems.getByRole("button", { name: label })).toBeInTheDocument();
+      }
+    });
+
+    // R8a: every "plain" action (doesn't open an overlay of its own) is
+    // tested individually, not just one "representative" action - Export
+    // PNG's overflow copy shipped without its closeOverflow() call at
+    // first, and a test that only checked Organize passed anyway, since
+    // Organize happened to be correct. One shared assertion per action
+    // closes that exact gap for good, rather than re-opening it the next
+    // time a plain action is added.
+    it.each(["Export PNG", "Organize", "Zoom In", "Zoom Out", "Reset", "Fit All"])(
+      "clicking the overflow copy of a plain action (%s) closes the menu",
+      async (label) => {
+        const user = userEvent.setup();
+        renderAppBar();
+        await user.click(screen.getByRole("button", { name: "More toolbar actions" }));
+        await user.click(within(screen.getByRole("dialog")).getByRole("button", { name: label }));
+        expect(screen.queryByRole("dialog")).toBeNull();
+      },
+    );
+
+    it("Organize's overflow copy calls store.organizeNodes", async () => {
+      const user = userEvent.setup();
+      const { store } = renderAppBar();
+      const organizeSpy = vi.spyOn(store, "organizeNodes");
+      await user.click(screen.getByRole("button", { name: "More toolbar actions" }));
+      await user.click(within(screen.getByRole("dialog")).getByRole("button", { name: "Organize" }));
+      expect(organizeSpy).toHaveBeenCalledOnce();
+    });
+
+    it("clicking an overlay-opening item (About) opens that overlay and closes the menu", async () => {
+      const user = userEvent.setup();
+      renderAppBar();
+      await user.click(screen.getByRole("button", { name: "More toolbar actions" }));
+      await user.click(within(screen.getByRole("dialog")).getByRole("button", { name: "About" }));
+
+      expect(screen.queryByRole("dialog")).toBeNull();
+      // The inline About chip (still in the DOM, jsdom does not evaluate
+      // the CSS that would visually hide it) now reads real open state.
+      expect(screen.getByRole("button", { name: "About" }).className).toContain("checked");
+    });
+
+    it("the five overlay-opening overflow items (Pins/View/Plugins/About/Help) carry aria-pressed, matching their inline copies' real-state contract", async () => {
+      // Cannot be driven to aria-pressed="true" through normal interaction
+      // in this test: OverlayProvider is single-open, so the instant any of
+      // these becomes the open surface, "toolbar-overflow" stops being it
+      // and this whole menu unmounts. This only pins the attribute exists
+      // (defaulting false) rather than being silently absent, the way it
+      // was before - see AppBar.tsx's own comment on why it's kept anyway.
+      const user = userEvent.setup();
+      renderAppBar();
+      await user.click(screen.getByRole("button", { name: "More toolbar actions" }));
+      const menu = within(screen.getByRole("dialog"));
+      for (const label of ["Pins", "View", "Plugins", "About", "Help"]) {
+        expect(menu.getByRole("button", { name: label })).toHaveAttribute("aria-pressed", "false");
+      }
+    });
+
+    it("every overflow-menu item shares its data-tier with the matching inline button, and only the always-visible three (Library/Save/Settings) have no overflow duplicate at all", async () => {
+      const user = userEvent.setup();
+      renderAppBar();
+      await user.click(screen.getByRole("button", { name: "More toolbar actions" }));
+      const menu = screen.getByRole("dialog");
+
+      const pairs: [string, string][] = [
+        ["Export PNG", "1"],
+        ["Pins", "2"],
+        ["Organize", "2"],
+        ["View", "2"],
+        ["Plugins", "2"],
+        ["Zoom In", "3"],
+        ["Zoom Out", "3"],
+        ["Reset", "3"],
+        ["Fit All", "3"],
+        ["About", "1"],
+        ["Help", "1"],
+      ];
+      for (const [label, tier] of pairs) {
+        // Every duplicated pair shares its exact label except Plugins (the
+        // inline button's accessible name includes its chevron span,
+        // "Plugins ▼", while its overflow duplicate is plain "Plugins" - a
+        // real, intentional difference, see AppBar.tsx) - so match by
+        // substring, then disambiguate the two hits by DOM position rather
+        // than by string, which stays correct for every label uniformly
+        // rather than special-casing the one that needs it.
+        const matches = screen.getAllByRole("button", { name: new RegExp(label) });
+        const inline = matches.find((el) => !menu.contains(el));
+        const overflowItem = matches.find((el) => menu.contains(el));
+        expect(inline).toHaveAttribute("data-tier", tier);
+        expect(overflowItem).toHaveAttribute("data-tier", tier);
+      }
+
+      for (const label of ["Library", "Save", "Settings"]) {
+        expect(within(menu).queryByRole("button", { name: label })).toBeNull();
+      }
+    });
+  });
+});
diff --git a/web_ui/src/app/chrome/AppBar.tsx b/web_ui/src/app/chrome/AppBar.tsx
index 3cbbd62..ff10827 100644
--- a/web_ui/src/app/chrome/AppBar.tsx
+++ b/web_ui/src/app/chrome/AppBar.tsx
@@ -1,7 +1,7 @@
 import { useReactFlow } from "@xyflow/react";
 import { exportCanvasAsPng } from "../canvas/exportCanvasPng";
 import type { SceneStore } from "../canvas/sceneStore";
-import { useOverlays } from "../overlays/overlays";
+import { Popover, useOverlays } from "../overlays/overlays";
 
 /**
  * The app bar (Qt-removal plan R2) - the toolbar island's SPA successor.
@@ -16,13 +16,63 @@ import { useOverlays } from "../overlays/overlays";
  * - library/settings/about/help/plugins -> overlay dialogs; chips read REAL
  *   open state from the overlay context (audit B6), never latched clicks
  * - saveChat -> real as of R6.5 (store.saveChat(), targets the
- *   app-chat-library topic - see SceneStore's own comment on why); provider
- *   mode select -> still deferred to R4's own remaining work, rendered
- *   disabled with the phase called out.
+ *   app-chat-library topic - see SceneStore's own comment on why)
  * - Export PNG -> real as of R6.8, a net-new capability (no legacy
  *   canvas-wide export exists) - pure client-side DOM rasterization via
  *   exportCanvasAsPng, same "zero backend round-trip" shape as the
  *   Zoom/Fit All buttons right next to it, not an intent dispatch.
+ *
+ * R8a (UI/UX issue list finding #8): the provider-mode <select> that used to
+ * sit here was permanently `disabled`, held exactly one hardcoded option
+ * ("Ollama (Local)"), and its onChange was a literal no-op - there has never
+ * been a setProviderMode intent anywhere in backend/ for it to call. Removed
+ * outright rather than left as a dead control; Settings' own provider pages
+ * are the real, complete switcher.
+ *
+ * R8a (finding #5): below ~1120px window width this toolbar's 12 buttons
+ * (13 with the now-removed select) had no shrink/wrap/overflow behavior at
+ * all, so the low end of it - Settings, About, Help, the connection status
+ * next to this component - ran off the right edge of the window, dragging a
+ * horizontal scrollbar across the WHOLE document with it (the canvas and
+ * composer went with it, off-screen).
+ *
+ * Fixed with a real overflow menu, not the audit's own "minimum stopgap"
+ * (bare overflow-x: auto). `.appbar` gets `min-width: 0` (a flex item
+ * otherwise floors at its content's min-content width - that is what forced
+ * the overflow in the first place) and `container-type: inline-size`
+ * (styles.css), so its own descendants can query how much room THIS
+ * toolbar - not the window - actually has. Every collapsible button is
+ * rendered TWICE: once inline, once as a duplicate inside the overflow
+ * menu, tagged with the same data-tier either way. Pure CSS @container
+ * rules (styles.css) decide which copy is visible at the current width, in
+ * three tiers (least-used collapses first) - no ResizeObserver/width-
+ * measurement JS anywhere; container queries are declarative, and this app
+ * targets one Chromium engine (WebView2), so there is no compatibility
+ * reason to reach for JS instead. Library, Save and Settings never
+ * collapse - those three are exactly what the finding flagged as becoming
+ * unreachable.
+ *
+ * The overflow menu is the shared `Popover` (overlays.tsx), NOT `NodeMenu`
+ * (canvas/NodeMenu.tsx) - tried first, reverted after live testing caught a
+ * real bug: NodeMenu portals to document.body, and a portaled element is no
+ * longer a DESCENDANT of `.appbar` in the DOM, so it falls OUTSIDE the
+ * `@container appbar` scope entirely - every item in it would have silently
+ * stayed hidden forever, regardless of width. `.appbar` therefore does NOT
+ * get `overflow: hidden` either (the version that used NodeMenu needed it,
+ * to stop tier-hidden buttons spilling past the toolbar mid-resize, and
+ * could afford it because the portaled menu didn't live inside that box to
+ * begin with); the horizontal-spill backstop instead lives one level up, on
+ * `.app-topbar` (`overflow-x: hidden`, with `overflow-y: visible` so it
+ * does not clip this dropdown, which extends below the header row by
+ * design). `Popover`'s own light-dismiss (outside pointerdown) and the
+ * OverlayProvider's single-open policy (opening Settings while this is open
+ * correctly closes it, same as every other surface) both apply for free.
+ *
+ * Both copies of a collapsible button call the exact same handler - the
+ * handler is the single source of truth for BEHAVIOR, only the two bits of
+ * JSX markup (label text) are duplicated, which is what stays in sync via
+ * ordinary code review rather than an abstraction neither codebase
+ * precedent nor this component's small, fixed button set actually needs.
  */
 
 export function AppBar({ store }: { store: SceneStore }) {
@@ -36,6 +86,14 @@ export function AppBar({ store }: { store: SceneStore }) {
     const viewport = getViewport();
     setViewport({ ...viewport, zoom: 1 }, { duration: 200 });
   };
+  const exportPng = () => void exportCanvasAsPng({ getNodes, getViewport, setViewport }, "--gl-surface-window");
+
+  // Overlay-opening actions (Pins/View/Plugins/About/Help) close this popover
+  // for free via OverlayProvider's own single-open policy - opening any
+  // surface replaces whatever else was open, "toolbar-overflow" included.
+  // Plain actions (Organize/Zoom/Fit/Export) never touch the overlay
+  // registry at all, so their overflow copies close it explicitly.
+  const closeOverflow = () => overlays.close();
 
   return (
     <div className="appbar" role="toolbar" aria-label="Application bar">
@@ -51,9 +109,12 @@ export function AppBar({ store }: { store: SceneStore }) {
       <button type="button" className="appbar-btn" onClick={() => store.saveChat()}>
         Save
       </button>
+
+      <span className="appbar-separator appbar-tier" data-tier="2" />
       <button
         type="button"
-        className={chip("pins")}
+        className={chip("pins") + " appbar-tier"}
+        data-tier="2"
         data-overlay-trigger="pins"
         aria-pressed={overlays.isOpen("pins")}
         title="Navigation pins"
@@ -61,38 +122,55 @@ export function AppBar({ store }: { store: SceneStore }) {
       >
         Pins
       </button>
-      <button type="button" className="appbar-btn" onClick={() => store.organizeNodes()}>
+      <button type="button" className="appbar-btn appbar-tier" data-tier="2" onClick={() => store.organizeNodes()}>
         Organize
       </button>
 
-      <span className="appbar-separator" />
-
-      <button type="button" className="appbar-btn" onClick={() => zoomIn({ duration: 150 })}>
+      <span className="appbar-separator appbar-tier" data-tier="3" />
+      <button
+        type="button"
+        className="appbar-btn appbar-tier"
+        data-tier="3"
+        onClick={() => zoomIn({ duration: 150 })}
+      >
         Zoom In
       </button>
-      <button type="button" className="appbar-btn" onClick={() => zoomOut({ duration: 150 })}>
+      <button
+        type="button"
+        className="appbar-btn appbar-tier"
+        data-tier="3"
+        onClick={() => zoomOut({ duration: 150 })}
+      >
         Zoom Out
       </button>
-      <button type="button" className="appbar-btn" onClick={resetZoom}>
+      <button type="button" className="appbar-btn appbar-tier" data-tier="3" onClick={resetZoom}>
         Reset
       </button>
-      <button type="button" className="appbar-btn" onClick={() => fitView({ duration: 200 })}>
+      <button
+        type="button"
+        className="appbar-btn appbar-tier"
+        data-tier="3"
+        onClick={() => fitView({ duration: 200 })}
+      >
         Fit All
       </button>
+
+      <span className="appbar-separator appbar-tier" data-tier="1" />
       <button
         type="button"
-        className="appbar-btn"
+        className="appbar-btn appbar-tier"
+        data-tier="1"
         title="Export the whole canvas as a PNG image"
-        onClick={() => void exportCanvasAsPng({ getNodes, getViewport, setViewport }, "--gl-surface-window")}
+        onClick={exportPng}
       >
         Export PNG
       </button>
 
-      <span className="appbar-separator" />
-
+      <span className="appbar-separator appbar-tier" data-tier="2" />
       <button
         type="button"
-        className={chip("view")}
+        className={chip("view") + " appbar-tier"}
+        data-tier="2"
         data-overlay-trigger="view"
         aria-pressed={overlays.isOpen("view")}
         onClick={() => overlays.toggle("view", "popover")}
@@ -101,7 +179,8 @@ export function AppBar({ store }: { store: SceneStore }) {
       </button>
       <button
         type="button"
-        className={chip("plugins")}
+        className={chip("plugins") + " appbar-tier"}
+        data-tier="2"
         data-overlay-trigger="plugins"
         aria-pressed={overlays.isOpen("plugins")}
         onClick={() => overlays.toggle("plugins", "popover")}
@@ -111,16 +190,133 @@ export function AppBar({ store }: { store: SceneStore }) {
 
       <span className="appbar-spacer" />
 
-      <select
-        className="appbar-mode-select"
-        value="Ollama (Local)"
-        aria-label="Provider mode"
-        disabled
-        title="Switching provider modes isn't available yet"
-        onChange={() => {}}
+      {/* Tier-gated the same way as every collapsible button above: CSS
+          only shows this once at least one tier is hidden, so it never
+          appears as a "..." button opening an empty menu at full width. */}
+      <button
+        type="button"
+        className={"appbar-btn appbar-overflow-trigger" + (overlays.isOpen("toolbar-overflow") ? " checked" : "")}
+        data-overlay-trigger="toolbar-overflow"
+        aria-label="More toolbar actions"
+        aria-haspopup="dialog"
+        aria-expanded={overlays.isOpen("toolbar-overflow")}
+        onClick={() => overlays.toggle("toolbar-overflow", "popover")}
       >
-        <option>Ollama (Local)</option>
-      </select>
+        <span aria-hidden="true">&#8942;</span>
+      </button>
+      <Popover name="toolbar-overflow" className="appbar-overflow-menu">
+        <button
+          type="button"
+          className="appbar-overflow-item"
+          data-tier="1"
+          onClick={() => {
+            exportPng();
+            closeOverflow();
+          }}
+        >
+          Export PNG
+        </button>
+        <button
+          type="button"
+          className={"appbar-overflow-item" + (overlays.isOpen("pins") ? " checked" : "")}
+          data-tier="2"
+          aria-pressed={overlays.isOpen("pins")}
+          onClick={() => overlays.toggle("pins", "popover")}
+        >
+          Pins
+        </button>
+        <button
+          type="button"
+          className="appbar-overflow-item"
+          data-tier="2"
+          onClick={() => {
+            store.organizeNodes();
+            closeOverflow();
+          }}
+        >
+          Organize
+        </button>
+        <button
+          type="button"
+          className={"appbar-overflow-item" + (overlays.isOpen("view") ? " checked" : "")}
+          data-tier="2"
+          aria-pressed={overlays.isOpen("view")}
+          onClick={() => overlays.toggle("view", "popover")}
+        >
+          View
+        </button>
+        <button
+          type="button"
+          className={"appbar-overflow-item" + (overlays.isOpen("plugins") ? " checked" : "")}
+          data-tier="2"
+          aria-pressed={overlays.isOpen("plugins")}
+          onClick={() => overlays.toggle("plugins", "popover")}
+        >
+          Plugins
+        </button>
+        <button
+          type="button"
+          className="appbar-overflow-item"
+          data-tier="3"
+          onClick={() => {
+            zoomIn({ duration: 150 });
+            closeOverflow();
+          }}
+        >
+          Zoom In
+        </button>
+        <button
+          type="button"
+          className="appbar-overflow-item"
+          data-tier="3"
+          onClick={() => {
+            zoomOut({ duration: 150 });
+            closeOverflow();
+          }}
+        >
+          Zoom Out
+        </button>
+        <button
+          type="button"
+          className="appbar-overflow-item"
+          data-tier="3"
+          onClick={() => {
+            resetZoom();
+            closeOverflow();
+          }}
+        >
+          Reset
+        </button>
+        <button
+          type="button"
+          className="appbar-overflow-item"
+          data-tier="3"
+          onClick={() => {
+            fitView({ duration: 200 });
+            closeOverflow();
+          }}
+        >
+          Fit All
+        </button>
+        <button
+          type="button"
+          className={"appbar-overflow-item" + (overlays.isOpen("about") ? " checked" : "")}
+          data-tier="1"
+          aria-pressed={overlays.isOpen("about")}
+          onClick={() => overlays.toggle("about", "dialog")}
+        >
+          About
+        </button>
+        <button
+          type="button"
+          className={"appbar-overflow-item" + (overlays.isOpen("help") ? " checked" : "")}
+          data-tier="1"
+          aria-pressed={overlays.isOpen("help")}
+          onClick={() => overlays.toggle("help", "dialog")}
+        >
+          Help
+        </button>
+      </Popover>
 
       <button
         type="button"
@@ -133,7 +329,8 @@ export function AppBar({ store }: { store: SceneStore }) {
       </button>
       <button
         type="button"
-        className={chip("about")}
+        className={chip("about") + " appbar-tier"}
+        data-tier="1"
         data-overlay-trigger="about"
         aria-pressed={overlays.isOpen("about")}
         onClick={() => overlays.toggle("about", "dialog")}
@@ -142,7 +339,8 @@ export function AppBar({ store }: { store: SceneStore }) {
       </button>
       <button
         type="button"
-        className={chip("help")}
+        className={chip("help") + " appbar-tier"}
+        data-tier="1"
         data-overlay-trigger="help"
         aria-pressed={overlays.isOpen("help")}
         onClick={() => overlays.toggle("help", "dialog")}
diff --git a/web_ui/src/app/styles.css b/web_ui/src/app/styles.css
index 8d1142c..4909d3c 100644
--- a/web_ui/src/app/styles.css
+++ b/web_ui/src/app/styles.css
@@ -910,6 +910,25 @@ body,
 
 .app-topbar {
   gap: 8px;
+  /* R8a (UI/UX issue list finding #5): deliberately NO overflow-x: hidden
+     here, despite that being the obvious "stop the whole document from
+     spilling sideways" backstop. It was tried and reverted after review
+     caught it silently breaking the fix it was meant to protect: per the
+     CSS overflow spec, when overflow-x computes to anything other than
+     visible, a overflow-y of visible on the SAME element is force-coerced
+     to auto instead - it cannot stay visible, regardless of which value
+     was explicitly authored. .appbar-overflow-menu is a descendant of this
+     element (position: absolute, top: 100%, extending below this row by
+     design every time it opens) - an auto-coerced overflow-y here clips it
+     completely, confirmed live via getComputedStyle/elementFromPoint. There
+     is no ancestor position for a horizontal-only backstop that does not
+     have this exact problem, since the popover must stay inside .appbar's
+     @container subtree (see .appbar's own comment) and therefore inside
+     ANY ancestor between it and the document too. The real backstop is
+     therefore the tier breakpoints below being correctly margined instead
+     of a defensive CSS property: measured live, the four buttons that never
+     collapse (Library/Save/the overflow trigger/Settings) need ~207px, well
+     under the narrowest breakpoint's 420px floor. */
 }
 
 .appbar {
@@ -917,6 +936,24 @@ body,
   align-items: center;
   gap: 4px;
   flex: 1;
+  /* flex: 1 alone gives a flex item min-width: auto, i.e. it can never
+     shrink below the summed min-content width of its 12 buttons - that is
+     what forced .app-topbar wider than the window in the first place.
+     min-width: 0 lets it actually shrink. position: relative anchors
+     .appbar-overflow-menu (a Popover - overlays.tsx - which supplies no
+     positioning of its own; every other Popover consumer gets one from a
+     dedicated App.tsx wrapper div, which does not exist here). The
+     container-type/name pair is what the @container queries below key off -
+     deliberately NOT `overflow: hidden` here despite that being the more
+     obvious pairing: an overflow:hidden ancestor clips ANY descendant that
+     paints past its box regardless of the descendant's own position scheme,
+     and the overflow menu is exactly such a descendant every time it opens.
+     (NodeMenu.tsx - a portal - was tried here first specifically to dodge
+     that; it introduced a worse bug instead, see AppBar.tsx's own comment.) */
+  min-width: 0;
+  position: relative;
+  container-type: inline-size;
+  container-name: appbar;
 }
 
 .appbar-btn {
@@ -961,18 +998,120 @@ body,
   font-size: 9px;
 }
 
-.appbar-mode-select {
+/* R8a (finding #5): the overflow trigger + its menu. Hidden by default;
+   the container-query block below reveals the trigger once ANY tier has
+   collapsed, and reveals each overflow-menu item once ITS OWN tier has
+   collapsed - the item's data-tier is the same value used inline, so the
+   two stay in lockstep without any JS wiring them together. */
+.appbar-overflow-trigger {
+  display: none;
+  padding: 5px 8px;
+  font-size: 14px;
+  line-height: 1;
+}
+
+/* .overlay-popover (the base class Popover always applies alongside this
+   one) already supplies background-color/border/box-shadow and a default
+   position/sizing - only what's genuinely DIFFERENT for a button-list menu
+   is overridden here (tighter padding/min-width/radius, matching node
+   context menus' own convention, plus a height cap this list can actually
+   need and the base class doesn't have). Position is the one property
+   .overlay-popover never sets for ANY consumer - View/Plugins/Pins get
+   theirs from a dedicated wrapper div in App.tsx; this one has no such
+   wrapper, so it's set directly here, anchored to .appbar's own right edge
+   (position: relative on .appbar above) rather than precisely under the
+   trigger button a few buttons to its left - the same "close, not
+   pixel-precise" anchoring posture every other toolbar popover in this app
+   already has (finding BAD-UX #27, a separate, pre-existing issue this does
+   not attempt to fix). z-index matches node context menus - the highest
+   ordinary-content tier below the modal/approval tiers. */
+.appbar-overflow-menu {
+  position: absolute;
+  top: 100%;
+  right: 0;
+  margin-top: 6px;
+  z-index: var(--gl-z-node-menu);
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 170px;
+  padding: 6px;
+  border-radius: 8px;
+  max-height: calc(100vh - 16px);
+  overflow-y: auto;
+}
+
+.appbar-overflow-item {
+  display: none;
+  width: 100%;
+  text-align: left;
   font-size: 11px;
+  font-weight: 600;
   font-family: inherit;
-  padding: 4px 8px;
+  padding: 6px 10px;
   color: var(--gl-surface-text);
-  background-color: var(--gl-neutral-button-background);
-  border: 1px solid var(--gl-neutral-button-border);
+  background: transparent;
+  border: 1px solid transparent;
   border-radius: 6px;
+  cursor: pointer;
 }
 
-.appbar-mode-select:disabled {
-  opacity: 0.45;
+.appbar-overflow-item:hover {
+  background-color: var(--gl-neutral-button-hover);
+}
+
+/* Mirrors .appbar-btn-checkable.checked (the inline chips' own real-open-
+   state styling) - a separate rule rather than sharing that class, since
+   .appbar-overflow-item already needs its own base rule (full-width,
+   left-aligned, tier-gated display) incompatible with .appbar-btn's. Note
+   this can never actually render true in practice: OverlayProvider is
+   single-open, so by the time any of Pins/View/Plugins/About/Help becomes
+   the open surface, "toolbar-overflow" has already stopped being it, and
+   this whole menu has unmounted. Kept anyway for the same reason the inline
+   copy has it - matching what the component's own contract (real state, not
+   latched clicks) promises, not for an effect anyone will currently see. */
+.appbar-overflow-item.checked {
+  background-color: var(--gl-neutral-button-background);
+  border-color: var(--gl-neutral-button-border);
+}
+
+/* Breakpoints are tuned against this toolbar's own real button widths -
+   verified live by resizing the running app, not guessed. Tier 1 (About/
+   Help/Export PNG - least-frequently-used) collapses first; tier 3 (the
+   four zoom/fit controls, which have keyboard/wheel equivalents elsewhere)
+   collapses last, right before the floor of Library/Save/Settings, which
+   never collapse - those three are exactly what finding #5 flagged as
+   becoming unreachable, so they are the one tier that does not exist. */
+@container appbar (max-width: 820px) {
+  .appbar-overflow-trigger {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .appbar-tier[data-tier="1"] {
+    display: none;
+  }
+  .appbar-overflow-item[data-tier="1"] {
+    display: block;
+  }
+}
+
+@container appbar (max-width: 620px) {
+  .appbar-tier[data-tier="2"] {
+    display: none;
+  }
+  .appbar-overflow-item[data-tier="2"] {
+    display: block;
+  }
+}
+
+@container appbar (max-width: 420px) {
+  .appbar-tier[data-tier="3"] {
+    display: none;
+  }
+  .appbar-overflow-item[data-tier="3"] {
+    display: block;
+  }
 }
 
 .app-popover-layer {