[UI][BugFix] Fix the UI could look weird when the window size is small [1/n]

[XinweiHe]

Summary

as titled.

Type of Change

• feat - A new feature
• fix - A bug fix
• docs - Documentation only changes
• style - Changes that do not affect the meaning of the code (white-space, formatting, missing semi-colons, etc)
• refactor - A code change that neither fixes a bug nor adds a feature
• perf - A code change that improves performance
• test - Adding missing tests or correcting existing tests
• build - Changes that affect the build system or external dependencies (example scopes: gulp, broccoli, npm)
• ci - Changes to our Cl configuration files and scripts (example scopes: Travis, Circle, BrowserStack, SauceLabs)
• chore - Other changes that don't modify sc or test files
• revert - Reverts a previous commit
• security - A security fix or improvement
• github - Changes to our GitHub configuration files and scripts
• other (please describe):

Details

Screenshots / Recordings (if applicable)

1. default

2. smaller window

Checklist

• I have read the CONTRIBUTING.md
• I have added/updated tests where applicable
• I have added screenshots or recordings for UI changes (if applicable)
• I have updated documentation where necessary

[greptile-apps]

Greptile Overview

Greptile Summary

improved responsive UI by implementing container queries to progressively hide badges at small window sizes, preventing overflow and visual clutter. Trace.tsx properly implements container queries with @container wrapper, while function name truncation was added to Span.tsx.

• Trace.tsx: refactored badge layout from justify-between to flexbox with spacer, added @container class to wrapper divs (lines 846, 906), and implemented responsive hiding of badges (environment at 300px, span count at 400px, duration at 450px, error/warning icons at 520px/550px, timestamp at 580px, share/collapse at 600px)
• Span.tsx: similar badge layout refactor and added function name truncation logic (50 chars), but missing @container class on wrapper div at line 166, causing container queries to fail
• both files converted buttons to Badge components for consistency

Confidence Score: 1/5

• this PR has a critical bug that breaks the responsive UI functionality for span components
• the Span component uses container queries throughout (@[300px]:, @[500px]:, @[550px]:) but lacks the required @container class on its wrapper div (line 166), causing all responsive hiding to fail and badges to overflow at small widths - the exact issue this PR aims to fix
• pay close attention to ui/src/components/explore/span/Span.tsx - the missing @container class will cause container queries to fail

Important Files Changed

File Analysis

Filename	Score	Overview
ui/src/components/explore/Trace.tsx	4/5	implemented responsive UI using container queries with proper @container wrapper; badges progressively hide at various breakpoints (300px-600px) to prevent overflow
ui/src/components/explore/span/Span.tsx	1/5	added container queries to hide badges at small sizes, but missing @container class on wrapper div (line 166) causing queries to fail; also added function name truncation logic

Sequence Diagram

sequenceDiagram
    participant User
    participant Browser
    participant Trace
    participant Span
    
    User->>Browser: Resize window to small width
    Browser->>Trace: Trigger container query evaluation
    Trace->>Trace: Check @container width
    alt Width < 300px
        Trace->>Trace: Hide environment badge
    end
    alt Width < 400px
        Trace->>Trace: Hide span count badge
    end
    alt Width < 450px
        Trace->>Trace: Hide duration badge
    end
    alt Width < 520px
        Trace->>Trace: Hide error icon badge
    end
    alt Width < 550px
        Trace->>Trace: Hide warning icon badge
    end
    alt Width < 580px
        Trace->>Trace: Hide timestamp badge
    end
    alt Width < 600px
        Trace->>Trace: Hide share & collapse badges
    end
    
    User->>Trace: Click to expand trace
    Trace->>Span: Render child spans
    Browser->>Span: Trigger container query evaluation
    Span->>Span: Check @container width (FAILS - no @container class)
    Note over Span: Container queries don't work!<br/>Badges remain visible regardless of width
    Span-->>Browser: Badges overflow at small widths

Loading

[greptile-apps]

_{1 file reviewed, 1 comment}

_{Edit Code Review Agent Settings | Greptile}

[greptile-apps]

logic: container query @[640px]: won't work here because DialogContent is rendered outside any element with the @container class (it's at the root level, after line 1229). revert to sm:max-w-md or wrap Dialog in a container.

Suggested change

	<DialogContent className="@[640px]:max-w-md">
	<DialogContent className="sm:max-w-md">

Prompt To Fix With AI

This is a comment left during a code review.
Path: ui/src/components/explore/Trace.tsx
Line: 1233:1233

Comment:
**logic:** container query `@[640px]:` won't work here because `DialogContent` is rendered outside any element with the `@container` class (it's at the root level, after line 1229). revert to `sm:max-w-md` or wrap Dialog in a container.

```suggestion
        <DialogContent className="sm:max-w-md">
```

How can I resolve this? If you propose a fix, please make it concise.

[XinweiHe]

@greptile can you rate the code changes

[greptile-apps]

Additional Comments (1)

1. ui/src/components/explore/span/Span.tsx, line 166-174 (link)

   logic: container queries (@[300px]:, @[500px]:, etc.) used throughout this component won't work because this wrapper div lacks the @container class

_{2 files reviewed, 1 comment}

_{Edit Code Review Agent Settings | Greptile}