improve calendar layout on mobile

dist/index.css

@@ -498,7 +498,7 @@ body[showing-chat] #chat-page-wrapper {
   flex-direction: column;
   gap: var(--gap-between-tiles);
   height: 100%;
-  overflow: hidden;
+  overflow: auto;
 }
 .month-grid-wrapper .day-labels {
   flex: 0;
@@ -508,35 +508,68 @@ body[showing-chat] #chat-page-wrapper {
 .month-grid-wrapper > div {
   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;
+  animation: slide-up var(--animation-duration);
 }
 .month-grid {
-  overflow: hidden;
+  overflow: visible;
   padding: var(--content-padding);
   padding-top: 0px;
+  flex: 1;
+  grid-auto-rows: 1fr;
 }
 .month-grid .tile {
   animation: slide-up var(--animation-duration);
   overflow: hidden;
+  align-items: start;
 }
 .month-grid .tile[today] b {
   color: var(--primary);
 }
 .month-grid .tile > div {
+  width: 100%;
+  height: 100%;
+}
+.month-grid .tile .event-count {
+  display: none;
+  background-color: var(--text-normal);
+  color: var(--background);
+  opacity: 0.6;
+  border-radius: 100%;
+  width: 1rem;
+  height: 1rem;
+  font-size: 0.6rem;
+  font-weight: bold;
+  align-items: center;
+  justify-content: center;
+}
+.month-grid .tile .event-count[has-events] {
+  background-color: var(--primary);
+  opacity: 1;
+}
+.month-grid .tile .event-list {
   display: flex;
   flex-direction: column;
   height: 100%;
   width: 100%;
+  gap: var(--gap-between-tiles);
 }
-.month-grid .tile > div span {
+.month-grid .tile .event-list span {
   animation: slide-up var(--animation-duration);
 }
-@media (max-width: 640px) {
+@media (max-width: 640px) and (max-height: 900px) {
   .month-grid .tile {
-    padding: 4px;
+    padding: 0px;
+  }
+  .month-grid .tile > div {
+    align-items: center;
+    justify-content: center;
+  }
+  .month-grid .tile .event-count {
+    display: flex;
+  }
+  .month-grid .tile .event-list {
+    display: none;
   }
 }
 

dist/index.js

@@ -3193,6 +3193,14 @@
         () => selectedDate.value == parseInt(date)
       );
       const isToday = monthGrid.isCurrentMonth == true && parseInt(date) == (/* @__PURE__ */ new Date()).getDate();
+      const eventCount = createProxyState(
+        [mapState],
+        () => mapState.value.size
+      );
+      const hasEvents = createProxyState(
+        [eventCount],
+        () => eventCount.value != 0
+      );
       function select() {
         selectedDate.value = parseInt(date);
       }
@@ -3210,9 +3218,16 @@
           "on:drop": drop
         },
         /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("b", null, date), /* @__PURE__ */ createElement(
+          "span",
+          {
+            class: "event-count",
+            "toggle:has-events": hasEvents,
+            "subscribe:innerText": eventCount
+          }
+        ), /* @__PURE__ */ createElement(
           "div",
           {
-            class: "flex-column gap clip",
+            class: "event-list",
             "children:append": [mapState, converter]
           }
         ))

src/View/Components/monthGrid.css

@@ -5,7 +5,7 @@
   gap: var(--gap-between-tiles);
 
   height: 100%;
-  overflow: hidden;
+  overflow: auto;
 }
 
 .month-grid-wrapper .day-labels {
@@ -18,25 +18,27 @@
 .month-grid-wrapper > div {
   display: grid;
   gap: var(--gap-between-tiles);
-
+  grid-template-columns: repeat(7, minmax(0px, 1fr));
-  height: 100%;
 
   animation: slide-up var(--animation-duration);
-
-  grid-template-columns: repeat(7, minmax(0px, 1fr));
-  grid-auto-rows: 1fr;
 }
 
 .month-grid {
-  overflow: hidden;
+  overflow: visible;
 
   padding: var(--content-padding);
   padding-top: 0px;
+
+  flex: 1;
+
+  grid-auto-rows: 1fr;
 }
 
 .month-grid .tile {
   animation: slide-up var(--animation-duration);
   overflow: hidden;
+
+  align-items: start;
 }
 
 .month-grid .tile[today] b {
@@ -44,18 +46,61 @@
 }
 
 .month-grid .tile > div {
+  width: 100%;
+  height: 100%;
+}
+
+.month-grid .tile .event-count {
+  display: none;
+
+  background-color: var(--text-normal);
+  color: var(--background);
+
+  opacity: 0.6;
+  border-radius: 100%;
+
+  width: 1rem;
+  height: 1rem;
+  font-size: 0.6rem;
+  font-weight: bold;
+
+  align-items: center;
+  justify-content: center;
+}
+
+.month-grid .tile .event-count[has-events] {
+  background-color: var(--primary);
+  opacity: 1;
+}
+
+.month-grid .tile .event-list {
   display: flex;
   flex-direction: column;
 
   height: 100%;
   width: 100%;
+
+  gap: var(--gap-between-tiles);
 }
-.month-grid .tile > div span {
+.month-grid .tile .event-list span {
   animation: slide-up var(--animation-duration);
 }
 
-@media (max-width: 640px) {
+@media (max-width: 640px) and (max-height: 900px) {
   .month-grid .tile {
-    padding: 4px;
+    padding: 0px;
+  }
+
+  .month-grid .tile > div {
+    align-items: center;
+    justify-content: center;
+  }
+
+  .month-grid .tile .event-count {
+    display: flex;
+  }
+
+  .month-grid .tile .event-list {
+    display: none;
   }
 }

src/View/Components/monthGrid.tsx

@@ -62,6 +62,16 @@ export function MonthGrid<T>(
               monthGrid.isCurrentMonth == true &&
               parseInt(date) == new Date().getDate();
 
+            const eventCount: React.State<number> = React.createProxyState(
+              [mapState],
+              () => mapState.value.size
+            );
+
+            const hasEvents: React.State<boolean> = React.createProxyState(
+              [eventCount],
+              () => eventCount.value != 0
+            );
+
             function select() {
               selectedDate.value = parseInt(date);
             }
@@ -81,8 +91,13 @@ export function MonthGrid<T>(
               >
                 <div>
                   <b>{date}</b>
+                  <span
+                    class="event-count"
+                    toggle:has-events={hasEvents}
+                    subscribe:innerText={eventCount}
+                  ></span>
                   <div
-                    class="flex-column gap clip"
+                    class="event-list"
                     children:append={[mapState, converter]}
                   ></div>
                 </div>