Fix .videowrapper and update button and search components for consistency in text labels

[TechHutTV]

Fix: YouTube video aspect ratio and alignment issues

Problem

When zooming out, embedded YouTube videos would:

• Stretch vertically, distorting thumbnails
• Take up the full page width instead of staying aligned with text content
• Not maintain proper 16:9 aspect ratio at different zoom levels

Before

After

Solution

Updated .videowrapper and .videowrapperadjusted classes to use modern CSS:

Changes made:

• Replaced padding-bottom hack with aspect-ratio: 16 / 9 for reliable 16:9 ratio
• Added responsive max-width constraints matching prose content area:
  • 40rem on screens < 1024px
  • 50rem on screens ≥ 1024px
• Set margin-left: 10px and margin-right: auto to align videos with text content

File: src/styles/tailwind.css

Benefits

• ✅ Videos maintain correct 16:9 aspect ratio at all zoom levels
• ✅ Videos stay aligned with text content instead of spanning full width
• ✅ No vertical stretching or distortion
• ✅ Consistent layout across different screen sizes
• ✅ Uses modern CSS instead of legacy padding-bottom hack

Fix: Prevent UI elements from wrapping when zoomed in

Problem

When users zoom in on the documentation site, text in UI components like the search bar and buttons would wrap to multiple lines, causing layout issues and making the interface look awkward.

Before

After

Changes Made

1. Shortened Search Placeholder Text

• Changed placeholder text from "Find something..." to "Search..." in the Search component
• Updated in 5 locations:
  • Autocomplete placeholder configuration
  • Desktop search button text
  • Mobile search button aria-label
  • SearchButton component
  • MobileSearch component

File: src/components/Search.jsx

2. Prevented Button Text Wrapping

• Added whitespace-nowrap CSS class to the Button component
• Ensures all buttons (including "Try NetBird") maintain single-line text regardless of zoom level
• Button width will now automatically expand to accommodate text instead of wrapping

File: src/components/Button.jsx

Benefits

• ✅ Improved accessibility at higher zoom levels
• ✅ Cleaner, more professional UI appearance
• ✅ Consistent single-line text display across all buttons
• ✅ Better user experience for users who need larger text sizes

Testing

Verify that:

• Search bar displays "Search..." placeholder text
• "Try NetBird" button text stays on one line when zoomed in
• All other buttons throughout the site maintain single-line text at various zoom levels