From 7068ab9e2d97f9c7b6b170f48a06afd8e3e39001 Mon Sep 17 00:00:00 2001
From: kKaskak <117831817+kKaskak@users.noreply.github.com>
Date: Wed, 15 Nov 2023 13:12:16 +0200
Subject: [PATCH] fix: streams-list

---
 .../StreamsList/Stream/styles.less            |  6 ++++
 .../MetaDetails/StreamsList/StreamsList.js    | 30 +++++++++----------
 .../MetaDetails/StreamsList/styles.less       |  2 +-
 3 files changed, 22 insertions(+), 16 deletions(-)

diff --git a/src/routes/MetaDetails/StreamsList/Stream/styles.less b/src/routes/MetaDetails/StreamsList/Stream/styles.less
index 5ee4e584c..22996622c 100644
--- a/src/routes/MetaDetails/StreamsList/Stream/styles.less
+++ b/src/routes/MetaDetails/StreamsList/Stream/styles.less
@@ -110,6 +110,12 @@
         .description-container {
             font-size: 0.9rem;
         }
+
+        .info-container {
+            .addon-name {
+                font-size: 0.9rem;
+            }
+        }
     }
 }
 
diff --git a/src/routes/MetaDetails/StreamsList/StreamsList.js b/src/routes/MetaDetails/StreamsList/StreamsList.js
index ae7d2416e..5e27cf753 100644
--- a/src/routes/MetaDetails/StreamsList/StreamsList.js
+++ b/src/routes/MetaDetails/StreamsList/StreamsList.js
@@ -98,17 +98,6 @@ const StreamsList = ({ className, video, ...props }) => {
                             </div>
                             :
                             <React.Fragment>
-                                {
-                                    countLoadingAddons > 0 ?
-                                        <div className={styles['addons-loading-container']}>
-                                            <div className={styles['addons-loading']}>
-                                                {countLoadingAddons} {t('MOBILE_ADDONS_LOADING')}
-                                            </div>
-                                            <span className={styles['addons-loading-bar']}></span>
-                                        </div>
-                                        :
-                                        null
-                                }
                                 <div className={styles['select-choices-wrapper']}>
                                     {
                                         video ?
@@ -148,13 +137,24 @@ const StreamsList = ({ className, video, ...props }) => {
                                             onClick={stream.onClick}
                                         />
                                     ))}
+                                    <Button className={styles['install-button-container']} title={t('ADDON_CATALOGUE_MORE')} href={'#/addons'}>
+                                        <Icon className={styles['icon']} name={'addons'} />
+                                        <div className={styles['label']}>{ t('ADDON_CATALOGUE_MORE') }</div>
+                                    </Button>
                                 </div>
                             </React.Fragment>
             }
-            <Button className={styles['install-button-container']} title={t('ADDON_CATALOGUE_MORE')} href={'#/addons'}>
-                <Icon className={styles['icon']} name={'addons'} />
-                <div className={styles['label']}>{ t('ADDON_CATALOGUE_MORE') }</div>
-            </Button>
+            {
+                countLoadingAddons > 0 ?
+                    <div className={styles['addons-loading-container']}>
+                        <div className={styles['addons-loading']}>
+                            {countLoadingAddons} {t('MOBILE_ADDONS_LOADING')}
+                        </div>
+                        <span className={styles['addons-loading-bar']}></span>
+                    </div>
+                    :
+                    null
+            }
         </div>
     );
 };
diff --git a/src/routes/MetaDetails/StreamsList/styles.less b/src/routes/MetaDetails/StreamsList/styles.less
index 55be6310b..efcc42152 100644
--- a/src/routes/MetaDetails/StreamsList/styles.less
+++ b/src/routes/MetaDetails/StreamsList/styles.less
@@ -45,7 +45,7 @@
         display: flex;
         z-index: 1;
         overflow: visible;
-        margin: 2em 1em 0 1em;
+        margin: 2em 1em;
         gap: 1em;
         flex-direction: column;
         justify-content: center;