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