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/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 {