From 9320c8dbfbc30776abfc6eb9766df1585834035b Mon Sep 17 00:00:00 2001
From: originalnicodr <niconavall@gmail.com>
Date: Sun, 31 Dec 2023 14:55:00 -0300
Subject: [PATCH] Improved cellphone support for calendars.

---
 components/charts/calendar.tsx |  9 ++++++---
 pages/_year-data.tsx           | 22 +++++++++++++++++-----
 2 files changed, 23 insertions(+), 8 deletions(-)

diff --git a/components/charts/calendar.tsx b/components/charts/calendar.tsx
index ed7c609..b74343c 100644
--- a/components/charts/calendar.tsx
+++ b/components/charts/calendar.tsx
@@ -21,17 +21,20 @@ export const Calendar = (props: Omit<CalendarSvgProps, "height" | "width">) => {
       dayBorderWidth={2}
       legends={[
         {
-          anchor: "top",
-          direction: "row",
+          anchor: typeof window !== "undefined" && window.innerWidth / window.innerHeight < 1 ? 'left' : 'top',
+          translateX: typeof window !== "undefined" && window.innerWidth / window.innerHeight < 1 ? 0 : -50,
+          direction: typeof window !== "undefined" && window.innerWidth / window.innerHeight < 1 ? 'column' : 'row',
           itemCount: 8,
           itemWidth: 42,
-          itemHeight: 0,
+          itemHeight: 30,
           itemsSpacing: 14,
           itemDirection: "right-to-left",
           itemTextColor: "#DBDFD8", //framed-white
         },
       ]}
       theme={{ textColor: "#DBDFD8" }} //framed-white
+      direction={typeof window !== "undefined" && window.innerWidth / window.innerHeight < 1 ? 'vertical' : 'horizontal'}
+      align={typeof window !== "undefined" && window.innerWidth / window.innerHeight < 1 ? 'right' : 'center'}
       {...props}
     />
   );
diff --git a/pages/_year-data.tsx b/pages/_year-data.tsx
index a25c8e7..4c61b58 100644
--- a/pages/_year-data.tsx
+++ b/pages/_year-data.tsx
@@ -708,12 +708,18 @@ export default function WrapYear(year: number, flavourText: { intro: any; top10s
                   </div>
                 </div>
               </div>
-              <div className="calendar h-screen grid grid-rows-2 gap-x-8 md:overflow-hidden">
+              <div className="calendar h-auto grid grid-rows-2 gap-x-8 md:overflow-hidden" >
                 <div
-                  className="flex flex-col items-center w-h-screen md:w-full"
+                  className="flex flex-col items-center"
+                  style={{
+                    height: typeof window !== "undefined" && window.innerWidth / window.innerHeight < 1 ? window.innerHeight * 1.5 : window.innerHeight * 0.5,
+                    width: typeof window !== "undefined" && window.innerWidth / window.innerHeight < 1 ? window.innerWidth * 0.7 : window.innerWidth * 0.8,
+                    flex: 1,
+                    margin: "auto",
+                  }}
                   ref={segments["Daily Share Your Shot"]}
                 >
-                  <h3 className="font-semibold text-3xl pl-20">
+                  <h3 className="font-semibold text-3xl">
                     Share Your Shot Calendar in {year}
                   </h3>
                   <Calendar
@@ -728,10 +734,16 @@ export default function WrapYear(year: number, flavourText: { intro: any; top10s
                   />
                 </div>
                 <div
-                  className="flex flex-col items-center w-h-screen md:w-full"
+                  className="flex flex-col items-center"
+                  style={{
+                    height: typeof window !== "undefined" && window.innerWidth / window.innerHeight < 1 ? window.innerHeight * 1.5 : window.innerHeight * 0.5,
+                    width: typeof window !== "undefined" && window.innerWidth / window.innerHeight < 1 ? window.innerWidth * 0.7 : window.innerWidth * 0.8,
+                    flex: 1,
+                    margin: "auto",
+                  }}
                   ref={segments["Daily Hall of Framed"]}
                 >
-                  <h3 className="font-semibold text-3xl pl-20">
+                  <h3 className="font-semibold text-3xl">
                     Hall of Framed Calendar in {year}
                   </h3>
                   <Calendar