feat: improve auto-approve button responsiveness

[daniel-lxs]

Related GitHub Issue

Follow-up for #7894 and replacement for #8152

Description

This PR improves the auto-approve button's responsive behavior with the following enhancements:

Changes Made

1. Correct Icon State at All Screen Sizes

   • Icon now properly reflects the auto-approval state on all screen sizes
   • Shows ✗ (X) when auto-approval is OFF
   • Shows ✓ (CheckCheck) when auto-approval is ON
   • Fixes the issue where a checkmark was always displayed on narrow screens regardless of state

2. Optimized Responsive Breakpoint

   • Changed breakpoint from 400px to 300px for more appropriate compact view activation
   • Compact view now only activates on very narrow screens (< 300px)
   • Maintains full text labels on screens ≥ 300px wide

3. Fixed Tailwind Class Ordering

   • Corrected responsive utility class order: hidden min-[300px]:inline instead of min-[300px]:inline hidden
   • Ensures proper responsive behavior across all screen sizes

4. Added Translations for Compact Display

   • Added triggerLabelOffShort translation key to all 18 locale files
   • Provides abbreviated labels suitable for very narrow screens

Screenshots / Videos

Before

After

Documentation Updates

• No documentation updates are required.

---

Important

Improves auto-approve button responsiveness by fixing icon state, optimizing breakpoints, correcting Tailwind class order, and adding translations for compact display.

• Behavior:
  • Corrects icon state for auto-approve button across all screen sizes in AutoApproveDropdown.tsx. Shows ✗ when off and ✓ when on.
  • Fixes issue where checkmark was always displayed on narrow screens.
• Responsive Design:
  • Changes breakpoint from 400px to 300px in AutoApproveDropdown.tsx for compact view activation.
  • Ensures full text labels on screens ≥ 300px.
• Tailwind Classes:
  • Corrects class order in AutoApproveDropdown.tsx to hidden min-[300px]:inline.
• Localization:
  • Adds triggerLabelOffShort translation key to 18 locale files for compact display.
• Testing:
  • Verify icon changes correctly at all screen sizes and toggle functionality.

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

[ghost]

PR Review Complete

✅ No issues found - This PR is ready for merge.

What Was Reviewed

• Icon state correctness across all screen sizes
• Responsive breakpoint implementation (300px)
• Tailwind CSS class ordering
• Translation coverage for all 18 locales
• Conditional rendering logic

Summary

The implementation correctly improves the auto-approve button's responsive behavior. The icon properly reflects the auto-approval state, the breakpoint activates at an appropriate width, and all translations are in place.

---

Follow Along on Roo Code Cloud