From fdfcd4a5eadef5ce3b8066e2afa16582a433f764 Mon Sep 17 00:00:00 2001 From: George Kalpakas Date: Fri, 19 Mar 2021 13:21:45 +0200 Subject: [PATCH] fix(docs-infra): correctly show search results on narrow screens (#41275) Previously, some part of the search results would be hidden and inaccessible on narrow screens. This was caused by an issue with the flexbox layout. See [here][1] for more info on the issue and the available solutions. NOTE: This issue affected both the search results shown when using the search box (on the top right of the page) as well as the search results shown in the `file-not-found` page. This commit changes how the layout of search results is achieved to ensure they are always accessible via scrolling on all screen sizes (while keeping the same layout on larger screens). Before: ![search results at 768px before][2] After: ![search results at 768px after][3] [1]: https://stackoverflow.com/questions/33454533/cant-scroll-to-top-of-flex-item-that-is-overflowing-container#33455342 [2]: https://user-images.githubusercontent.com/8604205/111772790-efe2ac00-88b5-11eb-925d-a80faeaa5369.png [3]: https://user-images.githubusercontent.com/8604205/111772810-f5d88d00-88b5-11eb-8b2a-60bdc3736ea3.png PR Close #41275 --- aio/src/styles/2-modules/_search-results.scss | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/aio/src/styles/2-modules/_search-results.scss b/aio/src/styles/2-modules/_search-results.scss index d5642a7a927..67ecd17c03a 100644 --- a/aio/src/styles/2-modules/_search-results.scss +++ b/aio/src/styles/2-modules/_search-results.scss @@ -4,7 +4,6 @@ aio-search-results { .search-results { display: flex; flex-direction: row; - justify-content: space-around; overflow: auto; padding: 0px 32px; border-top: 68px solid transparent; @@ -20,8 +19,8 @@ aio-search-results { box-sizing: border-box; .search-area { - margin: 16px; - height: 100%; + margin: 0 auto; + padding: 16px; .search-section-header { @include font-size(16);