From dbbf12c4914e28f2aa052fc77df4a3b4969e0580 Mon Sep 17 00:00:00 2001
From: Tim <tymmesyde@gmail.com>
Date: Fri, 27 Dec 2024 11:56:36 +0100
Subject: [PATCH] fix(Player): subtitles tracks layout

---
 .../Player/SubtitlesMenu/SubtitlesMenu.js     | 14 +++++++----
 src/routes/Player/SubtitlesMenu/styles.less   | 25 +++++++++++++++----
 2 files changed, 29 insertions(+), 10 deletions(-)

diff --git a/src/routes/Player/SubtitlesMenu/SubtitlesMenu.js b/src/routes/Player/SubtitlesMenu/SubtitlesMenu.js
index e97cd5bbf..1a51d1363 100644
--- a/src/routes/Player/SubtitlesMenu/SubtitlesMenu.js
+++ b/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 ?
diff --git a/src/routes/Player/SubtitlesMenu/styles.less b/src/routes/Player/SubtitlesMenu/styles.less
index 9798854cf..d47d6ab75 100644
--- a/src/routes/Player/SubtitlesMenu/styles.less
+++ b/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);
+                    }
+                }
+            }
         }
     }