Elgato_dark/angular
1
0
Fork 0
mirror of https://github.com/angular/angular synced 2026-05-24 09:28:37 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix(docs-infra): correctly show search results on narrow screens (#41275)

Browse source 
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 4b17213b0b
commit fdfcd4a5ea
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 {
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);