mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-04-26 17:30:07 +00:00
245f840e7c
## Summary Fix HoneyToast footer content (text + buttons) being squished when collapsed due to `sm:w-min` on the outer container. ## Changes - **What**: Replace `sm:w-min sm:min-w-0` with state-aware sizing (`sm:w-fit` when collapsed, `sm:w-[max(400px,40vw)]` when expanded) on the HoneyToast container. Add `gap-4` between footer text and buttons in ManagerProgressToast, `min-w-0` on text area, and `shrink-0` on button area to prevent overlap. ## Review Focus - HoneyToast is used in 3 places: ManagerProgressToast, ModelImportProgressDialog, AssetExportProgressDialog. The change moves width control from the inner content div to the outer container, which should have no negative impact on the other two consumers. ## As-is <img width="481" height="146" alt="스크린샷 2026-03-10 오전 10 40 52" src="https://github.com/user-attachments/assets/b5e12e20-23ea-4f11-9778-ad4e6c10a425" /> ## To-be <img width="506" height="62" alt="스크린샷 2026-03-10 오후 1 46 18" src="https://github.com/user-attachments/assets/f2b7963d-eedb-4885-bc57-f8b377962e92" /> <img width="630" height="83" alt="스크린샷 2026-03-10 오후 1 46 10" src="https://github.com/user-attachments/assets/e9c35f1c-3441-4fb2-8fa4-f66b7d53b3e5" /> <img width="683" height="103" alt="스크린샷 2026-03-10 오후 1 46 02" src="https://github.com/user-attachments/assets/afb94a16-cfba-4da9-8676-35f4d3133b57" />
52 lines
1.4 KiB
Vue
52 lines
1.4 KiB
Vue
<script setup lang="ts">
|
|
import { cn } from '@/utils/tailwindUtil'
|
|
|
|
const { visible } = defineProps<{
|
|
visible: boolean
|
|
}>()
|
|
|
|
const isExpanded = defineModel<boolean>('expanded', { default: false })
|
|
|
|
function toggle() {
|
|
isExpanded.value = !isExpanded.value
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<Teleport to="body">
|
|
<Transition
|
|
enter-active-class="transition-all duration-300 ease-out"
|
|
enter-from-class="translate-y-full opacity-0"
|
|
enter-to-class="translate-y-0 opacity-100"
|
|
leave-active-class="transition-all duration-200 ease-in"
|
|
leave-from-class="translate-y-0 opacity-100"
|
|
leave-to-class="translate-y-full opacity-0"
|
|
>
|
|
<div
|
|
v-if="visible"
|
|
role="status"
|
|
aria-live="polite"
|
|
:class="
|
|
cn(
|
|
'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',
|
|
isExpanded ? 'sm:w-[max(400px,40vw)]' : 'sm:w-fit'
|
|
)
|
|
"
|
|
>
|
|
<div
|
|
:class="
|
|
cn(
|
|
'max-w-full min-w-0 overflow-hidden transition-all duration-300',
|
|
isExpanded ? 'max-h-100 w-full' : 'max-h-0 w-0'
|
|
)
|
|
"
|
|
>
|
|
<slot :is-expanded />
|
|
</div>
|
|
|
|
<slot name="footer" :is-expanded :toggle />
|
|
</div>
|
|
</Transition>
|
|
</Teleport>
|
|
</template>
|