feat: improve toolbar responsiveness and UI layout #4
+22
−3
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
- Add responsive toolbar with container query (hide elements at ≤340px) - Remove unnecessary padding for better message alignment - Improve assistant message dot visibility with adaptive color - Update .gitignore to exclude .cursor directory
Reviewer's GuideThis PR enhances UI responsiveness and layout by implementing a toolbar container query with data-responsive attributes for narrow screens, removes excess padding in tool message wrappers for cleaner alignment, adjusts the assistant message dot to use adaptive coloring for better contrast, and updates .gitignore to exclude the .cursor directory. Class diagram for updated ButtonArea and TokenIndicator componentsclassDiagram
class ButtonArea {
+handleThinkingToggle()
+data-responsive="hide-small" (on action buttons)
}
class TokenIndicator {
+formattedPercentage
+data-responsive="hide-small" (on progress-text span)
}
Class diagram for updated ToolMessageWrapper and AssistantMessage componentsclassDiagram
class ToolMessageWrapper {
-padding: 0px 8px
+padding: 0px
}
class AssistantMessage {
-color: var(--vscode-input-border) (dot)
+color: color-mix(in srgb, var(--vscode-foreground) 60%, transparent) (dot)
}
File-Level Changes
Tips and commandsInteracting with Sourcery
Customizing Your ExperienceAccess your dashboard to:
Getting Help
|
There was a problem hiding this comment.
Hey there - I've reviewed your changes - here's some feedback:
- Consider scoping the global body reset to the webview container only, as resetting
<body>might unintentionally override host styles or future layout rules. - Since CSS container queries aren’t supported in all Electron/VSCode versions, add a fallback or feature-detect strategy to avoid layout breakage in unsupported environments.
- Using
!importantfor hiding toolbar elements could lead to specificity wars; try a more specific selector or leverage utility classes instead.
Prompt for AI Agents
Please address the comments from this code review:
## Overall Comments
- Consider scoping the global body reset to the webview container only, as resetting `<body>` might unintentionally override host styles or future layout rules.
- Since CSS container queries aren’t supported in all Electron/VSCode versions, add a fallback or feature-detect strategy to avoid layout breakage in unsupported environments.
- Using `!important` for hiding toolbar elements could lead to specificity wars; try a more specific selector or leverage utility classes instead.Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary by Sourcery
Improve toolbar responsiveness with container queries, refine layout spacing and assistant message dot contrast, and update .gitignore rules
New Features:
Enhancements:
Chores: