ux: improve responsiveness on small widths for auto-approve button #8152

VeryEvilHumna · 2025-09-18T16:15:37Z

Related GitHub Issue

Follow-up for #7894

Description

I've attached a video demonstrating the change below

Implemented responsive text display with and abbreviated labels on small screens
Added short "Off" label for compact display in English and Russian locales (the only languages I know)
Made so for narrow screens auto-approve button never changes its icon to cross, so it would be easy to understand what this button is even without text on it

Test Procedure

Resize the extension to quite wide and quite narrow

Pre-Submission Checklist

Issue Linked: This PR is linked to an approved GitHub Issue (see "Related GitHub Issue" above).
Scope: My changes are focused on the linked issue (one major feature/fix per PR).
Self-Review: I have performed a thorough self-review of my code.
Testing: New and/or updated tests have been added to cover my changes (if applicable).
Documentation Impact: I have considered if my changes require documentation updates (see "Documentation Updates" section below).
Contribution Guidelines: I have read and agree to the Contributor Guidelines.

Screenshots / Videos

RvRvpnGui_NdyucCk18T.mp4

Documentation Updates

Get in Touch

Please provide your Discord username for reviewers or maintainers to reach you if they have questions about your PR

I prefer email, so just write all questions as comments for this PR

Important

Improves auto-approve button responsiveness for small screens by adjusting icon and label display in AutoApproveDropdown.tsx and updating locale files for compact labels.

UI Responsiveness:
- In AutoApproveDropdown.tsx, added responsive behavior for the auto-approve button to display abbreviated labels on screens narrower than 400px.
- Ensures the button icon remains a checkmark on narrow screens, even when auto-approval is off.
Localization:
- Added triggerLabelOffShort for compact display in en/chat.json and ru/chat.json.

^{This description was created by}^{for 5b48385. You can customize this summary. It will automatically update as commits are pushed.}

- + Add Russian i18n string

roomote

Thank you for your contribution! I've reviewed the changes and found some issues that need attention. The PR successfully addresses the responsiveness issue on narrow screens, but there are a few important items to address.

roomote · 2025-09-18T16:20:29Z

webview-ui/src/components/chat/AutoApproveDropdown.tsx

-					) : (
-						<CheckCheck className="size-3 flex-shrink-0" />
-					)}
+					<CheckCheck className="min-[400px]:hidden size-3 flex-shrink-0" />


Is this intentional? The button always shows the CheckCheck icon on narrow screens regardless of the auto-approve state. This could be confusing since users expect the icon to reflect whether auto-approve is on or off. Consider keeping the state-based icon logic even on narrow screens:

Suggested change

<CheckCheck className="min-[400px]:hidden size-3 flex-shrink-0" />

<span className="min-[400px]:hidden">

{!effectiveAutoApprovalEnabled ? (

<X className="size-3 flex-shrink-0" />

) : (

<CheckCheck className="size-3 flex-shrink-0" />

)}

</span>

That is intentional, it keeps the semantic meaning of the button (double checkmark == auto-approve) even without the text on the button that says what it does

roomote · 2025-09-18T16:20:29Z

webview-ui/src/components/chat/AutoApproveDropdown.tsx

 						"inline-flex items-center gap-1.5 relative whitespace-nowrap px-1.5 py-1 text-xs",
 						"bg-transparent border border-[rgba(255,255,255,0.08)] rounded-md text-vscode-foreground",
 						"transition-all duration-150 focus:outline-none focus-visible:ring-1 focus-visible:ring-vscode-focusBorder focus-visible:ring-inset",
+						"max-[400px]:shrink-0",


The 400px breakpoint is hardcoded in multiple places (lines 176, 182, 183, 191, 198). Consider extracting this to a constant or CSS variable for better maintainability. For example:

const NARROW_SCREEN_BREAKPOINT = '400px'; // Then use: `max-[${NARROW_SCREEN_BREAKPOINT}]` in template literals

Or define it as a Tailwind config value if the project supports it.

roomote · 2025-09-18T16:20:29Z

