diff --git a/package-lock.json b/package-lock.json
index a9a6a6772..8f8e91bbc 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,3 +1,4 @@
+
 {
   "name": "cryptpad",
   "version": "5.4.1",
diff --git a/www/calendar/app-calendar.less b/www/calendar/app-calendar.less
index cd831de19..cab5ab0c2 100644
--- a/www/calendar/app-calendar.less
+++ b/www/calendar/app-calendar.less
@@ -124,7 +124,10 @@
                 justify-content: center !important;
                 align-items: center !important;
                 .tui-full-calendar-popup {
-                    width: 540px !important;
+                    width: 540px;
+                    max-width: 100%;
+                    max-height: 100%;
+                    overflow-y: auto;
                 }
             }
             #tui-full-calendar-popup-arrow {
@@ -149,6 +152,7 @@
             border-radius: @variables_radius_L;
         }
         .tui-full-calendar-popup-container {
+            min-width: 100%;
             background: @cp_flatpickr-bg;
             color: @cryptpad_text_col;
             border-radius: @variables_radius_L;
@@ -197,6 +201,7 @@
                     overflow: hidden;
                     text-overflow: ellipsis;
                     font: @colortheme_app-font;
+                    padding: 0 10px;
                 }
                 input { flex: 1; }
             }
@@ -299,6 +304,7 @@
                 display: flex;
             }
             .cp-calendar-notif-list-container {
+                width: 100%;
                 margin-bottom: 10px;
                 .cp-notif-label {
                     margin-top: 0.5em;
@@ -307,25 +313,34 @@
             .cp-calendar-notif-list {
                 display: flex;
                 flex-flow: column;
+                flex: 1;
+                min-width: 150px;
                 .cp-notif-entry {
+                    display: flex;
                     margin-bottom: 2px;
                     border-radius: @variables_radius;
                     background-color: fade(@cryptpad_text_col, 10%);
                     padding: 0.25rem;
                     .cp-notif-value {
-                        width: 170px;
+                        width: 75%;
                         display: inline-flex;
                         line-height: 30px;
                         vertical-align: middle;
+                        flex-grow: 1;
                         .cp-before {
                             flex: 1;
                             min-width: 0;
                         }
                     }
                     span:not(:last-child) {
-                        margin: 0px 5px;
+                        margin: 0;
+                        margin-right: 0.3rem;
+                    }
+                    span:first-child {
+                        margin-left: 0.3rem;
                     }
                     .btn-danger-outline {
+                        display: block;
                         margin-right: 0px !important;
                         background-color: transparent;
                         color: @cryptpad_text_col;
@@ -351,6 +366,13 @@
             }
             .cp-calendar-notif-form {
                 align-items: center;
+                .cp-calendar-notif-form-buttons {
+                    display: inline-flex;
+                    align-items: center;
+                    & > input {
+                        height: 40px;
+                    }
+                }
                 // margin-bottom: 20px;
                 input {
                     width: 80px;
@@ -642,6 +664,10 @@
     }
 
     @media (max-width: @browser_media-medium-screen) {
+        .cp-calendar-notif-list-container, .cp-calendar-notif-form {
+            flex-direction: column;
+            align-items: unset !important;
+        }
         .cp-calendar-newevent {
             i {
                 margin: 0 !important;
diff --git a/www/calendar/inner.js b/www/calendar/inner.js
index ba46a4a7b..800045e14 100644
--- a/www/calendar/inner.js
+++ b/www/calendar/inner.js
@@ -1922,7 +1922,9 @@ APP.recurrenceRule = {
         };
         $(addNotif).click(function () {
             var unit = $block.getValue();
-            var value = $number.val();
+            var val = $number.val();
+            if (val === "") { return void UI.warn(Messages.error); }
+            var value = Number(val);
             addNotification(unit, value);
         });
         oldReminders.forEach(function (minutes) {
@@ -1933,9 +1935,11 @@ APP.recurrenceRule = {
             listContainer,
             h('div.cp-calendar-notif-form', [
                 h('span.cp-notif-label', Messages.calendar_addNotification),
-                number,
-                $block[0],
-                addNotif
+                h('span.cp-calendar-notif-form-buttons', [
+                    number,
+                    $block[0],
+                    addNotif
+                ])
             ])
         ]);
     };