Merge pull request #776 from Stremio/fix/player-subtitles-tracks-layout

Player: fix subtitles tracks layout

Author: tymmesyde

src/routes/Player/SubtitlesMenu/SubtitlesMenu.js

@@ -178,11 +178,15 @@ const SubtitlesMenu = React.memo((props) => {
                         <div className={styles['variants-list']}>
                             {subtitlesTracksForLanguage.map((track, index) => (
                                 <Button key={index} title={track.label} className={classnames(styles['variant-option'], { 'selected': props.selectedSubtitlesTrackId === track.id || props.selectedExtraSubtitlesTrackId === track.id })} data-id={track.id} data-origin={track.origin} data-embedded={track.embedded} onClick={subtitlesTrackOnClick}>
-                                    <div className={styles['variant-label']}>
-                                        {
-                                            languages.label(!track.label.startsWith('http') ? track.label : track.lang)
-                                        }
-                                        <div className={styles['variant-origin']}>{t(track.origin)}</div>
+                                    <div className={styles['info']}>
+                                        <div className={styles['variant-label']}>
+                                            {
+                                                languages.label(!track.label.startsWith('http') ? track.label : track.lang)
+                                            }
+                                        </div>
+                                        <div className={styles['variant-origin']}>
+                                            { t(track.origin) }
+                                        </div>
                                     </div>
                                     {
                                         props.selectedSubtitlesTrackId === track.id || props.selectedExtraSubtitlesTrackId === track.id ?

src/routes/Player/SubtitlesMenu/styles.less

@@ -42,7 +42,6 @@
 
                 .language-label, .variant-label {
                     flex: 1;
-                    max-height: 2.4em;
                     font-size: 1.1rem;
                     color: var(--primary-foreground-color);
                 }
@@ -52,10 +51,6 @@
                     text-overflow: ellipsis;
                 }
 
-                .variant-label .variant-origin {
-                    color: var(--color-placeholder-text);
-                }
-
                 .icon {
                     flex: none;
                     width: 0.5rem;
@@ -65,6 +60,26 @@
                     background-color: var(--secondary-accent-color);
                 }
             }
+
+            .variant-option {
+                height: 4rem;
+
+                .info {
+                    flex: 1;
+                    display: flex;
+                    flex-direction: column;
+                    gap: 0.25rem;
+
+                    .variant-label {
+                        line-height: 1.5rem;
+                    }
+
+                    .variant-origin {
+                        font-size: 0.9rem;
+                        color: var(--color-placeholder-text);
+                    }
+                }
+            }
         }
     }