From 678c7550034b38b162f4ab81491ca4d80da1c330 Mon Sep 17 00:00:00 2001
From: "Timothy Z." <timothy@stremio.com>
Date: Sun, 15 Dec 2024 21:22:15 +0200
Subject: [PATCH 1/6] refactor: remove addons button horizontal navbar

---
 src/common/MainNavBars/MainNavBars.js                 |  1 -
 .../NavBar/HorizontalNavBar/HorizontalNavBar.js       | 11 +----------
 src/routes/MetaDetails/MetaDetails.js                 |  2 --
 3 files changed, 1 insertion(+), 13 deletions(-)

diff --git a/src/common/MainNavBars/MainNavBars.js b/src/common/MainNavBars/MainNavBars.js
index 3ccf200ec..6bcde9031 100644
--- a/src/common/MainNavBars/MainNavBars.js
+++ b/src/common/MainNavBars/MainNavBars.js
@@ -24,7 +24,6 @@ const MainNavBars = React.memo(({ className, route, query, children }) => {
                 query={query}
                 backButton={false}
                 searchBar={true}
-                addonsButton={true}
                 fullscreenButton={true}
                 navMenu={true}
             />
diff --git a/src/common/NavBar/HorizontalNavBar/HorizontalNavBar.js b/src/common/NavBar/HorizontalNavBar/HorizontalNavBar.js
index 7a992fb45..0df4e833f 100644
--- a/src/common/NavBar/HorizontalNavBar/HorizontalNavBar.js
+++ b/src/common/NavBar/HorizontalNavBar/HorizontalNavBar.js
@@ -13,7 +13,7 @@ const NavMenu = require('./NavMenu');
 const styles = require('./styles');
 const { t } = require('i18next');
 
-const HorizontalNavBar = React.memo(({ className, route, query, title, backButton, searchBar, addonsButton, fullscreenButton, navMenu, ...props }) => {
+const HorizontalNavBar = React.memo(({ className, route, query, title, backButton, searchBar, fullscreenButton, navMenu, ...props }) => {
     const backButtonOnClick = React.useCallback(() => {
         window.history.back();
     }, []);
@@ -54,14 +54,6 @@ const HorizontalNavBar = React.memo(({ className, route, query, title, backButto
                     null
             }
             <div className={styles['buttons-container']}>
-                {
-                    addonsButton ?
-                        <Button className={styles['button-container']} href={'#/addons'} title={t('ADDONS')} tabIndex={-1}>
-                            <Icon className={styles['icon']} name={'addons-outline'} />
-                        </Button>
-                        :
-                        null
-                }
                 {
                     !isIOSPWA && fullscreenButton ?
                         <Button className={styles['button-container']} title={fullscreen ? t('EXIT_FULLSCREEN') : t('ENTER_FULLSCREEN')} tabIndex={-1} onClick={fullscreen ? exitFullscreen : requestFullscreen}>
@@ -90,7 +82,6 @@ HorizontalNavBar.propTypes = {
     title: PropTypes.string,
     backButton: PropTypes.bool,
     searchBar: PropTypes.bool,
-    addonsButton: PropTypes.bool,
     fullscreenButton: PropTypes.bool,
     navMenu: PropTypes.bool
 };
diff --git a/src/routes/MetaDetails/MetaDetails.js b/src/routes/MetaDetails/MetaDetails.js
index 084ca3f58..acbe03517 100644
--- a/src/routes/MetaDetails/MetaDetails.js
+++ b/src/routes/MetaDetails/MetaDetails.js
@@ -81,7 +81,6 @@ const MetaDetails = ({ urlParams, queryParams }) => {
             <HorizontalNavBar
                 className={styles['nav-bar']}
                 backButton={true}
-                addonsButton={true}
                 fullscreenButton={true}
                 navMenu={true}
             />
@@ -210,7 +209,6 @@ const MetaDetailsFallback = () => (
         <HorizontalNavBar
             className={styles['nav-bar']}
             backButton={true}
-            addonsButton={true}
             fullscreenButton={true}
             navMenu={true}
         />

From d9a9fb2d4fec540bff5eefb61a3e53c5578e2345 Mon Sep 17 00:00:00 2001
From: "Timothy Z." <timothy@stremio.com>
Date: Tue, 17 Dec 2024 15:20:26 +0200
Subject: [PATCH 2/6] fix: styles on event modal

---
 src/common/EventModal/styles.less | 48 ++++++++++++++++++++++---------
 1 file changed, 35 insertions(+), 13 deletions(-)

diff --git a/src/common/EventModal/styles.less b/src/common/EventModal/styles.less
index 67cfabb34..001c252ee 100644
--- a/src/common/EventModal/styles.less
+++ b/src/common/EventModal/styles.less
@@ -23,13 +23,13 @@
             .modal-dialog-content {
                 overflow-y: visible;
             }
-    
+
             .image {
                 width: 100%;
                 height: 100%;
                 margin-top: -10rem;
             }
-        
+
             .info-container {
                 display: flex;
                 flex-direction: column;
@@ -38,7 +38,7 @@
                 gap: 2.5rem;
                 padding: 1rem 4rem;
                 margin-top: -7rem;
-        
+
                 .title-container {
                     display: flex;
                     flex-direction: column;
@@ -50,7 +50,7 @@
                         text-align: center;
                         padding: 0 6rem;
                     }
-        
+
                     .label {
                         color: var(--primary-foreground-color);
                         font-size: 1rem;
@@ -58,7 +58,7 @@
                         opacity: 0.5;
                     }
                 }
-        
+
                 .addon-container {
                     display: flex;
                     align-items: center;
@@ -76,19 +76,19 @@
                         color: var(--primary-foreground-color);
                     }
                 }
-        
+
                 .action-button {
                     background-color: var(--primary-foreground-color);
                     border: 2px solid var(--primary-foreground-color);
                     padding: 0.8rem 2rem;
                     border-radius: 2rem;
-        
+
                     .button-label {
                         color: var(--primary-accent-color);
                         font-size: 1rem;
                         font-weight: 700;
                     }
-        
+
                     &:hover {
                         background-color: transparent;
                     }
@@ -96,15 +96,37 @@
             }
         }
     }
+}
 
-    @media only screen and (max-width: @minimum) {
+@media (orientation: landscape) and (max-height: @xsmall) {
+    .event-modal {
         .modal-dialog-container {
             .modal-dialog-content {
-                .image {
-                    height: 125%;
-                    width: 125%;
+                overflow-y: auto;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+
+                .modal-dialog-content {
+                    overflow-y: auto;
                 }
 
+                .image {
+                    margin-top: -5rem;
+                }
+
+                .info {
+                    margin-top: 0rem;
+                }
+            }
+        }
+    }
+}
+
+@media only screen and (max-width: @minimum) {
+    .event-modal {
+        .modal-dialog-container {
+            .modal-dialog-content {
                 .info-container {
                     .title-container {
                         .title {
@@ -120,4 +142,4 @@
             }
         }
     }
-}
\ No newline at end of file
+}

From c2a4fb87bdce118a2f20c420992019890b302158 Mon Sep 17 00:00:00 2001
From: "Timothy Z." <timothy@stremio.com>
Date: Tue, 17 Dec 2024 15:32:45 +0200
Subject: [PATCH 3/6] fix: rename old class to align to new impl

---
 src/common/EventModal/styles.less | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/common/EventModal/styles.less b/src/common/EventModal/styles.less
index 001c252ee..6d8591493 100644
--- a/src/common/EventModal/styles.less
+++ b/src/common/EventModal/styles.less
@@ -20,7 +20,7 @@
             align-items: center;
             overflow: visible;
 
-            .modal-dialog-content {
+            .body-container {
                 overflow-y: visible;
             }
 
@@ -107,7 +107,7 @@
                 flex-direction: column;
                 align-items: center;
 
-                .modal-dialog-content {
+                .body-container {
                     overflow-y: auto;
                 }
 

From 99921c0db8ccb00024e9457e9b7d2e5122239668 Mon Sep 17 00:00:00 2001
From: "Timothy Z." <timothy@stremio.com>
Date: Tue, 17 Dec 2024 15:33:46 +0200
Subject: [PATCH 4/6] remove: uneccesary flex declaration

---
 src/common/EventModal/styles.less | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/src/common/EventModal/styles.less b/src/common/EventModal/styles.less
index 6d8591493..a6710cf64 100644
--- a/src/common/EventModal/styles.less
+++ b/src/common/EventModal/styles.less
@@ -103,9 +103,6 @@
         .modal-dialog-container {
             .modal-dialog-content {
                 overflow-y: auto;
-                display: flex;
-                flex-direction: column;
-                align-items: center;
 
                 .body-container {
                     overflow-y: auto;

From 7875e4ba995d11e6ecea46d547bdfe25ad9ebf0d Mon Sep 17 00:00:00 2001
From: "Timothy Z." <timothy@stremio.com>
Date: Tue, 17 Dec 2024 16:44:31 +0200
Subject: [PATCH 5/6] fix: modal image sizing

---
 src/common/EventModal/styles.less | 21 +++++++++++++--------
 1 file changed, 13 insertions(+), 8 deletions(-)

diff --git a/src/common/EventModal/styles.less b/src/common/EventModal/styles.less
index a6710cf64..bd4718abb 100644
--- a/src/common/EventModal/styles.less
+++ b/src/common/EventModal/styles.less
@@ -19,15 +19,20 @@
             flex-direction: column;
             align-items: center;
             overflow: visible;
+            position: relative;
 
             .body-container {
                 overflow-y: visible;
             }
 
             .image {
-                width: 100%;
-                height: 100%;
-                margin-top: -10rem;
+                position: absolute;
+                top: -10rem;
+                left: 50%;
+                transform: translateX(-50%);
+                object-fit: cover;
+                width: 30rem;
+                height: 30rem;
             }
 
             .info-container {
@@ -36,8 +41,7 @@
                 align-items: center;
                 justify-content: center;
                 gap: 2.5rem;
-                padding: 1rem 4rem;
-                margin-top: -7rem;
+                padding: 10rem 4rem 0;
 
                 .title-container {
                     display: flex;
@@ -109,11 +113,12 @@
                 }
 
                 .image {
-                    margin-top: -5rem;
+                    position: relative;
+                    top: 0;
                 }
 
-                .info {
-                    margin-top: 0rem;
+                .info-container {
+                    padding: 1rem 4rem 0;
                 }
             }
         }

From d3533054282d344fde1a4e928d6160d7ddb134ef Mon Sep 17 00:00:00 2001
From: "Timothy Z." <timothy@stremio.com>
Date: Tue, 17 Dec 2024 16:56:20 +0200
Subject: [PATCH 6/6] remove: image on mobile landscape

---
 src/common/EventModal/styles.less | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/common/EventModal/styles.less b/src/common/EventModal/styles.less
index bd4718abb..24c1d053d 100644
--- a/src/common/EventModal/styles.less
+++ b/src/common/EventModal/styles.less
@@ -113,8 +113,7 @@
                 }
 
                 .image {
-                    position: relative;
-                    top: 0;
+                    display: none;
                 }
 
                 .info-container {