From 245f840e7c5f4c5ec19f1676c81a146d9252c05e Mon Sep 17 00:00:00 2001
From: Jin Yi <jin12cc@gmail.com>
Date: Tue, 10 Mar 2026 14:17:22 +0900
Subject: [PATCH] fix: prevent HoneyToast from collapsing to minimum width in
 collapsed state (#9701)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## 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"
/>
---
 src/components/honeyToast/HoneyToast.vue              | 11 +++++++----
 .../manager/components/ManagerProgressToast.vue       |  8 +++++---
 2 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/src/components/honeyToast/HoneyToast.vue b/src/components/honeyToast/HoneyToast.vue
index 4ecc539258..a64246ad35 100644
--- a/src/components/honeyToast/HoneyToast.vue
+++ b/src/components/honeyToast/HoneyToast.vue
@@ -26,15 +26,18 @@ function toggle() {
         v-if="visible"
         role="status"
         aria-live="polite"
-        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"
+        :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 sm:w-[max(400px,40vw)]'
-                : 'max-h-0 w-0'
+              isExpanded ? 'max-h-100 w-full' : 'max-h-0 w-0'
             )
           "
         >
diff --git a/src/workbench/extensions/manager/components/ManagerProgressToast.vue b/src/workbench/extensions/manager/components/ManagerProgressToast.vue
index f205920f4c..36d67508e4 100644
--- a/src/workbench/extensions/manager/components/ManagerProgressToast.vue
+++ b/src/workbench/extensions/manager/components/ManagerProgressToast.vue
@@ -245,8 +245,10 @@ onBeforeUnmount(() => {
     </template>
 
     <template #footer="{ toggle }">
-      <div class="flex w-full items-center justify-between px-6 py-2 shadow-lg">
-        <div class="flex items-center text-base leading-none">
+      <div
+        class="flex w-full items-center justify-between gap-4 px-6 py-2 shadow-lg"
+      >
+        <div class="flex min-w-0 items-center text-base leading-none">
           <div class="flex items-center">
             <template v-if="isInProgress">
               <DotSpinner duration="1s" class="mr-2" />
@@ -262,7 +264,7 @@ onBeforeUnmount(() => {
             </template>
           </div>
         </div>
-        <div class="flex items-center gap-4">
+        <div class="flex shrink-0 items-center gap-4">
           <span v-if="isInProgress" class="text-sm text-muted-foreground">
             {{ completedTasksCount }} {{ t('g.progressCountOf') }}
             {{ totalTasksCount }}