fix(aio): make the search-pane larger (and improve the search-box) (#17105)

* fix(aio): make the search-pane larger

Fixes #17094

* feat(aio): give the search-box a type of "search"

This enables browsers to style it better (e.g. add an `x` button for clearing
the field, which allows users to quickly reset the search query and hide
results).

aio/src/app/search/search-box/search-box.component.spec.ts

@@ -44,6 +44,14 @@ describe('SearchBoxComponent', () => {
     }));
   });
 
+  describe('on input', () => {
+    it('should trigger the search event', () => {
+      const input = fixture.debugElement.query(By.css('input'));
+      input.triggerEventHandler('input', { target: { value: 'some query' } });
+      expect(host.doSearch).toHaveBeenCalledWith('some query');
+    });
+  });
+
   describe('on keyup', () => {
     it('should trigger the search event', () => {
       const input = fixture.debugElement.query(By.css('input'));

aio/src/app/search/search-box/search-box.component.ts

@@ -14,8 +14,10 @@ import { LocationService } from 'app/shared/location.service';
 @Component({
   selector: 'aio-search-box',
   template: `<input #searchBox
+    type="search"
     aria-label="search"
     placeholder="Search"
+    (input)="onSearch($event.target.value)"
     (keyup)="onSearch($event.target.value)"
     (focus)="onSearch($event.target.value)"
     (click)="onSearch($event.target.value)">`

aio/src/styles/2-modules/_search-results.scss

@@ -10,7 +10,7 @@ aio-search-results {
     padding: 68px 32px 0;
     color: $offwhite;
     width: auto;
-    max-height: 50%;
+    max-height: 95vh;
     position: fixed;
     top: 0;
     left: 0;
@@ -18,11 +18,10 @@ aio-search-results {
     z-index: 5;
     background-color: $darkgray;
     box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.3);
+    box-sizing: border-box;
 
     @media (max-width: 480px) {
         display: block;
-        max-height: 70%;
-        box-sizing: border-box;
         .search-area {
             display: block;
             margin: 16px 16px;