Skip to content
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 5 additions & 2 deletions static/app/views/issueDetails/streamline/header/header.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import styled from '@emotion/styled';
// eslint-disable-next-line no-restricted-imports
import color from 'color';

import {Tag} from '@sentry/scraps/badge';
import {FeatureBadge, Tag} from '@sentry/scraps/badge';
import {LinkButton} from '@sentry/scraps/button';
import {Flex, Grid} from '@sentry/scraps/layout';
import {ExternalLink, Link} from '@sentry/scraps/link';
Expand Down Expand Up @@ -189,6 +189,9 @@ export function StreamlinedGroupHeader({event, group, project}: GroupHeaderProps
>
<PrimaryTitle>{primaryTitle}</PrimaryTitle>
</Tooltip>
{group.issueType === IssueType.LLM_DETECTED_EXPERIMENTAL_V2 && (
<FeatureBadge type="beta" />
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Bug: The Title component's grid layout defines two columns with a gap, but the second column's content is conditional. This creates unwanted whitespace for most issue types.
Severity: LOW

Suggested Fix

Make the grid template conditional, adding the second column only when the badge is rendered. Alternatively, use display: flex with conditional rendering of the badge, or use grid-auto-columns instead of grid-template-columns to avoid creating an explicit empty track.

Prompt for AI Agent
Review the code at the location below. A potential bug has been identified by an AI
agent.
Verify if this is a real issue. If it is, propose a fix; if not, explain why it's not
valid.

Location: static/app/views/issueDetails/streamline/header/header.tsx#L193

Potential issue: The `Title` component's CSS was changed to a two-column grid layout
(`grid-template-columns: minmax(0, max-content) min-content;`) with a `column-gap`.
However, the content for the second column, the `FeatureBadge`, is only rendered for
`LLM_DETECTED_EXPERIMENTAL_V2` issues. For all other issue types, the second column is
empty but the `column-gap` still applies. This results in an unwanted whitespace gap to
the right of the title, creating inconsistent spacing for the vast majority of issues.

Did we get this right? 👍 / 👎 to inform future reviews.

)}
</Title>
<StatTitle>
{issueTypeConfig.eventAndUserCounts.enabled && (
Expand Down Expand Up @@ -408,7 +411,7 @@ const Workflow = styled('div')`

const Title = styled('div')`
display: grid;
grid-template-columns: minmax(0, max-content);
grid-template-columns: minmax(0, max-content) min-content;
Comment thread
roggenkemper marked this conversation as resolved.
align-items: center;
column-gap: ${p => p.theme.space.sm};
`;
Expand Down
Loading