toga-ai 1.0.365 → 1.0.366

package/knowledge/2.0/apps/toga2-supply/INDEX.md

@@ -3,5 +3,5 @@
 | Doc | Summary | Files |
 |-----|---------|-------|
 | [TOGa Supply (toga2-supply) Architecture](architecture.md) | `toga2-supply` is the **React + Vite frontend** for TOGa Supply — warehouse fulfillment tooling (shipment selection, fulfill & ship against carrier APIs, NetSui | toga2-supply/src/api/toga.ts, toga2-supply/src/pages/ShipmentItems/view/ShipmentItemsPage.tsx, toga2-supply/src/pages/EditShipment/view/EditShipmentPage.tsx, toga2-supply/src/pages/EditShipment/api/UpdateShipmentApi.ts, toga2-supply/src/pages/Shipments/view/components/ShipmentsCardTableForm/ShipmentsCardTableForm.tsx |
-| [Fulfill & Ship](features/fulfill-and-ship.md) | Fulfill & Ship lets a warehouse user select sales-order line items, enter serials, pick a carrier/method, and in one action: create the Item Fulfillment records | toga2-supply/src/pages/ShipmentItems/view/ShipmentItemsPage.tsx, toga2-supply/src/pages/EditShipment/view/EditShipmentPage.tsx, toga2-supply/src/pages/EditShipment/view/components/forms/EditShipmentForm.tsx, toga2-supply/src/pages/EditShipment/view/components/SelectedShipmentItemsTable.tsx, toga2-supply/src/pages/EditShipment/view/helpers/ShipmentDetailsForm/renderEditShipmentFormInput.tsx, toga2-supply/src/pages/EditShipment/viewModel/FIELDS/DUMMYUPDATESHIPMENTFIELDS.json, toga2-supply/src/pages/EditShipment/helpers/ShipmentDetailsForm/renderEditShipmentFormInput.tsx, toga2-supply/tailwind.config.cjs, toga2-supply/src/pages/EditShipment/view/modals/ReturnShippingModal.tsx, toga2-supply/src/styles/index.scss, toga2-supply/src/components/ui/BaseInput/BaseInput.tsx, toga2-supply/src/pages/EditShipment/api/UpdateShipmentApi.ts, toga2-supply/src/pages/EditShipment/viewModel/signatureTypes.ts, toga2-supply/src/pages/EditShipment/view/modals/SelectReturnAddressModal.tsx, toga2-supply/src/pages/EditShipment/helpers/ShipmentDetailsForm/formatShipmentData.ts, toga2-supply/src/pages/EditShipment/types.ts, toga2-supply/src/pages/Shipments/view/ShipmentsPage.tsx, toga2-supply/src/pages/Shipments/view/components/ShipmentsCardTableForm/ShipmentsCardTableForm.tsx, toga2-supply/src/pages/Shipments/api/ShipmentsApi.ts, toga2-supply/src/pages/Shipments/types.ts, toga2-supply/src/pages/FulfilledShipments/view/FulfilledShipmentsPage.tsx, toga2-supply/src/components/ui/CardTable/CardTable.tsx, toga2-supply/src/components/ui/CardTable/types.ts, toga2-supply/src/assets/pen-line.svg, _underscore/Model/Client/ItemFulfillment.php, _underscore/Trait/Netsuite/ItemFulfillment.php, _underscore/Component/Library/Carriers/Ups/Ups.php |
+| [Fulfill & Ship](features/fulfill-and-ship.md) | Fulfill & Ship lets a warehouse user select sales-order line items, enter serials, pick a carrier/method, and in one action: create the Item Fulfillment records | toga2-supply/src/components/ui/BaseInput/UnitSelect.tsx, toga2-supply/src/pages/EditShipment/view/modals/SerialNumbersModal.tsx, toga2-supply/src/pages/ShipmentItems/view/ShipmentItemsPage.tsx, toga2-supply/src/pages/EditShipment/view/EditShipmentPage.tsx, toga2-supply/src/pages/EditShipment/view/components/forms/EditShipmentForm.tsx, toga2-supply/src/pages/EditShipment/view/components/SelectedShipmentItemsTable.tsx, toga2-supply/src/pages/EditShipment/view/helpers/ShipmentDetailsForm/renderEditShipmentFormInput.tsx, toga2-supply/src/pages/EditShipment/viewModel/FIELDS/DUMMYUPDATESHIPMENTFIELDS.json, toga2-supply/src/pages/EditShipment/helpers/ShipmentDetailsForm/renderEditShipmentFormInput.tsx, toga2-supply/tailwind.config.cjs, toga2-supply/src/pages/EditShipment/view/modals/ReturnShippingModal.tsx, toga2-supply/src/styles/index.scss, toga2-supply/src/components/ui/BaseInput/BaseInput.tsx, toga2-supply/src/pages/EditShipment/api/UpdateShipmentApi.ts, toga2-supply/src/pages/EditShipment/viewModel/signatureTypes.ts, toga2-supply/src/pages/EditShipment/view/modals/SelectReturnAddressModal.tsx, toga2-supply/src/pages/EditShipment/helpers/ShipmentDetailsForm/formatShipmentData.ts, toga2-supply/src/pages/EditShipment/types.ts, toga2-supply/src/pages/Shipments/view/ShipmentsPage.tsx, toga2-supply/src/pages/Shipments/view/components/ShipmentsCardTableForm/ShipmentsCardTableForm.tsx, toga2-supply/src/pages/Shipments/api/ShipmentsApi.ts, toga2-supply/src/pages/Shipments/types.ts, toga2-supply/src/pages/FulfilledShipments/view/FulfilledShipmentsPage.tsx, toga2-supply/src/components/ui/CardTable/CardTable.tsx, toga2-supply/src/components/ui/CardTable/types.ts, toga2-supply/src/assets/pen-line.svg, _underscore/Model/Client/ItemFulfillment.php, _underscore/Trait/Netsuite/ItemFulfillment.php, _underscore/Component/Library/Carriers/Ups/Ups.php |
 | [AWS Amplify Build & Deploy (non-prod environments)](workflows/amplify-build-and-deploy.md) | How `toga2-supply` (React + Vite) builds and deploys on **AWS Amplify**. | toga2-supply/amplify.yml, toga2-supply/.gitattributes, toga2-supply/.github/workflows/sync-stage-environments.yml, toga2-supply/.env.qc-security |

package/knowledge/2.0/apps/toga2-supply/features/fulfill-and-ship.md

@@ -6,9 +6,11 @@ project: TOGa Supply
 client: shared
 type: feature
 status: active
-updated: 2026-07-15
+updated: 2026-07-17
 owners: [mhammontree]
 files:
+  - toga2-supply/src/components/ui/BaseInput/UnitSelect.tsx
+  - toga2-supply/src/pages/EditShipment/view/modals/SerialNumbersModal.tsx
   - toga2-supply/src/pages/ShipmentItems/view/ShipmentItemsPage.tsx
   - toga2-supply/src/pages/EditShipment/view/EditShipmentPage.tsx
   - toga2-supply/src/pages/EditShipment/view/components/forms/EditShipmentForm.tsx
@@ -135,8 +137,11 @@ bare string** — see the gotcha below before wiring a new select field.
 
 - **Renderer extension points (how to add a non-BaseInput control).** `renderEditShipmentFormInput.tsx`
   special-cases fields by boolean flags on the JSON field object (existing: `isClearAll`, `isReadOnly`;
-  added `isUnitSelector` = a native in./cm `<select>`, mirroring the Return Shipping modal — visual-only,
-  not persisted). **Reuse pattern for any custom control: add a flag to the JSON field + a branch in the
+  added `isUnitSelector` = the in./cm unit selector, mirroring the Return Shipping modal — visual-only,
+  not persisted). The `isUnitSelector` branch now renders the shared **`UnitSelect`** component
+  (`src/components/ui/BaseInput/UnitSelect.tsx`) — a react-select styled to match the compact
+  `BaseInput` dropdowns (white menu, checkmark, FA chevron) — instead of a native `<select>`, so its
+  menu matches the other dropdowns; `ReturnShippingModal` uses the same component. **Reuse pattern for any custom control: add a flag to the JSON field + a branch in the
   renderer** rather than forcing it through `BaseInput`. A per-section `sectionTitleContainerClasses` is
   also read by `EditShipmentForm.tsx`'s shared section-title wrapper (default unchanged) so a section can
   e.g. right-align its title (used to right-align the Item Count column's title + value to a shared edge).
@@ -281,6 +286,38 @@ the call 403s and returns no label.
 
 ## Gotchas / known issues
 
+- **⚠ A portaled react-select menu loses the control's inherited font size.** `BaseInput`'s
+  react-select menus now portal to `<body>` (`menuPortalTarget={document.body}` +
+  `styles.menuPortal` `zIndex 9999`, on both single- and multi-select) so the menu can't be
+  painted over by a sibling scroll box / stacking context (the symptom was the device-list
+  table clipping the dropdown). **Side effect:** once portaled, the menu is a child of `<body>`,
+  not the control, so it no longer inherits the control's font size and jumps to the browser
+  default (~16px). Fix: pin it back with `text-sm` on the react-select `menu` `classNames`.
+  Whenever you portal a react-select menu, re-assert font size on the menu.
+  (`src/components/ui/BaseInput/BaseInput.tsx`.)
+- **⚠ Sticky table headers need a z-index ABOVE `BaseToolTip`'s `z-[9999]`.** `BasicTable` gained
+  a `stickyHeaderZ` prop (default `z-10`). `BaseToolTip` wraps its children in a `z-[9999]`
+  layer, so a tooltip-wrapped cell (e.g. a trash/delete column) shows THROUGH a sticky header
+  while scrolling unless the header's z beats it. **But you can't just crank it globally:** an
+  in-page table's header must stay `z-10` so it can never paint above a modal; a table that lives
+  *inside* a modal can safely use a very high z (`z-[10000]`) because it's already inside the
+  modal's stacking context. Pick the z per table location, not one global value.
+- **⚠ Config-driven fixed-width form labels silently misalign when a label exceeds its width.**
+  Right-aligned label columns sized `w-[Npx] shrink-0` rely on every label fitting in `N`px —
+  flexbox `min-width:auto` will grow just the labels whose text is longer than `N` and shove
+  *their* inputs to the right, so only some rows misalign. Two rules: (1) size the label column to
+  the LONGEST label; (2) keep the label→input spacing identical on EVERY row — a stray double
+  space (`"items-center  pb-3"`) made one row miss a bulk `gap-2` sweep and sit 8px off. Concrete
+  fix: the Update Info address block was matched to the Edit Return Label block (labels `w-[70px]`,
+  ZIP `w-[36px]`, `flex items-center gap-2`), address column widened `col5 w-80`→`w-96`, and a
+  ZIP-favoring grid split `grid-cols-[1fr_1fr_1fr_1.25fr_1.25fr]` so a full ZIP+4 fits.
+- **Fixed-height modals overflow short viewports — size to the viewport, not to px.** The Add
+  Serial Numbers modal was `h-[822px]` and overflowed short screens. Reusable pattern that fixed
+  it: modal `max-h-[90vh] overflow-y-auto`, the inner scrolling list sized to the viewport
+  (`max-h-[40vh]`) rather than fixed px, drop the fixed `h-[90%]`/`h-[822px]` wrapper, and give the
+  in-modal sticky header a z above tooltips (see the `stickyHeaderZ` gotcha — modal tables can use
+  `z-[10000]`). Files: `src/pages/EditShipment/view/modals/SerialNumbersModal.tsx`,
+  `SelectedShipmentItemsTable.tsx`.
 - **⚠ Native `<datalist>` renders its OWN dropdown arrow, un-hideable by Tailwind.** An
   `<input list>` combobox (the Edit Return Label Addressee) shows a **second dark arrow** (the
   webkit calendar-picker indicator) that a Tailwind arbitrary variant can't reliably hide. Kill it
@@ -497,6 +534,23 @@ not the base `_Model_Client_ItemFulfillment`. Tested with GroWrk; UPS support wa
 for Compass and is not yet in prod.
 
 ## Change history
+- 2026-07-17 — TRUE-79191 (David design-review pass, toga2-supply UI): documented four durable,
+  app-wide component gotchas — (1) **`BaseInput` react-select menus now portal to `<body>`**
+  (`menuPortalTarget` + `menuPortal zIndex 9999`) so a sibling scroll box can't clip them, and the
+  side effect that a portaled menu loses the control's font size (re-pin with `text-sm` on the `menu`
+  classNames); (2) **`BasicTable` gained `stickyHeaderZ`** (default `z-10`) because sticky headers
+  must beat `BaseToolTip`'s `z-[9999]` to stop tooltip-wrapped cells showing through — but in-page
+  tables must stay `z-10` (never above a modal) while in-modal tables can use `z-[10000]`; (3) the
+  **fixed-width form-label misalignment** footgun (size the column to the longest label + keep
+  identical label→input spacing on every row); and (4) the **fixed-height-modal overflow** pattern
+  (modal `max-h-[90vh] overflow-y-auto` + inner list `max-h-[40vh]`, drop fixed px) via the Add Serial
+  Numbers modal. Also: new shared **`UnitSelect`** component (react-select styled to match the compact
+  dropdowns) replaced the native in./cm `<select>` in the renderer's `isUnitSelector` branch and in
+  `ReturnShippingModal`; `SupplyFormGuardrail` now renders a dimmed click-to-cancel backdrop
+  (`fixed inset-0 z-[9920] bg-black/40`) so it reads as a lightbox; and the Update Info address block
+  was aligned to the Edit Return Label block (labels `w-[70px]`/ZIP `w-[36px]`, address col `w-96`,
+  ZIP-favoring 5-col grid). The return-validation spinner (left of the modal's Cancel while validating)
+  and the Select Return Address Figma tuning were cosmetic — no separate doc change. (mhammontree)
 - 2026-07-17 — TRUE-79191: replaced the boolean `requiresSignature` with a **4-level `signatureType`
   enum** (None Specified / Indirect / Direct / Adult) — `viewModel/signatureTypes.ts` is the single
   source of truth (options, `signatureCardLabel`, `requiresSignatureFromLevel` back-compat,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "toga-ai",
-  "version": "1.0.365",
+  "version": "1.0.366",
   "description": "TOGA Technology Team Claude Knowledge System — shared AI coding harness with skills, knowledge base CLI, and project installer for Claude Code.",
   "keywords": [
     "claude",