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] 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
+}