From c2fc0c0f03c7ace41f80dcda89b61177db4603f4 Mon Sep 17 00:00:00 2001
From: Christian Byrne <cbyrne@comfy.org>
Date: Wed, 4 Mar 2026 22:42:11 -0800
Subject: [PATCH] fix: make HoneyToast responsive on small screens (#9429)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Summary

HoneyToast overflows on screens narrower than 400px because the expanded
content uses a fixed `max(400px, 40vw)` width.

## Changes

- **What**: On small screens (`<640px`), the outer container uses
`inset-x-4` gutters with `w-auto` instead of `w-min`, and the expanded
content uses `w-full` instead of the fixed width. At `sm:` breakpoint
and above, the original centered `w-min` / `w-[max(400px,40vw)]`
behavior is preserved.

## Review Focus

The fix is mobile-first: small screens get fluid width, `sm:` restores
the original fixed behavior. No changes needed in the three consumer
components (ModelImportProgressDialog, AssetExportProgressDialog,
ManagerProgressToast).

<!-- Fixes
https://www.notion.so/comfy-org/Bug-Fix-HoneyToast-width-styling-for-responsiveness-on-all-screen-sizes-3136d73d3650814b97e2cc943a98bedb
-->

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-9429-fix-make-HoneyToast-responsive-on-small-screens-31a6d73d36508103ba02dcef2e5ff33b)
by [Unito](https://www.unito.io)
---
 src/components/honeyToast/HoneyToast.vue | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/components/honeyToast/HoneyToast.vue b/src/components/honeyToast/HoneyToast.vue
index 9e6e191f61..924de3cbdd 100644
--- a/src/components/honeyToast/HoneyToast.vue
+++ b/src/components/honeyToast/HoneyToast.vue
@@ -26,13 +26,15 @@ function toggle() {
         v-if="visible"
         role="status"
         aria-live="polite"
-        class="fixed inset-x-0 bottom-6 z-9999 mx-auto max-w-3xl overflow-hidden rounded-lg border border-border-default bg-base-background shadow-lg min-w-0 w-min transition-all duration-300"
+        class="fixed inset-x-4 bottom-6 z-9999 mx-auto w-auto max-w-3xl overflow-hidden rounded-lg border border-border-default bg-base-background shadow-lg transition-all duration-300 sm:inset-x-0 sm:w-min sm:min-w-0"
       >
         <div
           :class="
             cn(
               'overflow-hidden transition-all duration-300 min-w-0 max-w-full',
-              isExpanded ? 'w-[max(400px,40vw)] max-h-100' : 'w-0 max-h-0'
+              isExpanded
+                ? 'w-full max-h-100 sm:w-[max(400px,40vw)]'
+                : 'w-0 max-h-0'
             )
           "
         >