mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-03-07 22:20:03 +00:00
fix: make HoneyToast responsive on small screens (#9429)
## 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)
This commit is contained in:
@@ -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'
|
||||
)
|
||||
"
|
||||
>
|
||||
|
||||
Reference in New Issue
Block a user