fix: plugin installation task popover layout when some failed too long (#38000)

web/app/components/plugins/plugin-page/plugin-tasks/components/error-plugin-item.tsx

@@ -111,7 +111,7 @@ const ErrorPluginItem: FC<ErrorPluginItemProps> = ({ plugin, getIconUrl, languag
           </span>
         )}
         statusText={(
-          <span className="block max-w-full wrap-break-word whitespace-pre-line">
+          <span className="block max-w-full min-w-0 [overflow-wrap:anywhere] break-words whitespace-pre-wrap">
             {plugin.message || errorMsg}
           </span>
         )}

web/app/components/plugins/plugin-page/plugin-tasks/components/plugin-item.tsx

@@ -29,7 +29,7 @@ const PluginItem: FC<PluginItemProps> = ({
   const pluginName = plugin.labels[language] || plugin.plugin_unique_identifier
 
   return (
-    <div className="group/item flex gap-1 rounded-lg p-2 hover:bg-state-base-hover">
+    <div className="group/item flex w-full max-w-full min-w-0 gap-1 overflow-hidden rounded-lg p-2 hover:bg-state-base-hover">
       <div className="relative shrink-0 self-start">
         {hasPluginIcon
           ? (
@@ -44,11 +44,11 @@ const PluginItem: FC<PluginItemProps> = ({
           {statusIcon}
         </div>
       </div>
-      <div className="flex min-w-0 grow flex-col gap-0.5 px-1">
+      <div className="flex min-w-0 flex-1 flex-col gap-0.5 px-1 [overflow-wrap:anywhere]">
         <div className="truncate system-sm-medium text-text-secondary">
           {plugin.labels[language]}
         </div>
-        <div className={`min-w-0 system-xs-regular wrap-break-word ${statusClassName || 'text-text-tertiary'}`}>
+        <div className={`max-w-full min-w-0 system-xs-regular [overflow-wrap:anywhere] wrap-break-word ${statusClassName || 'text-text-tertiary'}`}>
           {statusText}
         </div>
         {action}

web/app/components/plugins/plugin-page/plugin-tasks/components/plugin-task-list.tsx

@@ -33,15 +33,15 @@ function PluginTaskList({
 
   return (
     <div
-      className="w-[360px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur p-1 shadow-lg"
+      className="w-[360px] max-w-[calc(100vw-32px)] overflow-hidden rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur p-1 shadow-lg"
       data-testid="plugin-task-list"
     >
       <ScrollArea
         className="max-h-[420px] overflow-hidden"
         label={t('task.installing', { ns: 'plugin' })}
         slotClassNames={{
-          viewport: 'overscroll-contain',
-          content: 'min-w-0',
+          viewport: 'max-h-[420px] overscroll-contain',
+          content: 'w-full! max-w-full! min-w-0! overflow-x-hidden!',
         }}
       >
         {runningPlugins.length > 0 && (
@@ -103,13 +103,10 @@ function PluginTaskList({
                 {t('task.clearAll', { ns: 'plugin' })}
               </Button>
             </div>
-            <ScrollArea
-              className="overflow-hidden"
-              label={errorSectionTitle}
-              slotClassNames={{
-                viewport: 'overscroll-contain',
-                content: 'min-w-0',
-              }}
+            <div
+              aria-label={errorSectionTitle}
+              className="w-full max-w-full min-w-0 overflow-hidden"
+              role="region"
             >
               {errorPlugins.map(plugin => (
                 <ErrorPluginItem
@@ -120,7 +117,7 @@ function PluginTaskList({
                   onClear={() => onClearSingle(plugin.taskId, plugin.plugin_unique_identifier)}
                 />
               ))}
-            </ScrollArea>
+            </div>
           </>
         )}
       </ScrollArea>