fix(ui): cut-off feedback button in chonk

[jasonyuezhang]

Initially, we had an issue that the feedback button was displayed outside the container when we showing a placeholder:

There was an attempted fix by @shayna-ch here:

• fix(groupingInfo): Fix feedback button loading outside container. getsentry/sentry#98928

which seemed to work, however, it relies on overflow:hidden, which doesn’t work well in chonk because it cuts-off our buttons:

What the fix tried to do was to limit the width of the container and force the content to not exceed its bounds with overfow:hidden.

However, the root cause seems to be that we are exceeding the bounds in the first place. Why is that?

It’s because the Placeholder component has a default width of width:100%, which is not what we want when there’s content next to it.
Luckily, we are in a flex layout, so what we really want to do is have the <Placeholder> use all the remaining width, which we can do with flexGrow:1.

I have therefore removed the GroupingInfoContainer that was introduced in getsentry#98928 and reverted back to a Fragment and fixed the issue by unsetting the width of the Placeholder and applying flexGrow:1 to it instead.

Note: It’s weird that Placeholder has a default width of 100% - I don’t think we should be using width:100% in flex layouts, but I didn’t dare changing that inside Placeholder because it has so many usages.

---

Copied from getsentry#100985
Original PR: getsentry#100985

[propel-test-bot]

UI Fix: Prevent Feedback Button Cut-off in chonk Layout

This PR addresses a UI bug where the feedback button was improperly cut off in the chonk layout due to the use of overflow:hidden and improper width handling for the Placeholder component in a flex container. The solution removes the GroupingInfoContainer wrapper and instead uses a Fragment, adjusting the Placeholder to use flexGrow:1 and unsetting its width so that it properly fills the remaining space in flex layouts without causing content overflow.

Key Changes

• Removed GroupingInfoContainer from static/app/components/events/groupingInfo/groupingInfo.tsx and replaced it with a Fragment.
• Deleted the GroupingInfoContainer styled wrapper and its associated styles (width: 100%, max-width: 100%, overflow: hidden, box-sizing: border-box).
• Adjusted the Placeholder in static/app/components/events/groupingInfo/groupingSummary.tsx by unsetting the width prop and applying flexGrow: 1 via inline style when loading.
• Ensured proper layout of the feedback button and placeholder in flex contexts, resolving button cutoff issues.

Affected Areas

• static/app/components/events/groupingInfo/groupingInfo.tsx
• static/app/components/events/groupingInfo/groupingSummary.tsx
• UI layout for grouping info summary and feedback button in the affected container

This summary was automatically generated by @propel-code-bot