diff options
| -rw-r--r-- | app/javascript/flavours/glitch/features/compose/components/search_results.js | 8 | ||||
| -rw-r--r-- | app/javascript/flavours/glitch/styles/components/drawer.scss | 77 |
2 files changed, 48 insertions, 37 deletions
diff --git a/app/javascript/flavours/glitch/features/compose/components/search_results.js b/app/javascript/flavours/glitch/features/compose/components/search_results.js index fa3487328..bbf997c1f 100644 --- a/app/javascript/flavours/glitch/features/compose/components/search_results.js +++ b/app/javascript/flavours/glitch/features/compose/components/search_results.js @@ -125,9 +125,11 @@ class SearchResults extends ImmutablePureComponent { <FormattedMessage id='search_results.total' defaultMessage='{count, number} {count, plural, one {result} other {results}}' values={{ count }} /> </header> - {accounts} - {statuses} - {hashtags} + <div className='search-results__contents'> + {accounts} + {statuses} + {hashtags} + </div> </div> ); }; diff --git a/app/javascript/flavours/glitch/styles/components/drawer.scss b/app/javascript/flavours/glitch/styles/components/drawer.scss index d5463e406..fa410234a 100644 --- a/app/javascript/flavours/glitch/styles/components/drawer.scss +++ b/app/javascript/flavours/glitch/styles/components/drawer.scss @@ -115,8 +115,10 @@ .drawer--results { background: $ui-base-color; - overflow-x: hidden; - overflow-y: auto; + overflow: hidden; + display: flex; + flex-direction: column; + flex: 1 1 auto; & > header { color: $dark-text-color; @@ -125,6 +127,7 @@ font-weight: 500; font-size: 16px; cursor: default; + flex: 0 0 auto; .fa { display: inline-block; @@ -132,41 +135,47 @@ } } - & > section { - margin-bottom: 5px; - - h5 { - background: darken($ui-base-color, 4%); - border-bottom: 1px solid lighten($ui-base-color, 8%); - cursor: default; - display: flex; - padding: 15px; - font-weight: 500; - font-size: 16px; - color: $dark-text-color; - - .fa { - display: inline-block; - margin-right: 5px; + & > .search-results__contents { + overflow-x: hidden; + overflow-y: scroll; + flex: 1 1 auto; + + & > section { + margin-bottom: 5px; + + h5 { + background: darken($ui-base-color, 4%); + border-bottom: 1px solid lighten($ui-base-color, 8%); + cursor: default; + display: flex; + padding: 15px; + font-weight: 500; + font-size: 16px; + color: $dark-text-color; + + .fa { + display: inline-block; + margin-right: 5px; + } } - } - .account:last-child, - & > div:last-child .status { - border-bottom: 0; - } + .account:last-child, + & > div:last-child .status { + border-bottom: 0; + } - & > .hashtag { - display: block; - padding: 10px; - color: $secondary-text-color; - text-decoration: none; - - &:hover, - &:active, - &:focus { - color: lighten($secondary-text-color, 4%); - text-decoration: underline; + & > .hashtag { + display: block; + padding: 10px; + color: $secondary-text-color; + text-decoration: none; + + &:hover, + &:active, + &:focus { + color: lighten($secondary-text-color, 4%); + text-decoration: underline; + } } } } |