From 4c4a41a767c9482f623aff28a18d4faba2f633c8 Mon Sep 17 00:00:00 2001
From: Tim <tymmesyde@gmail.com>
Date: Thu, 4 Jul 2024 12:24:19 +0200
Subject: [PATCH] refactor(Calendar): improve responsiveness

---
 src/routes/Calendar/List/List.less       |  2 +-
 src/routes/Calendar/Table/Cell/Cell.less | 36 ++++++++++++++++++++++--
 src/routes/Calendar/Table/Cell/Cell.tsx  |  2 +-
 3 files changed, 35 insertions(+), 5 deletions(-)

diff --git a/src/routes/Calendar/List/List.less b/src/routes/Calendar/List/List.less
index dd0b63991..66b16e97c 100644
--- a/src/routes/Calendar/List/List.less
+++ b/src/routes/Calendar/List/List.less
@@ -12,7 +12,7 @@
     overflow-y: auto;
 }
 
-@media only screen and (max-width: @minimum) and (orientation: portrait) {
+@media only screen and (max-width: @small) and (orientation: portrait) {
     .list {
         display: none;
     }
diff --git a/src/routes/Calendar/Table/Cell/Cell.less b/src/routes/Calendar/Table/Cell/Cell.less
index c47fc4901..cc74a9b7b 100644
--- a/src/routes/Calendar/Table/Cell/Cell.less
+++ b/src/routes/Calendar/Table/Cell/Cell.less
@@ -1,10 +1,13 @@
 // Copyright (C) 2017-2024 Smart code 203358507
 
+@import (reference) '~stremio/common/screen-sizes.less';
+
 .cell {
     position: relative;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
+    gap: 1rem;
     background-color: var(--overlay-color);
     border: 0.15rem solid transparent;
     overflow: hidden;
@@ -21,7 +24,7 @@
     .heading {
         flex: none;
         position: relative;
-        padding: 1rem;
+        padding: 1rem 1rem 0 1rem;
 
         .day {
             position: relative;
@@ -37,7 +40,7 @@
         }
     }
 
-    .body {
+    .items {
         flex: 1 1 auto;
         position: relative;
         display: flex;
@@ -103,7 +106,7 @@
     }
 
     &.past {
-        .body {
+        .items {
             opacity: 0.5;
         }
     }
@@ -116,3 +119,30 @@
         border-color: var(--overlay-color);
     }
 }
+
+@media only screen and (max-width: @minimum) and (orientation: portrait) {
+    .cell {
+        gap: 1rem;
+
+        .items {
+            .item {
+                border-radius: 0.25rem;
+            }
+        }
+    }
+}
+
+@media only screen and (max-width: @small) and (orientation: landscape) {
+    .cell {
+        flex-direction: row;
+        align-items: center;
+
+        .heading {
+            padding: 1rem;
+        }
+
+        .items {
+            display: none;
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/routes/Calendar/Table/Cell/Cell.tsx b/src/routes/Calendar/Table/Cell/Cell.tsx
index 76442a640..b20ea9060 100644
--- a/src/routes/Calendar/Table/Cell/Cell.tsx
+++ b/src/routes/Calendar/Table/Cell/Cell.tsx
@@ -38,7 +38,7 @@ const Cell = ({ selected, monthInfo, date, items, onClick }: Props) => {
                     {date.day}
                 </div>
             </div>
-            <HorizontalScroll className={styles['body']}>
+            <HorizontalScroll className={styles['items']}>
                 {
                     items.map(({ id, name, poster, deepLinks }) => (
                         <Button key={id} className={styles['item']} href={deepLinks.metaDetailsStreams}>