From 498598424b2341a94b145c45e02aa4804553f530 Mon Sep 17 00:00:00 2001
From: ajnart <ajnart@pm.me>
Date: Tue, 2 Aug 2022 05:18:07 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=94=A7=20Move=20Calendar=20module=20to=20?=
 =?UTF-8?q?new=20popover=20api?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/modules/calendar/CalendarModule.tsx | 79 +++++++++++++------------
 1 file changed, 42 insertions(+), 37 deletions(-)

diff --git a/src/modules/calendar/CalendarModule.tsx b/src/modules/calendar/CalendarModule.tsx
index 3f7586562..cc9a03cc1 100644
--- a/src/modules/calendar/CalendarModule.tsx
+++ b/src/modules/calendar/CalendarModule.tsx
@@ -260,54 +260,59 @@ function DayComponent(props: any) {
       )}
       <Popover
         position="bottom"
+        withinPortal
         radius="lg"
         shadow="xl"
         transition="pop"
         styles={{
-          body: {
+          dropdown: {
             boxShadow: '0 0 14px 14px rgba(0, 0, 0, 0.1), 0 14px 11px rgba(0, 0, 0, 0.1)',
           },
         }}
         width="auto"
         onClose={() => setOpened(false)}
         opened={opened}
-        target={day}
       >
-        <ScrollArea style={{ height: 400 }}>
-          {sonarrFiltered.map((media: any, index: number) => (
-            <React.Fragment key={index}>
-              <SonarrMediaDisplay media={media} />
-              {index < sonarrFiltered.length - 1 && <Divider variant="dashed" my="xl" />}
-            </React.Fragment>
-          ))}
-          {radarrFiltered.length > 0 && sonarrFiltered.length > 0 && (
-            <Divider variant="dashed" my="xl" />
-          )}
-          {radarrFiltered.map((media: any, index: number) => (
-            <React.Fragment key={index}>
-              <RadarrMediaDisplay media={media} />
-              {index < radarrFiltered.length - 1 && <Divider variant="dashed" my="xl" />}
-            </React.Fragment>
-          ))}
-          {sonarrFiltered.length > 0 && lidarrFiltered.length > 0 && (
-            <Divider variant="dashed" my="xl" />
-          )}
-          {lidarrFiltered.map((media: any, index: number) => (
-            <React.Fragment key={index}>
-              <LidarrMediaDisplay media={media} />
-              {index < lidarrFiltered.length - 1 && <Divider variant="dashed" my="xl" />}
-            </React.Fragment>
-          ))}
-          {lidarrFiltered.length > 0 && readarrFiltered.length > 0 && (
-            <Divider variant="dashed" my="xl" />
-          )}
-          {readarrFiltered.map((media: any, index: number) => (
-            <React.Fragment key={index}>
-              <ReadarrMediaDisplay media={media} />
-              {index < readarrFiltered.length - 1 && <Divider variant="dashed" my="xl" />}
-            </React.Fragment>
-          ))}
-        </ScrollArea>
+        <Popover.Target>
+          <div>{day}</div>
+        </Popover.Target>
+        <Popover.Dropdown>
+          <ScrollArea style={{ height: 400 }}>
+            {sonarrFiltered.map((media: any, index: number) => (
+              <React.Fragment key={index}>
+                <SonarrMediaDisplay media={media} />
+                {index < sonarrFiltered.length - 1 && <Divider variant="dashed" my="xl" />}
+              </React.Fragment>
+            ))}
+            {radarrFiltered.length > 0 && sonarrFiltered.length > 0 && (
+              <Divider variant="dashed" my="xl" />
+            )}
+            {radarrFiltered.map((media: any, index: number) => (
+              <React.Fragment key={index}>
+                <RadarrMediaDisplay media={media} />
+                {index < radarrFiltered.length - 1 && <Divider variant="dashed" my="xl" />}
+              </React.Fragment>
+            ))}
+            {sonarrFiltered.length > 0 && lidarrFiltered.length > 0 && (
+              <Divider variant="dashed" my="xl" />
+            )}
+            {lidarrFiltered.map((media: any, index: number) => (
+              <React.Fragment key={index}>
+                <LidarrMediaDisplay media={media} />
+                {index < lidarrFiltered.length - 1 && <Divider variant="dashed" my="xl" />}
+              </React.Fragment>
+            ))}
+            {lidarrFiltered.length > 0 && readarrFiltered.length > 0 && (
+              <Divider variant="dashed" my="xl" />
+            )}
+            {readarrFiltered.map((media: any, index: number) => (
+              <React.Fragment key={index}>
+                <ReadarrMediaDisplay media={media} />
+                {index < readarrFiltered.length - 1 && <Divider variant="dashed" my="xl" />}
+              </React.Fragment>
+            ))}
+          </ScrollArea>
+        </Popover.Dropdown>
       </Popover>
     </Box>
   );