webview-ui/src/i18n/locales/en/chat.json

 		"triggerLabel_other": "{{count}} auto-approved",
-		"triggerLabelAll": "YOLO"
+		"triggerLabelAll": "YOLO",
+		"triggerLabelOffShort": "Off"


Good addition! However, this new translation key needs to be added to all other locale files to prevent missing translation warnings. The following locales are missing this key:

Spanish (es)

French (fr)

German (de)

Chinese (zh-CN)

Japanese (ja)

And all other supported locales

Even if you don't know the translations, please add the key with the English value as a placeholder to prevent runtime warnings.

hannesrudolph · 2025-09-23T02:54:42Z

@brunobergher i like this. Thoughts?

brunobergher · 2025-09-23T09:41:39Z

This is great, looks good to me from a UI perspective. Thank you for the contribution and sorry for the delay in responding, it's been busy 😅

roomote · 2025-10-20T20:11:50Z

Review Summary

I've reviewed the responsive auto-approve button changes. The implementation is functional and all translations have been properly added.

Outstanding Items

Consider extracting the hardcoded 400px breakpoint to a constant or CSS variable for better maintainability (currently appears in 5 places: lines 176, 182, 183, 191, 198)

Resolved Items

Missing translations - All locale files now include triggerLabelOffShort
Icon behavior clarified as intentional design choice

The PR is ready to merge. The maintainability suggestion is a nice-to-have improvement but not blocking.

- Add responsive breakpoint at 300px for compact view - Icon correctly reflects state (X when off, ✓ when on) at all screen sizes - Show abbreviated labels on very narrow screens (< 300px) - Add triggerLabelOffShort translation key to all locales Fixes issues from PR #8152: - Icon always showing checkmark on narrow screens - Breakpoint activating too early (was 400px) - Incorrect Tailwind class ordering

daniel-lxs · 2025-10-23T23:25:55Z

Superseded by #8798

- Add responsive breakpoint at 300px for compact view - Icon correctly reflects state (X when off, ✓ when on) at all screen sizes - Show abbreviated labels on very narrow screens (< 300px) - Add triggerLabelOffShort translation key to all locales Fixes issues from PR #8152: - Icon always showing checkmark on narrow screens - Breakpoint activating too early (was 400px) - Incorrect Tailwind class ordering

@jdilla1277

