Add generic modal

src/app/pages/agenda/agenda.page.scss

@@ -464,16 +464,21 @@ td.monthview-primary-with-event {
 
 .timeline-header{
   z-index: 1000000;
-  position: absolute;
   width: 100%;
   background-color: white;
 }
 
 
 .timeline-container{
-  margin-top: 67px;
+  
 }
 
+.calendar-timeline{
+
+  height: 100%;
+  background-color: white;
+  border-top-left-radius: 25px;
+}
 
 .calendar-border{
   background: #ebebeb;
@@ -484,6 +489,58 @@ td.monthview-primary-with-event {
 
 .calendar-progress-bar{
   position: absolute;
-  width: calc(100% - 20px);
+  width: 100%;
   margin-left: 10px;
+}
+
+
+.agenda-container{
+  overflow: hidden;
+}
+
+.container-wrapper{
+  height: 100%;
+  .calendar-timeline{
+    flex-wrap: wrap;
+    border-top-right-radius: 24px;
+    width: calc(100%);
+
+    .calendar-wrapper{
+      width: 100%;
+    }
+
+    .timeline-wrapper{
+      width: 100%;
+      overflow: scroll;
+      overflow-x: hidden; 
+    }
+  }
+}
+
+.event-details{
+  width: 100%;
+  background: white;
+  border-top-right-radius: 25px;
+}
+
+
+.event-details{
+  // width: 411px;
+  display: none;
+}
+
+
+@media only screen and (min-width: 1024px) {
+  .container-wrapper{
+    height: 100%;
+    
+    .calendar-timeline{
+      flex-wrap: wrap;
+      border-top-right-radius: 0px;
+      width: calc(100% - 40%);
+    }
+  }
+  .event-details{
+    display: block;
+  }
 }