fix(videodetail): wrap trailer button and fix buttons responsive

.prettierrc

@@ -1,5 +1,5 @@
 {
   "singleQuote": true,
   "trailingComma": "all",
-  "printWidth": 140
+  "printWidth": 150
 }

src/components/Button/Button.tsx

@@ -20,6 +20,7 @@ type Props = {
   size?: 'medium' | 'large';
   to?: string;
   role?: string;
+  className?: string;
 } & React.AriaAttributes;
 
 const Button: React.FC<Props> = ({
@@ -32,9 +33,10 @@ const Button: React.FC<Props> = ({
   size = 'medium',
   to,
   onClick,
+  className,
   ...rest
 }: Props) => {
-  const className = classNames(styles.button, [styles[color]], [styles[variant]], {
+  const combinedClassNames = classNames(styles.button, className, [styles[color]], [styles[variant]], {
     [styles.active]: active,
     [styles.fullWidth]: fullWidth,
     [styles.large]: size === 'large',
@@ -44,12 +46,12 @@ const Button: React.FC<Props> = ({
   const span = <span className={styles.buttonLabel}>{label}</span>;
 
   return to ? (
-    <NavLink className={className} to={to} activeClassName={styles.active} {...rest} exact>
+    <NavLink className={combinedClassNames} to={to} activeClassName={styles.active} {...rest} exact>
       {icon}
       {span}
     </NavLink>
   ) : (
-    <button className={className} onClick={onClick} {...rest}>
+    <button className={combinedClassNames} onClick={onClick} {...rest}>
       {icon}
       {span}
     </button>

src/components/Video/Video.module.scss

@@ -122,18 +122,28 @@
     margin-right: 0;
   }
 
+  @include responsive.mobile-and-tablet() {
+    > button {
+      padding: 0 12px;
+    }
+  }
+
   @include responsive.mobile-only() {
     flex-wrap: wrap;
+
     > button:first-child {
-      margin-right: 0;
       margin-bottom: 8px;
     }
-    > button:not(:first-child) {
+
+    > button:not(.trailerButton) {
       flex: 1;
     }
+
+    .trailerButton {
+      margin-right: 0;
+    }
   }
 }
-
 .poster {
   position: absolute;
   top: 0;

src/components/Video/Video.tsx

@@ -130,6 +130,7 @@ const Video: React.FC<Props> = ({
           <div className={styles.otherButtons}>
             {trailerItem && (
               <Button
+                className={styles.trailerButton}
                 label={t('video:trailer')}
                 aria-label={t('video:watch_trailer')}
                 startIcon={<PlayTrailer />}
@@ -201,9 +202,7 @@ const Video: React.FC<Props> = ({
             isTrailer
           />
           <div className={classNames(styles.playerOverlay, { [styles.hidden]: isPlaying && !userActive })} />
-          <div
-            className={classNames(styles.trailerMeta, styles.title, { [styles.hidden]: isPlaying && !userActive })}
-          >{`${title} - Trailer`}</div>
+          <div className={classNames(styles.trailerMeta, styles.title, { [styles.hidden]: isPlaying && !userActive })}>{`${title} - Trailer`}</div>
         </Modal>
       )}
     </div>