honeymoose
/
angular-cn
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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
This commit is contained in:
George Kalpakas 2021-03-19 13:21:45 +02:00 committed by Alex Rickabaugh
parent db55f8e671
commit 3cda3e6a32
1 changed files with 2 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
aio/src/styles/2-modules/_search-results.scss
View File

@ -4,7 +4,6 @@ aio-search-results {
.search-results { .search-results {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: space-around;
overflow: auto; overflow: auto;
padding: 0px 32px; padding: 0px 32px;
border-top: 68px solid transparent; border-top: 68px solid transparent;
@ -20,8 +19,8 @@ aio-search-results {
box-sizing: border-box; box-sizing: border-box;
.search-area { .search-area {
margin: 16px; margin: 0 auto;
height: 100%; padding: 16px;
.search-section-header { .search-section-header {
@include font-size(16); @include font-size(16);