diff --git a/src/routes/MetaDetails/VideosList/VideosList.js b/src/routes/MetaDetails/VideosList/VideosList.js index 979913140..2c08a586c 100644 --- a/src/routes/MetaDetails/VideosList/VideosList.js +++ b/src/routes/MetaDetails/VideosList/VideosList.js @@ -57,18 +57,16 @@ const VideosList = ({ className, metaResource }) => { : null } -
- -
+
{videosForSeason .filter((video) => { diff --git a/src/routes/MetaDetails/VideosList/styles.less b/src/routes/MetaDetails/VideosList/styles.less index a1fc104a3..f9aaf8b90 100644 --- a/src/routes/MetaDetails/VideosList/styles.less +++ b/src/routes/MetaDetails/VideosList/styles.less @@ -38,54 +38,51 @@ } } - .search-container { + + .search-bar-container { flex: none; - min-width: var(--item-size); - padding: 0 1.5rem 1rem 1.5rem; + align-self: stretch; + display: flex; + flex-direction: row; + align-items: center; + height: 3.5rem; + padding: 0 1rem; + margin: 0 1.5rem 1rem 1.5rem; + border-radius: 2.3rem; + border: var(--focus-outline-size) solid transparent; + background-color: @color-background; + cursor: text; &:first-child { - padding-top: 1rem; + margin-top: 1rem; } - .search-bar-container { - display: flex; - flex-direction: row; - align-items: center; - height: 3.5rem; - padding: 0 1rem; - border-radius: 2.3rem; - border: var(--focus-outline-size) solid transparent; - background-color: @color-background; - cursor: text; + &:hover, &:focus-within { + background-color: @color-background-light1; + } - &:hover, &:focus-within { - background-color: @color-background-light1; - } - - &:focus-within { - border: var(--focus-outline-size) solid @color-surface-light5; - } - - .search-input { - flex: 1; - margin-right: 1rem; - font-size: 1.1rem; - color: @color-surface-light5; - - &::placeholder { - max-height: 1.2em; - opacity: 1; - color: @color-secondaryvariant1-light1-90; - } - } - - .icon { - flex: none; - width: 1.5rem; - height: 1.5rem; - fill: @color-secondaryvariant1; + &:focus-within { + border: var(--focus-outline-size) solid @color-surface-light5; + } + + .search-input { + flex: 1; + margin-right: 1rem; + font-size: 1.1rem; + color: @color-surface-light5; + + &::placeholder { + max-height: 1.2em; + opacity: 1; + color: @color-secondaryvariant1-light1-90; } + } + .icon { + flex: none; + width: 1.5rem; + height: 1.5rem; + fill: @color-secondaryvariant1; } }