Skip to content

Conversation

@roomote
Copy link
Contributor

@roomote roomote bot commented Dec 8, 2025

This PR improves the condensing UI component styling to match the API request component style as discussed in Slack.

Changes

  • Price positioning: Moved price tag to the right side before the chevron (instead of inline with the text)
  • Chevron visibility: Made chevron only visible on hover for a cleaner look
  • Text capitalization: Changed "Context Condensed" to "context condensed" (lowercase) to match other components
  • Visual styling: Applied subtle opacity (40%) with hover effect (100%) to match API request component
  • Cost display: Used 4 decimal places for consistency with API request component

Visual Comparison

The condensing component now has the same visual treatment as the API request component:

  • Subtle appearance by default (40% opacity)
  • Full visibility on hover (100% opacity)
  • Price and chevron on the right side
  • Consistent spacing and layout

View task on Roo Code Cloud

@roomote
Copy link
Contributor Author

roomote bot commented Dec 8, 2025

Rooviewer Clock   See task on Roo Cloud

Reviewed the styling changes to the CondensationResultRow component. The changes correctly align the condensing UI with the API request component styling:

  • Opacity behavior (40% default, 100% on hover) matches API request component
  • Price badge styling and positioning is consistent
  • Cost display uses 4 decimal places as expected
  • Chevron hover visibility follows the same pattern
  • i18n text case change is intentional for consistency

No issues found.

Mention @roomote in a comment to request specific changes to this pull request or fix all unresolved issues.

Copy link
Collaborator

@brunobergher brunobergher left a comment

Choose a reason for hiding this comment

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

Left some comments

}}
onClick={() => setIsExpanded(!isExpanded)}>
<div className="flex items-center gap-2 flex-grow">
<div style={{ display: "flex", alignItems: "center", gap: "10px", flexGrow: 1 }}>
Copy link
Collaborator

Choose a reason for hiding this comment

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

We should stick to tailwind classes

"tokens": "tokens",
"condensation": {
"title": "Context Condensed",
"title": "context condensed",
Copy link
Collaborator

Choose a reason for hiding this comment

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

Nope, "Context consensed", sentence case. And we need to update other locales accordingly.

<span className={`codicon codicon-chevron-${isExpanded ? "up" : "down"}`}></span>
<div className="flex items-center gap-2">
<div
className="text-xs text-vscode-dropdown-foreground border-vscode-dropdown-border/50 border px-1.5 py-0.5 rounded-lg"
Copy link
Collaborator

Choose a reason for hiding this comment

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

We need to check visually, but this seems to match the code I wanted it to

@hannesrudolph hannesrudolph added the Issue/PR - Triage New issue. Needs quick review to confirm validity and assign labels. label Dec 8, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Issue/PR - Triage New issue. Needs quick review to confirm validity and assign labels.

Projects

Status: Triage

Development

Successfully merging this pull request may close these issues.

4 participants