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

[VeryEvilHumna]

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.}

[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]

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>

[VeryEvilHumna]

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]

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]

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]

@brunobergher i like this. Thoughts?

[brunobergher]

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]

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.

[daniel-lxs]

Superseded by #8798