fix calendar layout on mobile

dist/index.css

@@ -475,6 +475,17 @@ body[showing-chat] #chat-page-wrapper {
 #chat-page > div > #main > #calendar-page > .pane-wrapper > .pane > .toolbar .input-wrapper > .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/Components/monthGrid.css */
 .month-grid-wrapper {

dist/index.js

@@ -2727,7 +2727,7 @@
           return /* @__PURE__ */ createElement(
             "div",
             {
-              class: "flex-column gap",
+              class: "flex-column gap slide-up",
               "children:append": [listState, TaskViewModelToEntry]
             }
           );
@@ -2746,7 +2746,7 @@
         }
       }
     );
-    return /* @__PURE__ */ createElement("div", { id: "calendar-page" }, /* @__PURE__ */ createElement("div", { class: "pane-wrapper" }, /* @__PURE__ */ createElement("div", { class: "pane" }, /* @__PURE__ */ createElement("div", { class: "toolbar" }, /* @__PURE__ */ createElement("span", null, /* @__PURE__ */ createElement(
+    return /* @__PURE__ */ createElement("div", { id: "calendar-page" }, /* @__PURE__ */ createElement("div", { class: "pane-wrapper grid-pane-wrapper" }, /* @__PURE__ */ createElement("div", { class: "pane" }, /* @__PURE__ */ createElement("div", { class: "toolbar" }, /* @__PURE__ */ createElement("span", null, /* @__PURE__ */ createElement(
       "button",
       {
         class: "ghost",

dist/styles.css

@@ -20,12 +20,12 @@ ANIMATION
 @keyframes slide-up {
   0% {
     opacity: 0;
-    transform: translateY(1rem);
+    transform: translateY(2rem);
   }
 }
 
 :root {
-  --animation-duration: 0.4s;
+  --animation-duration: 0.5s;
 }
 
 .slide-up {

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>