Fix .videowrapper and update button and search components for consistency in text labels (#491)

* Update button and search components for consistency in text labels

- Changed button class to prevent text overflow by adding 'whitespace-nowrap'.
- Updated placeholder and button text from 'Find something...' to 'Search...' for clarity and uniformity across the search components.
- Adjusted aria-labels to match the updated button text for improved accessibility.

* Fix videowrapper

src/components/Button.jsx

@@ -36,7 +36,7 @@ export function Button({
   let Component = props.href ? Link : 'button'
 
   className = clsx(
-    'inline-flex gap-0.5 justify-center overflow-hidden text-sm font-medium transition',
+    'inline-flex gap-0.5 justify-center overflow-hidden text-sm font-medium transition whitespace-nowrap',
     variantStyles[variant],
     className
   )

src/components/Search.jsx

@@ -19,7 +19,7 @@ function useAutocomplete() {
   let [autocomplete] = useState(() =>
     createAutocomplete({
       id,
-      placeholder: 'Find something...',
+      placeholder: 'Search...',
       defaultActiveItemId: 0,
       onStateChange({ state }) {
         setAutocompleteState(state)
@@ -307,7 +307,7 @@ function SearchButton(props) {
         {...props}
       >
         <SearchIcon className="h-5 w-5 stroke-current" />
-        Find something...
+        Search...
         <kbd className="ml-auto text-2xs text-zinc-400 dark:text-zinc-500">
           <kbd className="font-sans">{modifierKey}</kbd>
           <kbd className="font-sans">K</kbd>
@@ -316,7 +316,7 @@ function SearchButton(props) {
       <button
         type="button"
         className="flex h-6 w-6 items-center justify-center rounded-md transition hover:bg-zinc-900/5 dark:hover:bg-white/5 lg:hidden focus:[&:not(:focus-visible)]:outline-none"
-        aria-label="Find something..."
+        aria-label="Search..."
         {...props}
       >
         <SearchIcon className="h-5 w-5 stroke-zinc-900 dark:stroke-white" />
@@ -485,7 +485,7 @@ export function Search() {
         {...buttonProps}
       >
         <SearchIcon className="h-5 w-5 stroke-current" />
-        Find something...
+        Search...
         <kbd className="ml-auto text-2xs text-zinc-400 dark:text-zinc-500">
           <kbd className="font-sans">{modifierKey}</kbd>
           <kbd className="font-sans">K</kbd>
@@ -504,7 +504,7 @@ export function MobileSearch() {
       <button
         type="button"
         className="flex h-6 w-6 items-center justify-center rounded-md transition hover:bg-zinc-900/5 dark:hover:bg-white/5 lg:hidden focus:[&:not(:focus-visible)]:outline-none"
-        aria-label="Find something..."
+        aria-label="Search..."
         {...buttonProps}
       >
         <SearchIcon className="h-5 w-5 stroke-zinc-900 dark:stroke-white" />

src/styles/tailwind.css

@@ -53,14 +53,26 @@
 }
 
 .videowrapper {
-  float: none;
-  clear: both;
-  width: 100%;
   position: relative;
-  padding-bottom: 46.25%;
-  padding-top: 25px;
-  height: 0;
+  width: 100%;
+  aspect-ratio: 16 / 9;
+  overflow: hidden;
+  margin-left: 10px;
+  margin-right: auto;
 }
+
+@media (max-width: 1024px) {
+  .videowrapper {
+    max-width: 40rem; /* matches prose max-width-2xl */
+  }
+}
+
+@media (min-width: 1024px) {
+  .videowrapper {
+    max-width: 50rem; /* matches prose max-width-3xl */
+  }
+}
+
 .videowrapper iframe {
   position: absolute;
   top: 0;
@@ -68,17 +80,30 @@
   width: 100%;
   height: 100%;
   border-radius: 4px;
+  border: 0;
 }
 
 .videowrapperadjusted {
-  float: none;
-  clear: both;
-  width: 100%;
   position: relative;
-  padding-bottom: 30%;
-  padding-top: 25px;
-  height: 0;
+  width: 100%;
+  aspect-ratio: 16 / 9;
+  overflow: hidden;
+  margin-left: 10px;
+  margin-right: auto;
 }
+
+@media (max-width: 1024px) {
+  .videowrapperadjusted {
+    max-width: 40rem; /* matches prose max-width-2xl */
+  }
+}
+
+@media (min-width: 1024px) {
+  .videowrapperadjusted {
+    max-width: 50rem; /* matches prose max-width-3xl */
+  }
+}
+
 .videowrapperadjusted iframe {
   position: absolute;
   top: 0;
@@ -86,6 +111,7 @@
   width: 100%;
   height: 100%;
   border-radius: 4px;
+  border: 0;
 }
 
 .Toastify__close-button {