@cat-factory/app 0.253.1 → 0.253.2

package/app/app.config.ts

@@ -22,5 +22,14 @@ export default defineAppConfig({
         title: 'text-white',
       },
     },
+    // The toaster's scroll region is the ONE `[data-slot='viewport']` the app's own
+    // CSS may target: Nuxt UI reuses that attribute for the item list of every menu
+    // component too. This marker class is what `main.css` hangs the safe-area offset
+    // and the selectable-text rules on, so neither can reach a dropdown.
+    toaster: {
+      slots: {
+        viewport: 'app-toaster',
+      },
+    },
   },
 })

package/app/assets/css/main.css

@@ -3,11 +3,20 @@
 /* The shared rendered-markdown reader presentation (see prose.css). */
 @import './prose.css';
 
+/* The two toaster rules below are scoped by the `app-toaster` marker class that
+ * `app.config.ts` puts on the toaster's viewport slot, NOT by `[data-slot='viewport']`.
+ * That attribute is Nuxt UI's name for the scroll region of ELEVEN components
+ * (Select, SelectMenu, InputMenu, CommandPalette, DropdownMenu, ContextMenu,
+ * NavigationMenu, ScrollArea, Carousel, ChatMessages and the toaster), and all of
+ * the menu ones carry `position: relative`, so a bare `bottom:` here lifts every
+ * dropdown's item list 1rem out of the top of its own popover. Keep any new toaster
+ * rule on the marker class. */
+
 /* Toast text should be selectable. Reka UI sets `user-select: none` inline on
  * the toast root (to support swipe-to-dismiss); since `user-select` is
  * inherited, declaring it directly on the text slots overrides that. */
-[data-slot='viewport'] [data-slot='title'],
-[data-slot='viewport'] [data-slot='description'] {
+.app-toaster [data-slot='title'],
+.app-toaster [data-slot='description'] {
   user-select: text;
 }
 
@@ -20,7 +29,7 @@
  * until the viewport meta carries `viewport-fit=cover` (see nuxt.config.ts), so
  * this collapses to the stock `1rem` on desktop. Assumes the default bottom
  * placement (the app does not configure a top-anchored toaster). */
-[data-slot='viewport'] {
+.app-toaster {
   bottom: calc(1rem + env(safe-area-inset-bottom));
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cat-factory/app",
-  "version": "0.253.1",
+  "version": "0.253.2",
   "description": "Reusable Nuxt layer for the Agent Architecture Board SPA (components, stores, composables, pages). Consume it from a thin deployment app via `extends: ['@cat-factory/app']` and point it at your backend with NUXT_PUBLIC_API_BASE. See deploy/frontend for an example.",
   "repository": {
     "type": "git",