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;
+}