From bbc85deea7ca8265d0eebda28f5bd994b2bf435d Mon Sep 17 00:00:00 2001
From: Raj Nandan Sharma <rajnandan1@gmail.com>
Date: Sat, 18 Jul 2026 22:55:11 +0530
Subject: [PATCH] fix(ui): wrap affected-monitor badges inside event cards

Maintenance and incident cards rendered affected monitors in a
non-wrapping flex row; with many monitors the badges overflowed the
card (maintenance) or hid behind a horizontal scrollbar (incident).
Badge text was also nowrap, so a single long monitor name could still
bleed past the card edge on narrow viewports.

Apply one rule to both components: badges wrap within the box, and
badge text itself wraps when a name exceeds the row width.

Fixes #794

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 src/lib/components/IncidentItem.svelte    | 6 +++---
 src/lib/components/MaintenanceItem.svelte | 4 ++--
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/lib/components/IncidentItem.svelte b/src/lib/components/IncidentItem.svelte
index dff8897a..05f8465b 100644
--- a/src/lib/components/IncidentItem.svelte
+++ b/src/lib/components/IncidentItem.svelte
@@ -52,14 +52,14 @@
     </div>
 
     {#if incident.monitors && incident.monitors.length > 0 && !hideMonitors}
-      <div class="my-1 overflow-x-auto p-1">
-        <div class="flex gap-2">
+      <div class="my-1 p-1">
+        <div class="flex flex-wrap gap-2">
           {#each incident.monitors as monitor (`${incident.id}-${monitor.monitor_tag}`)}
             <Popover.Root>
               <Popover.Trigger disabled={isEmbedded}>
                 <Badge
                   variant="outline"
-                  class="border-{monitor.monitor_impact.toLowerCase()}   cursor-pointer rounded-none border-0 border-b px-0  text-sm font-normal"
+                  class="border-{monitor.monitor_impact.toLowerCase()}   max-w-full cursor-pointer rounded-none border-0 border-b px-0 text-sm font-normal wrap-anywhere whitespace-normal"
                 >
                   {monitor.monitor_name}
                 </Badge>
diff --git a/src/lib/components/MaintenanceItem.svelte b/src/lib/components/MaintenanceItem.svelte
index 65f20964..53011e1d 100644
--- a/src/lib/components/MaintenanceItem.svelte
+++ b/src/lib/components/MaintenanceItem.svelte
@@ -52,13 +52,13 @@
     {/if}
 
     {#if maintenance.monitors && maintenance.monitors.length > 0 && !hideMonitors}
-      <div class="flex gap-2">
+      <div class="flex flex-wrap gap-2">
         {#each maintenance.monitors as monitor}
           <Popover.Root>
             <Popover.Trigger disabled={isEmbedded}>
               <Badge
                 variant="outline"
-                class="border-{monitor.monitor_impact.toLowerCase()}   cursor-pointer rounded-none border-0 border-b px-0  text-sm font-normal"
+                class="border-{monitor.monitor_impact.toLowerCase()}   max-w-full cursor-pointer rounded-none border-0 border-b px-0 text-sm font-normal wrap-anywhere whitespace-normal"
               >
                 {monitor.monitor_name}
               </Badge>