@flytedan/flytebot-design-system 0.51.3 → 0.51.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flytedan/flytebot-design-system",
-  "version": "0.51.3",
+  "version": "0.51.4",
   "description": "flytedesk Design System — shared component library, tokens, and business-logic kits for flytedesk apps.",
   "type": "module",
   "license": "UNLICENSED",

package/styles/components.css

@@ -2714,24 +2714,44 @@
   color: var(--text);
   font-size: var(--body-size);
 }
-/* ToastProvider's stack: pinned to the bottom-right of the viewport (z-index is set inline
-   from OVERLAY_CEILING, above every layer). The region itself takes no clicks: it has a real
-   box wherever a toast is, including the gap between two stacked toasts and the shadow around
-   each, and without this a click aimed at the control underneath would land on it. Each toast
-   takes its clicks back, so its close button works. */
-.fd-toast-region {
+/* The corner stack: the one bottom-right box every floating surface (the toasts, the job
+   tray) renders into a slot of, so they lay out one above the next instead of each pinning
+   itself to the same corner (z-index is set inline from OVERLAY_CEILING, above every layer).
+   It is 340px wide, and on a phone the width between two gutters. The stack
+   takes no clicks: it has a real box wherever a surface is, including the gaps between
+   surfaces and the shadow around each, and without this a click aimed at the control
+   underneath would land on it. Each surface takes its clicks back. Slots run bottom to top;
+   two occupied slots are one gap apart, and an empty one (the toast region is always mounted
+   for its live region) takes no room. */
+.fd-corner-stack {
   position: fixed;
   bottom: var(--s-lg);
   right: var(--s-lg);
+  display: flex;
+  flex-direction: column-reverse;
+  width: 340px;
+  pointer-events: none;
+}
+@media (max-width: 640px) {
+  .fd-corner-stack {
+    width: calc(100vw - 2 * var(--s-lg));
+  }
+}
+.fd-corner-stack-slot:has(> :not(:empty)) ~ .fd-corner-stack-slot:has(> :not(:empty)) {
+  margin-bottom: var(--s-sm);
+}
+/* ToastProvider's stack, in the corner stack's toasts slot. */
+.fd-toast-region {
   display: flex;
   flex-direction: column;
   gap: var(--s-sm);
-  max-width: calc(100vw - 2 * var(--s-lg));
-  pointer-events: none;
 }
 .fd-toast-region > * {
   pointer-events: auto;
 }
+.fd-toast-region > .fd-toast {
+  width: auto;
+}
 
 /* ============ Flag / empty ============ */
 .fd-flag {
@@ -7488,15 +7508,9 @@ button.fd-erow-metric:focus-visible {
    A stack of background-job cards (exports, syncs) and an ordered-phase display for the
    same kind of job. Both are entirely props-driven — no timers here, only layout. */
 .fd-job-tray{
-  position:fixed;
-  right:var(--s-16,16px);
-  bottom:var(--s-16,16px);
-  z-index:40;
   display:flex;
   flex-direction:column-reverse;
   gap:10px;
-  width:340px;
-  max-width:calc(100vw - 32px);
   pointer-events:none;
 }
 .fd-job-tray>.fd-job-card{pointer-events:auto}
@@ -7519,16 +7533,6 @@ button.fd-erow-metric:focus-visible {
 .fd-job-card-done-note{display:block}
 .fd-job-card-failed{display:flex;align-items:flex-start;gap:8px;color:var(--danger-text);font-size:var(--body-sm-size)}
 .fd-job-card-failed .ph{flex:none;font-size:16px;margin-top:1px}
-@media (max-width:640px){
-  .fd-job-tray{
-    left:16px;
-    right:16px;
-    bottom:0;
-    width:auto;
-    max-width:none;
-    padding-bottom:12px;
-  }
-}
 
 .fd-phased-progress{display:flex;flex-direction:column;gap:12px}
 .fd-phase-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}