* fix: skip flaky Windows test in custom-system-prompt.spec.ts (RooCodeInc#8023) Co-authored-by: roomote[bot] <219738659+roomote[bot]@users.noreply.github.com> Co-authored-by: Roo Code <[email protected]> Co-authored-by: Matt Rubens <[email protected]> * feat: add GDPR-compliant cookie consent banner (RooCodeInc#8022) Co-authored-by: Roo Code <[email protected]> Co-authored-by: Bruno Bergher <[email protected]> Co-authored-by: Matt Rubens <[email protected]> * Release: v1.76.0 (RooCodeInc#8030) * Types 1.77.0 (RooCodeInc#8031) * feat(web): update homepage headline and tagline for remote control capabilities (RooCodeInc#7911) * Merge remote-tracking branch 'upstream/main' into roo-to-main * ux: Responsive Auto-Approve (RooCodeInc#8032) Co-authored-by: roomote[bot] <219738659+roomote[bot]@users.noreply.github.com> Co-authored-by: ellipsis-dev[bot] <65095814+ellipsis-dev[bot]@users.noreply.github.com> * feat(cloud): Add telemetry retry queue for network resilience (RooCodeInc#7597) * feat(cloud): Add telemetry retry queue for network resilience - Implement RetryQueue class with workspace-scoped persistence - Queue failed telemetry events for automatic retry - Retry events every 60 seconds with fresh auth tokens - FIFO eviction when queue reaches 100 events - Persist queue across VS Code restarts This ensures telemetry data isn't lost during network failures or temporary server issues. Migrated from RooCodeInc/Roo-Code-Cloud#744 * fix: address PR review feedback for retry queue - Fix retry order to use consistent FIFO processing - Add retry limit enforcement with max retries check - Add configurable request timeout (default 30s) - Add comprehensive tests for retryAll() method - Add request-max-retries-exceeded event - Fix timeout test to avoid timing issues * fix: resolve TypeScript errors in RetryQueue tests * fix(cloud): Address PR feedback for telemetry retry queue - Handle HTTP error status codes (500s, 401/403, 429) as failures that trigger retry - Remove queuing of backfill operations since they're user-initiated - Fix race condition in concurrent retry processing with isProcessing flag - Add specialized retry logic for 429 with Retry-After header support - Clean up unnecessary comments - Add comprehensive tests for new status code handling - Add temporary debug logs with emojis for testing * refactor: address PR feedback for telemetry retry queue - Remove unused X-Organization-Id header from auth header provider - Simplify enqueue() API by removing operation parameter - Fix error retry logic: only retry 5xx, 429, and network failures - Stop retrying 4xx client errors (400, 401, 403, 404, 422) - Implement queue-wide pause for 429 rate limiting - Add auth state management integration: - Pause queue when not in active-session - Clear queue on logout or user change - Preserve queue when same user logs back in - Remove debug comments - Fix ESLint no-case-declarations error with proper block scope - Update tests for all new behaviors * Docs: Overhaul README (RooCodeInc#8005) * docs: overhaul README for clarity and impact * fix: update badge links and styles in README for improved visibility * docs(README): stronger CTAs for Discord/Reddit; restore Modes/Roles incl. cloud agents * docs(readme): add support CTA; refine modes section; clarify custom modes wording - add centered help/links CTA under badges: [README.md](README.md:8-10) - expand feature list to explicitly include modes: [README.md](README.md:45) - rename section header “Modes and Roles” → “Modes”: [README.md](README.md:52) - update wording to “Custom Modes: build specialized modes for your team or workflow”: [README.md](README.md:60) * docs: implement @jdilla1277 suggestions for English README - Updated header to "Your AI-Powered Dev Team, Right in Your Editor" (removed Cline reference) - Changed line 44 to "Generate Code from natural language descriptions and specs" for better SEO - Removed "not the other way around" phrase from line 54 - Replaced "Cloud Agents" with "Roomote Control" on line 61 As requested by @hannesrudolph, these changes are only applied to the English README. * docs: clarify Roomote Control description and update related links in README * Reworked the contributor list. Made translastion corrections. --------- Co-authored-by: Roo Code <[email protected]> * Add organizationFeaturesSchema with roomoteControlEnabled (RooCodeInc#8085) feat: add organizationFeaturesSchema with roomoteControlEnabled - Add organizationFeaturesSchema with optional roomoteControlEnabled boolean - Integrate features property into organizationSettingsSchema as optional - Add comprehensive tests for new schema validation - Maintain backward compatibility with existing organization settings Co-authored-by: Roo Code <[email protected]> * Release: v1.78.0 (RooCodeInc#8089) chore: bump version to v1.78.0 * Get the model id property for a given provider (RooCodeInc#8009) * Fix: Transform keybindings in nightly build to fix command+y shortcut (RooCodeInc#8070) * fix: transform keybindings command references in nightly build The keybindings section was not being transformed during the nightly build process, causing command+y keybinding to reference the wrong command name (roo-cline.addToContext instead of roo-code-nightly.addToContext). - Added keybindings schema to types.ts - Updated generatePackageJson to transform keybindings command references - This ensures keybindings work correctly in the nightly build * fix: only include keybindings in output when they exist Updated generatePackageJson to conditionally add keybindings to avoid including undefined values in the generated package.json. Fixed eslint-disable comment placement. --------- Co-authored-by: Roo Code <[email protected]> * Add a list of sub-processors (RooCodeInc#8163) * Add cookie policy (RooCodeInc#8165) * ux: Redesigned Message Feed (RooCodeInc#7985) Co-authored-by: Roo Code <[email protected]> Co-authored-by: Matt Rubens <[email protected]> * Merge branch 'main' of github.com:zgsm-ai/costrict into roo-to-main * bug: Incorrect copy for "Run" command when approving execution (RooCodeInc#8179) * test: set default language to English in prompt tests * Supernova (RooCodeInc#8175) Co-authored-by: Chris Estreich <[email protected]> * chore: add changeset for v3.28.4 (RooCodeInc#8182) * Changeset version bump (RooCodeInc#8183) Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: Matt Rubens <[email protected]> * feat(chat): enhance user info display and file path highlighting * fix: support dash prefix in parseMarkdownChecklist for todo lists (RooCodeInc#8055) - Updated regex pattern to support optional dash prefix (e.g., "- [ ] Task") - Added comprehensive test coverage for both formats - Fixes issue where todo lists with dash prefixes were not being parsed correctly Fixes RooCodeInc#8054 Co-authored-by: Roo Code <[email protected]> * Updating the privacy policy to allow us to send occasional emails (RooCodeInc#8180) * Updating the privacy policy to allow us to send onboarding and occasional marketing emails. * docs: Clarified unsubscribe behavior and updated the Last Updated date * docs: update Last Updated date in Privacy Policy page * fix: apply tiered pricing for Gemini models via Vertex AI (RooCodeInc#8018) * fix: apply tiered pricing for Gemini models via Vertex AI - Modified calculateCost method to handle models where cacheReadsPrice is only defined in tiers - Added comprehensive tests for Vertex AI tiered pricing calculation - Fixes issue where local cost calculation always showed highest tier rates Fixes RooCodeInc#8017 * Delete src/api/providers/__tests__/vertex-tiered-pricing.spec.ts --------- Co-authored-by: Roo Code <[email protected]> Co-authored-by: Daniel <[email protected]> * update sambanova models (RooCodeInc#8186) * update sambanova models * fix typo * Fix duplicate rehydrate during reasoning; centralize rehydrate and preserve cancel metadata (RooCodeInc#8171) Co-authored-by: daniel-lxs <[email protected]> * Wrap code blocks by default (RooCodeInc#8194) * Merge remote-tracking branch 'upstream/main' into roo-to-main * Add an announcement for Supernova (RooCodeInc#8197) * Add an announcement for Supernova * Remove duplicate keys * refactor(chat): optimize ChatRow rendering and user info handling * Release v3.28.5 (RooCodeInc#8198) chore: add changeset for v3.28.5 * Changeset version bump (RooCodeInc#8199) Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * Remove language selection and word wrap toggle from CodeBlock (RooCodeInc#8208) * feat: Add keyboard shortcut for toggling auto-approve (Cmd/Ctrl+Alt+A) (RooCodeInc#8214) Co-authored-by: ellipsis-dev[bot] <65095814+ellipsis-dev[bot]@users.noreply.github.com> Co-authored-by: Roo Code <[email protected]> Co-authored-by: Matt Rubens <[email protected]> * Bare metal evals fixes (RooCodeInc#8224) Co-authored-by: Roo Code <[email protected]> * Fix: Improve reasoning block formatting for better readability (RooCodeInc#7868) * fix: prevent checkpoint text from wrapping in non-English languages (RooCodeInc#8207) Co-authored-by: Roo Code <[email protected]> * fix: respect Ollama Modelfile num_ctx configuration (RooCodeInc#7798) Co-authored-by: Roo Code <[email protected]> Co-authored-by: Hannes Rudolph <[email protected]> Co-authored-by: daniel-lxs <[email protected]> * feat: add package.nls.json checking to find-missing-translations script (RooCodeInc#8255) Co-authored-by: ellipsis-dev[bot] <65095814+ellipsis-dev[bot]@users.noreply.github.com> Co-authored-by: Roo Code <[email protected]> Co-authored-by: daniel-lxs <[email protected]> Co-authored-by: Matt Rubens <[email protected]> * feat(types): add GPT-5-Codex model (RooCodeInc#8260) * chore: add changeset for v3.28.6 (RooCodeInc#8261) * Follow-up questions should trigger the "interactive" state (

ux: improve responsiveness on small widths for auto-approve button

5b48385

- + Add Russian i18n string

VeryEvilHumna requested review from cte, jr and mrubens as code owners September 18, 2025 16:15

github-project-automation bot added this to Roo Code Roadmap and Roo Code Roadmap Sep 18, 2025

github-project-automation bot moved this to New in Roo Code Roadmap Sep 18, 2025

github-project-automation bot moved this to Triage in Roo Code Roadmap Sep 18, 2025

dosubot bot added size:S This PR changes 10-29 lines, ignoring generated files. UI/UX UI/UX related or focused labels Sep 18, 2025

VeryEvilHumna mentioned this pull request Sep 18, 2025

ux: Smaller and more subtle auto-approve UI #7894

Merged

roomote bot reviewed Sep 18, 2025

View reviewed changes

hannesrudolph added the Issue/PR - Triage New issue. Needs quick review to confirm validity and assign labels. label Sep 18, 2025

hannesrudolph moved this from Triage to PR [Needs Prelim Review] in Roo Code Roadmap Sep 23, 2025

hannesrudolph added PR - Needs Preliminary Review and removed Issue/PR - Triage New issue. Needs quick review to confirm validity and assign labels. labels Sep 23, 2025

i18n: add short off label for trigger in multiple languages

0ba2389

roomote bot approved these changes Oct 20, 2025

View reviewed changes

daniel-lxs mentioned this pull request Oct 23, 2025

feat: improve auto-approve button responsiveness #8798

Merged

1 task

daniel-lxs closed this Oct 23, 2025

github-project-automation bot moved this from PR [Needs Prelim Review] to Done in Roo Code Roadmap Oct 23, 2025

github-project-automation bot moved this from New to Done in Roo Code Roadmap Oct 23, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

ux: improve responsiveness on small widths for auto-approve button #8152

ux: improve responsiveness on small widths for auto-approve button #8152

Uh oh!

VeryEvilHumna commented Sep 18, 2025 •

edited by ellipsis-dev bot

Loading

Uh oh!

roomote bot left a comment

Uh oh!

roomote bot Sep 18, 2025

Uh oh!

VeryEvilHumna Sep 18, 2025

Uh oh!

roomote bot Sep 18, 2025

Uh oh!

roomote bot Sep 18, 2025

Uh oh!

hannesrudolph commented Sep 23, 2025

Uh oh!

brunobergher commented Sep 23, 2025

Uh oh!

roomote bot commented Oct 20, 2025 •

edited

Loading

Uh oh!

daniel-lxs commented Oct 23, 2025

Uh oh!

-					<CheckCheck className="min-[400px]:hidden size-3 flex-shrink-0" />
+					<span className="min-[400px]:hidden">
+						{!effectiveAutoApprovalEnabled ? (
+							<X className="size-3 flex-shrink-0" />
+						) : (
+							<CheckCheck className="size-3 flex-shrink-0" />
+						)}
+					</span>

ux: improve responsiveness on small widths for auto-approve button #8152

ux: improve responsiveness on small widths for auto-approve button #8152

Uh oh!

Conversation

VeryEvilHumna commented Sep 18, 2025 • edited by ellipsis-dev bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Related GitHub Issue

Description

Test Procedure

Pre-Submission Checklist

Screenshots / Videos

Documentation Updates

Get in Touch

Uh oh!

roomote bot left a comment

Choose a reason for hiding this comment

Uh oh!

roomote bot Sep 18, 2025

Choose a reason for hiding this comment

Uh oh!

VeryEvilHumna Sep 18, 2025

Choose a reason for hiding this comment

Uh oh!

roomote bot Sep 18, 2025

Choose a reason for hiding this comment

Uh oh!

roomote bot Sep 18, 2025

Choose a reason for hiding this comment

Uh oh!

hannesrudolph commented Sep 23, 2025

Uh oh!

brunobergher commented Sep 23, 2025

Uh oh!

roomote bot commented Oct 20, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Review Summary

Outstanding Items

Resolved Items

Uh oh!

daniel-lxs commented Oct 23, 2025

Uh oh!

VeryEvilHumna commented Sep 18, 2025 •

edited by ellipsis-dev bot

Loading

roomote bot commented Oct 20, 2025 •

edited

Loading