Fix search box visibility and size on mobile Safari

[roomote]

Summary

This PR fixes the search box visibility and size issues on mobile Safari that were reported via Slack.

Problem

• The search box was barely visible on mobile Safari due to low opacity backgrounds and backdrop-filter issues
• The search box was too small, making it difficult to tap on mobile devices

Solution

The fix addresses both issues through multiple improvements:

Visibility Improvements

• Increased background opacity from 0.5 to 0.9-0.95 for better visibility
• Removed backdrop-filter which causes rendering issues on Safari
• Made borders more visible (increased opacity from 0.5 to 0.8, thickness to 2px)
• Added Safari-specific fixes using @supports detection
• Added box shadows for better depth perception

Size Improvements

• Increased button height to 44px (iOS recommended minimum tap target)
• Set minimum width to 120px for better visibility
• Added horizontal padding of 16px
• Increased font size to 16px to prevent iOS zoom
• Made search icon larger (24x24px)
• Shows "Search" text on mobile for better discoverability
• Made search bar full width on mobile for better accessibility

Testing

• Build completed successfully with no errors
• CSS changes only affect visual presentation
• No security vulnerabilities introduced

Browser Compatibility

• Uses progressive enhancement with Safari-specific CSS
• Falls back gracefully on other browsers
• Maintains existing functionality while improving mobile Safari experience

Fixes the issue reported: "The search box is barely visible in mobile safari. It's also tiny"

---

Important

Improves search box visibility and usability on mobile Safari by adjusting CSS properties for better compatibility and user experience.

• Visibility Improvements:
  • Increased background opacity to 0.9 in .navbar__search-input and .DocSearch-Button.
  • Removed backdrop-filter for Safari compatibility in .navbar__search-input and .DocSearch-Button.
  • Added Safari-specific CSS using @supports to enhance visibility.
• Size Improvements:
  • Increased .DocSearch-Button height to 44px and added 16px horizontal padding for better tap target.
  • Set .DocSearch-Button minimum width to 120px and font size to 16px.
  • Made .DocSearch-Button full width on mobile.
  • Enlarged .DocSearch-Search-Icon to 24x24px.
  • Displayed "Search" text on mobile for better discoverability.
• Mobile Safari Specific:
  • Applied fully opaque background and more prominent shadows in .DocSearch-Button and .navbar__search-input.
  • Adjusted border visibility and box shadows for better depth perception.

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

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
roo-code-docs	Ready	Preview	Comment	Sep 27, 2025 2:30pm