diff --git a/wwwroot/css/calendar-events-css.css b/wwwroot/css/calendar-events-css.css
index 927b485..9189e8e 100644
--- a/wwwroot/css/calendar-events-css.css
+++ b/wwwroot/css/calendar-events-css.css
@@ -13,7 +13,11 @@ swp-day-columns swp-event {
   color: var(--color-text);
   font-size: 12px;
   padding: 4px 6px;
-  
+
+  /* Enable container queries for responsive layout */
+  container-type: size;
+  container-name: event;
+
   /* CSS Grid layout for time, title, and description */
   display: grid;
   grid-template-columns: auto 1fr;
@@ -170,40 +174,31 @@ swp-day-columns swp-event-description {
   line-height: 1.3;
   overflow: hidden;
   word-wrap: break-word;
+
+  /* Ensure description fills available height for gradient effect */
+  min-height: 100%;
+  align-self: stretch;
+
+  /* Fade-out effect for long descriptions */
+  -webkit-mask-image: linear-gradient(to bottom, black 70%, transparent 100%);
+  mask-image: linear-gradient(to bottom, black 70%, transparent 100%);
 }
 
-/* Hide description if event is too short (<60px) */
-swp-day-columns swp-event[style*="height: 30px"] swp-event-description,
-swp-day-columns swp-event[style*="height: 31px"] swp-event-description,
-swp-day-columns swp-event[style*="height: 32px"] swp-event-description,
-swp-day-columns swp-event[style*="height: 33px"] swp-event-description,
-swp-day-columns swp-event[style*="height: 34px"] swp-event-description,
-swp-day-columns swp-event[style*="height: 35px"] swp-event-description,
-swp-day-columns swp-event[style*="height: 36px"] swp-event-description,
-swp-day-columns swp-event[style*="height: 37px"] swp-event-description,
-swp-day-columns swp-event[style*="height: 38px"] swp-event-description,
-swp-day-columns swp-event[style*="height: 39px"] swp-event-description,
-swp-day-columns swp-event[style*="height: 40px"] swp-event-description,
-swp-day-columns swp-event[style*="height: 41px"] swp-event-description,
-swp-day-columns swp-event[style*="height: 42px"] swp-event-description,
-swp-day-columns swp-event[style*="height: 43px"] swp-event-description,
-swp-day-columns swp-event[style*="height: 44px"] swp-event-description,
-swp-day-columns swp-event[style*="height: 45px"] swp-event-description,
-swp-day-columns swp-event[style*="height: 46px"] swp-event-description,
-swp-day-columns swp-event[style*="height: 47px"] swp-event-description,
-swp-day-columns swp-event[style*="height: 48px"] swp-event-description,
-swp-day-columns swp-event[style*="height: 49px"] swp-event-description,
-swp-day-columns swp-event[style*="height: 50px"] swp-event-description,
-swp-day-columns swp-event[style*="height: 51px"] swp-event-description,
-swp-day-columns swp-event[style*="height: 52px"] swp-event-description,
-swp-day-columns swp-event[style*="height: 53px"] swp-event-description,
-swp-day-columns swp-event[style*="height: 54px"] swp-event-description,
-swp-day-columns swp-event[style*="height: 55px"] swp-event-description,
-swp-day-columns swp-event[style*="height: 56px"] swp-event-description,
-swp-day-columns swp-event[style*="height: 57px"] swp-event-description,
-swp-day-columns swp-event[style*="height: 58px"] swp-event-description,
-swp-day-columns swp-event[style*="height: 59px"] swp-event-description {
-  display: none;
+/* Container queries for height-based layout */
+
+/* Hide description when event is too short (< 60px) */
+@container event (height < 30px) {
+  swp-day-columns swp-event-description {
+    display: none;
+  }
+}
+ 
+
+/* Full description for tall events (>= 100px) */
+@container event (height >= 100px) {
+  swp-day-columns swp-event-description {
+    max-height: none;
+  }
 }
 
 /* Multi-day events */