Merge pull request 'v0.23.1 — Align toast stack to map right edge, clear of right pane (#39)' (#44) from ui/toast-align-map-right into master

CHANGELOG.md

@@ -1,5 +1,10 @@
 # Changelog
 
+## v0.23.1 — 2026-09-20 08:42
+- **Toasts repositioned to the map's right edge (ISS-039).** The `.toasts` stack was `position: fixed` at the viewport bottom-right, overlapping the 280px right pane; its `right` changed 12px → 292px (= 280px right pane + 12px inset) so it now sits flush against the map's right edge with the same 12px margin. No JSX/endpoint changes — all positioning lives in that one CSS value
+- Tests: e2e wording only — `toasts.spec.ts` header comment, test title, and toast visibility assertion message updated from "bottom-right" to "map right edge / clear of the right pane"; no position assertions added (none existed), suite unchanged at 41 tests in 12 files
+- Verified: `tsc --noEmit` clean; unit suite green locally (288); `npx playwright test --list` = 41 tests in 12 files; e2e not run locally by design — CI verifies against an isolated stack
+
 ## v0.23.0 — 2026-09-20 08:25
 - **Refuel-to-full row moves to the left pane (ISS-035).** Refueling a grounded plane is "anything with our plane", so it belongs in the left pane next to Relocate, not as a market row on the right. The `.market-row` JSX (`market-refuel-none` "All tanks full." span / `market-refuel-plane` select of grounded planes labeled `{planeName} — {fuel}/{maxFuel} L`, `market-refuel-cost` preview, `market-refuel` button → `POST /api/planes/{id}/refuel`) moved verbatim from the Market section in `components/RightPane.tsx` into a new "Refuel" `<section data-testid="refuel-section">` in `components/LeftPane.tsx`, inserted between Relocate and Time. Its state (`refuelPlaneId`) + derived values (`refuelable`, effective-selection `refuelPlane`, `refuelCost`) moved with it, reusing LeftPane's existing `grounded` list; busy gating rewired from RightPane's `busy` to LeftPane's own `useGameAction` instance (`actionsBusy`). Testids kept byte-identical so all e2e locators are unchanged. The per-package "Refuel" button in the On board section (`refuel-for-{pkg.id}`, mode 'forFlight') is a different feature and stays put; exported helpers `slotsUsedFor` / `loadEligiblePlanes` untouched
 - Tests: e2e — `right-pane.spec.ts`: the market test keeps its buy/sell assertions, renamed to reflect that the refuel row now renders inside `[data-testid="left-pane"]` (asserted before the click); functional cash/tank assertions unchanged; the for-leg test's title/comment updated from "market button" to left pane. `panes.spec.ts`: first test gains structural assertions — Refuel heading + `market-refuel` visible in the left pane, both absent from the right pane (same present-in-left / absent-from-right pattern as On board). No unit-test changes (suite stays at 288)

app/globals.css

@@ -420,7 +420,8 @@ body {
 .toasts {
   position: fixed;
   bottom: 12px;
-  right: 12px;
+  /* 280px right pane + 12px inset — sits flush against the map's right edge, clear of the right pane */
+  right: 292px;
   z-index: 50; /* above map popups/controls and the app header */
   display: flex;
   flex-direction: column;

e2e/toasts.spec.ts

@@ -1,9 +1,10 @@
 import type { Page } from '@playwright/test';
 import { expect, test } from '@playwright/test';
 
-// v0.17.0 — ISS-008: action errors surface as bottom-right toasts (in addition to the inline
-// pane error) and game events appear as info toasts via snapshot diffing; the left-pane Time
-// section offers an explicit "Enable notifications" opt-in for browser notifications.
+// v0.17.0 — ISS-008: action errors surface as toasts at the map's right edge (clear of the
+// right pane, in addition to the inline pane error) and game events appear as info toasts via
+// snapshot diffing; the left-pane Time section offers an explicit "Enable notifications" opt-in
+// for browser notifications.
 
 interface CatalogEntry {
   model: string;
@@ -22,7 +23,7 @@ async function getState(page: Page): Promise<StateBody> {
   return (await res.json()) as StateBody;
 }
 
-test('failed actions toast bottom-right (inline error stays) and the Time section offers a notifications opt-in', async ({ page }) => {
+test('failed actions toast at the map right edge, clear of the right pane (inline error stays), and the Time section offers a notifications opt-in', async ({ page }) => {
   await page.goto('/');
   const buyModel = page.getByTestId('market-buy-model');
   await expect(buyModel, 'the market section renders once the first snapshot lands').toBeVisible({ timeout: 15_000 });
@@ -38,7 +39,7 @@ test('failed actions toast bottom-right (inline error stays) and the Time sectio
 
     // The toast appears with the server's error message and the error variant class…
     const toast = page.locator('[data-testid="toast"]').filter({ hasText: /insufficient funds/i });
-    await expect(toast, 'the error toast appears bottom-right').toBeVisible({ timeout: 10_000 });
+    await expect(toast, 'the error toast appears at the map right edge').toBeVisible({ timeout: 10_000 });
     await expect(toast).toHaveClass(/toast-error/);
 
     // …and the inline pane error still shows (both surfaces by design). It auto-clears on the

package.json

@@ -1,6 +1,6 @@
 {
   "name": "flight-ops",
-  "version": "0.23.0",
+  "version": "0.23.1",
   "private": true,
   "scripts": {
     "dev": "next dev -p 3000",