fix(player): fix dropdown showing above video player

src/components/Dropdown/Dropdown.module.scss

@@ -29,6 +29,7 @@ $disabled-gradient: linear-gradient(to top, #ddd, $disabled-bg-color 33%);
 
     .select {
       height: 46px;
+      padding: 14px 16px;
     }
   }
 }
@@ -52,7 +53,6 @@ $disabled-gradient: linear-gradient(to top, #ddd, $disabled-bg-color 33%);
   align-items: center;
   width: 140px;
   height: 36px;
-  margin-left: 24px;
   font-size: 1.25rem;
   background-color: rgba(0, 0, 0, 0.54);
   border: 1px solid rgba(255, 255, 255, 0.3);
@@ -83,9 +83,10 @@ $disabled-gradient: linear-gradient(to top, #ddd, $disabled-bg-color 33%);
     width: 100%;
     height: 36px;
     margin: 0;
-    padding: 14px 16px;
+    padding: 2px 8px;
     color: variables.$white;
     font-family: inherit;
+    font-weight: theme.$body-font-weight-bold;
     font-size: 1rem;
     line-height: 1em;
     text-overflow: ellipsis;

src/components/Dropdown/Dropdown.tsx

@@ -9,6 +9,7 @@ import styles from './Dropdown.module.scss';
 type Props = {
   name: string;
   value: string;
+  className?: string;
   defaultLabel?: string;
   options?: string[];
   optionsStyle?: string;
@@ -25,6 +26,7 @@ type Props = {
 const Dropdown: React.FC<Props & React.AriaAttributes> = ({
   name,
   value,
+  className,
   defaultLabel,
   options,
   onChange,
@@ -42,7 +44,7 @@ const Dropdown: React.FC<Props & React.AriaAttributes> = ({
   const id = useOpaqueId();
 
   return (
-    <div className={classNames(styles.container, { [styles.fullWidth]: fullWidth, [styles.error]: error }, styles[size])}>
+    <div className={classNames(styles.container, { [styles.fullWidth]: fullWidth, [styles.error]: error }, styles[size], className)}>
       {label && (
         <label htmlFor={id} className={styles.label}>
           {label}

src/components/Filter/Filter.module.scss

@@ -11,3 +11,12 @@
     margin: 0 4px;
   }
 }
+
+.dropDown {
+  margin-bottom: 0;
+}
+
+.filterDropDown {
+  display: flex;
+  align-items: flex-end;
+}

src/components/Filter/Filter.tsx

@@ -37,15 +37,19 @@ const Filter: FC<Props> = ({ name, value, defaultLabel, options, setValue, value
           <Button label={defaultLabel} onClick={() => setValue('')} active={value === ''} key={defaultLabel} role="option" />
         </div>
       ) : (
-        <Dropdown
-          options={options}
-          defaultLabel={defaultLabel}
-          valuePrefix={valuePrefix}
-          name={name}
-          value={value}
-          onChange={handleChange}
-          aria-label={t('filter_videos_by_genre')}
-        />
+        <div className={styles.filterDropDown}>
+          <Dropdown
+            className={styles.dropDown}
+            size="small"
+            options={options}
+            defaultLabel={defaultLabel}
+            valuePrefix={valuePrefix}
+            name={name}
+            value={value}
+            onChange={handleChange}
+            aria-label={t('filter_videos_by_genre')}
+          />
+        </div>
       )}
     </Fragment>
   );

src/components/Video/Video.module.scss

@@ -217,6 +217,7 @@
   position: fixed;
   top: 0;
   left: 0;
+  z-index: variables.$player-z-index;
   width: 100vw;
   height: calc(100vh - calc(100vh - 100%));
   overflow: hidden;

src/styles/_variables.scss

@@ -87,3 +87,4 @@ $header-z-index: 15 !default;
 $toolbar-z-index: 12 !default;
 $sidebar-z-index: 20 !default;
 $popups-z-index: 25 !default;
+$player-z-index: 30 !default;