diff --git a/public/app/core/components/navbar/navbar.html b/public/app/core/components/navbar/navbar.html index c2cd5e2b624..ea8eb21d6d6 100644 --- a/public/app/core/components/navbar/navbar.html +++ b/public/app/core/components/navbar/navbar.html @@ -8,7 +8,7 @@ - + diff --git a/public/sass/components/_navbar.scss b/public/sass/components/_navbar.scss index 89918d18e59..fd336ad94bf 100644 --- a/public/sass/components/_navbar.scss +++ b/public/sass/components/_navbar.scss @@ -137,6 +137,10 @@ max-width: 27px; max-height: 27px; } + + &--search { + padding: 1rem 1.5rem 0.75rem 1.5rem; + } } .navbar-page-btn-wrapper { diff --git a/public/sass/components/_search.scss b/public/sass/components/_search.scss index 2190e55f318..3c9f44afb2f 100644 --- a/public/sass/components/_search.scss +++ b/public/sass/components/_search.scss @@ -13,8 +13,9 @@ left: 0; top: 0; right: 0; + bottom: 0; z-index: ($zindex-modal-backdrop + 10); - position: absolute; + position: fixed; .label-tag { margin-left: 6px; @@ -46,6 +47,7 @@ .search-field-spacer { flex-grow: 1; } + .search-switches { flex-grow: 1; padding: 1rem 1rem 0.75rem 1rem; @@ -54,7 +56,7 @@ .search-field-icon { font-size: $font-size-lg; - padding: 1rem 1rem 0.75rem 1rem; + padding: 1rem 1rem 0.75rem 1.5rem; } .search-dropdown { @@ -63,6 +65,7 @@ max-width: 1100px; visibility: none; opacity: 0; + height: 100%; &--fade-in { visibility: visible; @@ -72,7 +75,7 @@ } .search-results-container { - height: 450px; + height: 90%; overflow: auto; display: block; line-height: 28px; @@ -143,8 +146,10 @@ .search-button-row { padding: $spacer*2; display: flex; - flex-direction: column; + flex-direction: row; align-items: flex-start; + justify-content: space-around; + height: 30%; button, a { margin-bottom: $spacer; @@ -164,10 +169,17 @@ } } -@include media-breakpoint-up(md) { +@include media-breakpoint-up(lg) { .search-dropdown { flex-direction: row; } + .search-button-row { + flex-direction: column; + justify-content: flex-start; + } +} + +@include media-breakpoint-up(md) { .search-container { left: 78px; }