add month grid

dist/index.css

@@ -380,6 +380,10 @@ body[showing-chat] #chat-page-wrapper {
   overflow-x: auto;
   padding: 0px;
 }
+#chat-page > div > #main > div > .pane-wrapper > .pane > .toolbar > span {
+  display: flex;
+  align-items: center;
+}
 #chat-page > div > #main > div > .pane-wrapper > .pane > .toolbar > span.title {
   padding-left: var(--content-padding);
 }
@@ -447,6 +451,52 @@ body[showing-chat] #chat-page-wrapper {
   }
 }
 
+/* src/View/ChatPages/calendarPage.css */
+#chat-page > div > #main > #calendar-page > .pane-wrapper > .pane > .toolbar .input-wrapper {
+  display: flex;
+  padding: var(--gap-between-tiles);
+  gap: var(--gap-between-tiles);
+}
+#chat-page > div > #main > #calendar-page > .pane-wrapper > .pane > .toolbar .input-wrapper > input {
+  min-height: unset;
+  height: calc(var(--control-height) - 2 * var(--gap-between-tiles));
+  appearance: textfield;
+  -moz-appearance: textfield;
+}
+#calendar-page .input-wrapper > input::-webkit-outer-spin-button,
+#calendar-page .input-wrapper > input::-webkit-innner-spin-button {
+  appearance: none;
+  -webkit-appearance: none;
+  margin: 0px;
+}
+#chat-page > div > #main > #calendar-page > .pane-wrapper > .pane > .toolbar .input-wrapper > .year-input {
+  width: 4.4rem;
+}
+#chat-page > div > #main > #calendar-page > .pane-wrapper > .pane > .toolbar .input-wrapper > .month-input {
+  width: 3.1rem;
+}
+
+/* src/View/Components/monthGrid.css */
+.month-grid-wrapper {
+  display: grid;
+  gap: var(--gap-between-tiles);
+  height: 100%;
+  animation: slide-up var(--animation-duration);
+  grid-template-columns: repeat(7, minmax(0px, 1fr));
+  grid-auto-rows: 1fr;
+}
+.month-grid-wrapper .tile > div {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  width: 100%;
+}
+@media (max-width: 640px) {
+  .month-grid-wrapper .tile {
+    padding: 4px;
+  }
+}
+
 /* src/View/ChatPages/messagePage.css */
 #chat-page #main #message-page .content {
   padding: 0px;