The styles and title get distorted if the length of the Incident name becomes big

[Owaiseimdad]

Describe the bug
In "Incident" page, if there is a incident with large string the other texts looks like they have come outside of the box.

To Reproduce
Steps to reproduce the behavior:

1. Go to "Incident" page
2. Click on "Incident for" and choose something which is big.
3. See the distorted in the image

Expected behavior
The text or the box should enlarge ideally and the incident should not be shown entirely if the name is big

Screenshots

[Owaiseimdad]

@ajhollid and @gorkemcetin looks like genius bug, please assign this to me if you this is not expected.

[gorkem-bwl]

You are right. If it is big enough, and there is no room to extend it, we can just crop the name there and add "..." at the end of the name. Similar to this:

[Owaiseimdad]

Assign this to me @gorkem-bwl

[Owaiseimdad]

Working on this @gorkem-bwl ,
Updates:

1. Have added a logic in order to truncate the div if the length is more than 15 (why 15? Because I see if the length goes more than 15 then the UI looks a bit mess)
2. Also, made changes in the Styles of the Box components in order to make sure that they don’t overflow the text If zoom beyond lets say 150%.

Screen.Recording.2025-03-02.at.12.53.58.AM.mov

[gorkem-bwl]

Looks good to me.

[Owaiseimdad]

@ajhollid as discussed will raise a new PR for truncate behaviour and we can validate the approach there.

[Owaiseimdad]

@gorkem-bwl , the second issue is fixed which is distored frontend. Working on first issue now.

[gorkem-bwl]

Sure, thanks.

[Owaiseimdad]

@gorkem-bwl and @ajhollid , pr raised for truncate of string separately.