fix calendar layout on mobile

src/View/ChatPages/calendarPage.css

@@ -59,3 +59,17 @@
   > .month-input {
   width: 3.1rem;
 }
+
+@media (max-width: 1024px) {
+  #chat-page > div > #main > #calendar-page {
+    flex-direction: column;
+  }
+
+  #chat-page > div > #main > #calendar-page .month-grid-wrapper {
+    height: unset;
+  }
+
+  #chat-page > div > #main > #calendar-page .grid-pane-wrapper {
+    border-bottom: 1px solid var(--border);
+  }
+}

src/View/ChatPages/calendarPage.tsx

@@ -42,7 +42,7 @@ export function CalendarPage(calendarPageViewModel: CalendarPageViewModel) {
       } else {
         return (
           <div
-            class="flex-column gap"
+            class="flex-column gap slide-up"
             children:append={[listState, TaskViewModelToEntry]}
           ></div>
         );
@@ -65,7 +65,7 @@ export function CalendarPage(calendarPageViewModel: CalendarPageViewModel) {
 
   return (
     <div id="calendar-page">
-      <div class="pane-wrapper">
+      <div class="pane-wrapper grid-pane-wrapper">
         <div class="pane">
           <div class="toolbar">
             <span>