diff --git a/app/soapbox/features/search/index.js b/app/soapbox/features/search/index.js index 22a898d78..9e6da120d 100644 --- a/app/soapbox/features/search/index.js +++ b/app/soapbox/features/search/index.js @@ -11,9 +11,8 @@ const messages = defineMessages({ const Search = ({ intl }) => (
- - +
diff --git a/app/styles/components/columns.scss b/app/styles/components/columns.scss index 4ba678ca2..bc9c87eea 100644 --- a/app/styles/components/columns.scss +++ b/app/styles/components/columns.scss @@ -342,6 +342,10 @@ .columns-area--mobile .column { @include standard-panel; + + @media screen and (max-width: 450px) { + border-radius: 0; + } } .columns-area--transparent .column { @@ -876,4 +880,8 @@ justify-content: center; padding: 15px; border-radius: 0 0 10px 10px; + + @media screen and (max-width: 450px) { + border-radius: 0; + } } diff --git a/app/styles/components/search.scss b/app/styles/components/search.scss index f774b435f..d452e122c 100644 --- a/app/styles/components/search.scss +++ b/app/styles/components/search.scss @@ -1,21 +1,3 @@ -.search-page { - .drawer__inner:not(:empty) { - min-height: 48px; - } -} - -@media screen and (min-width: 600px + (285px * 1) + (10px * 1)) { - .search-page .search { - display: none; - } -} - -@media screen and (max-width: 600px + (285px * 1) + (10px * 1) - 1px) { - .search-page .column-header__wrapper { - display: none; - } -} - .search { position: relative; } @@ -41,8 +23,9 @@ cursor: default; display: inline-block; position: absolute; - top: 8px; + top: 50%; right: 8px; + transform: translateY(-50%); z-index: 2; width: 18px; height: 18px; @@ -65,7 +48,6 @@ color: var(--highlight-text-color); width: 22px; height: 22px; - top: 5px; &:hover { color: var(--brand-color); @@ -182,3 +164,36 @@ .search__filter-bar:last-child { border-bottom: none; } + +.search-page { + .drawer__inner:not(:empty) { + min-height: 48px; + } + + .search { + padding: 10px 15px; + border-bottom: 1px solid hsla(var(--primary-text-color_hsl), 0.2); + } + + .search__input { + background-color: var(--background-color); + border-radius: 8px; + padding: 12px 36px 12px 16px; + } + + .search__icon .svg-icon { + right: 24px; + } + + .drawer__pager { + border-radius: 0 0 10px 10px; + + @media screen and (max-width: 450px) { + border-radius: 0; + } + } +} + +.search-results { + padding: 15px; +}