From bcc88b561aacd28044ab79db3974ce48f64f8201 Mon Sep 17 00:00:00 2001
From: Dotta <bippadotta@protonmail.com>
Date: Tue, 28 Apr 2026 21:07:29 -0500
Subject: [PATCH] PAP-2778 Wrap waiting pills instead of overflowing

The Target/Owner/Resume chips in the explicit-wait IssueBlockedNotice
banner used inline-flex with `truncate max-w-[Nrem]` on inner spans, so
on narrow viewports a single chip (especially Resume's full sentence)
extended past the container edge. Cap each chip at max-w-full and let
the value span wrap on word boundaries; desktop layout is unchanged.

Co-Authored-By: Paperclip <noreply@paperclip.ing>
---
 ui/src/components/IssueBlockedNotice.tsx | 39 +++++++++---------------
 1 file changed, 14 insertions(+), 25 deletions(-)

diff --git a/ui/src/components/IssueBlockedNotice.tsx b/ui/src/components/IssueBlockedNotice.tsx
index c3ea5cf2f9f..89377af3a94 100644
--- a/ui/src/components/IssueBlockedNotice.tsx
+++ b/ui/src/components/IssueBlockedNotice.tsx
@@ -434,42 +434,31 @@ export function IssueBlockedNotice({
 
   const explicitWaitingPills = (() => {
     if (!showExplicitWaiting) return null;
+    const pillClass =
+      "inline-flex max-w-full items-center gap-1 rounded-md border border-sky-300/70 bg-white/80 px-1.5 py-0.5 text-[11px] font-medium text-sky-900 dark:border-sky-500/40 dark:bg-background/40 dark:text-sky-100";
+    const labelClass =
+      "shrink-0 text-[10px] uppercase tracking-wide text-sky-700/80 dark:text-sky-300/80";
+    const valueClass = "min-w-0 break-words";
     const pills: React.ReactNode[] = [];
     if (explicitWaitingTargetLabel) {
       pills.push(
-        <span
-          key="target"
-          className="inline-flex items-center gap-1 rounded-md border border-sky-300/70 bg-white/80 px-1.5 py-0.5 text-[11px] font-medium text-sky-900 dark:border-sky-500/40 dark:bg-background/40 dark:text-sky-100"
-        >
-          <span className="text-[10px] uppercase tracking-wide text-sky-700/80 dark:text-sky-300/80">
-            Target
-          </span>
-          <span className="truncate max-w-[16rem]">{explicitWaitingTargetLabel}</span>
+        <span key="target" className={pillClass}>
+          <span className={labelClass}>Target</span>
+          <span className={valueClass}>{explicitWaitingTargetLabel}</span>
         </span>,
       );
     }
     pills.push(
-      <span
-        key="owner"
-        className="inline-flex items-center gap-1 rounded-md border border-sky-300/70 bg-white/80 px-1.5 py-0.5 text-[11px] font-medium text-sky-900 dark:border-sky-500/40 dark:bg-background/40 dark:text-sky-100"
-      >
-        <span className="text-[10px] uppercase tracking-wide text-sky-700/80 dark:text-sky-300/80">
-          Owner
-        </span>
-        <span className="truncate max-w-[12rem]">{ownerLabel}</span>
+      <span key="owner" className={pillClass}>
+        <span className={labelClass}>Owner</span>
+        <span className={valueClass}>{ownerLabel}</span>
       </span>,
     );
     if (explicitWaitingResumeLabel) {
       pills.push(
-        <span
-          key="resume"
-          className="inline-flex items-center gap-1 rounded-md border border-sky-300/70 bg-white/80 px-1.5 py-0.5 text-[11px] font-medium text-sky-900 dark:border-sky-500/40 dark:bg-background/40 dark:text-sky-100"
-          title={explicitWaitingResumeLabel}
-        >
-          <span className="text-[10px] uppercase tracking-wide text-sky-700/80 dark:text-sky-300/80">
-            Resume
-          </span>
-          <span className="truncate max-w-[24rem]">{explicitWaitingResumeLabel}</span>
+        <span key="resume" className={pillClass} title={explicitWaitingResumeLabel}>
+          <span className={labelClass}>Resume</span>
+          <span className={valueClass}>{explicitWaitingResumeLabel}</span>
         </span>,
       );
     }