diff --git a/src/widgets/calendar/MediaList.tsx b/src/widgets/calendar/MediaList.tsx
index 53b2c5133..464ee9cff 100644
--- a/src/widgets/calendar/MediaList.tsx
+++ b/src/widgets/calendar/MediaList.tsx
@@ -1,4 +1,5 @@
 import { createStyles, Divider, ScrollArea } from '@mantine/core';
+import { useViewportSize } from '@mantine/hooks';
 import React from 'react';
 import {
   LidarrMediaDisplay,
@@ -14,11 +15,19 @@ interface MediaListProps {
 
 export const MediaList = ({ medias }: MediaListProps) => {
   const { classes } = useStyles();
+  const { height } = useViewportSize();
   const lastMediaType = getLastMediaType(medias);
+  const MEDIA_HEIGHT = 250;
+  // Euclidean division to get the number of media displayed
+  const maxMediaDisplayed = Math.floor(height / MEDIA_HEIGHT);
 
   return (
     <ScrollArea
-      style={{ height: 450, minHeight: 210, maxWidth: '90vw' }}
+      style={{
+        height: maxMediaDisplayed <= 5 ? maxMediaDisplayed * MEDIA_HEIGHT : 5 * MEDIA_HEIGHT,
+        minHeight: 210,
+        maxWidth: '90vw',
+      }}
       offsetScrollbars
       pt={5}
       className={classes.scrollArea}