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 fa3487328b..bbf997c1f0 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 { - {accounts} - {statuses} - {hashtags} +
+ {accounts} + {statuses} + {hashtags} +
); }; diff --git a/app/javascript/flavours/glitch/styles/components/drawer.scss b/app/javascript/flavours/glitch/styles/components/drawer.scss index d5463e4068..fa410234a8 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; + & > .search-results__contents { + overflow-x: hidden; + overflow-y: scroll; + flex: 1 1 auto; - 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; + & > section { + margin-bottom: 5px; - .fa { - display: inline-block; - margin-right: 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; + & > .hashtag { + display: block; + padding: 10px; + color: $secondary-text-color; + text-decoration: none; - &:hover, - &:active, - &:focus { - color: lighten($secondary-text-color, 4%); - text-decoration: underline; + &:hover, + &:active, + &:focus { + color: lighten($secondary-text-color, 4%); + text-decoration: underline; + } } } }