Make calendar work reasonably on mobile

RIGS/templates/calendar.html

@@ -23,12 +23,13 @@
 <style>
 .week {
   display:grid;
-  grid-template-columns: repeat(7, 1fr);
+  grid-template-columns: repeat(7, minmax(0, 1fr));
   grid-auto-flow: dense;
   grid-gap: 2px 10px;
   border: 1px solid black;
   height: 8em;
   align-content: start;
+  max-width: 100%;
 }
 
 .day {
@@ -50,6 +51,7 @@
   background-color: #CCC;
   font-size: 0.8em !important;
   white-space: nowrap;
+  overflow: hidden;
 }
 
 .event-end {
@@ -62,6 +64,15 @@
   border-bottom-left-radius: 5px;
 }
 
+.week-day {
+    font-size: 0.8em;
+}
+
+@media (max-width: 767.98px) {
+    .event {
+        padding: 2px;
+    }
+}
 
 [data-span="1"] { grid-column-end: span 1; }
 [data-span="2"] { grid-column-end: span 2; }
@@ -106,14 +117,14 @@
 {% for week in weeks %}
 <div class="week">
     {% for day in week %}
-    {% if day.0 != 0 %}
-        <div class="day" id="{{day.0}}">
-            <h3 class="day-label text-muted">{{day.0}}</h3>
-            {{ day.2|safe }}
-        </div>
-    {% else %}
-    <div class="day"><span style="grid-row-start: 1;">&nbsp;<span></div>
-    {% endif %}
+        {% if day.0 != 0 %}
+            <div class="day" id="{{day.0}}">
+                <h3 class="day-label text-muted">{{day.0}}</h3>
+                {{ day.2|safe }}
+            </div>
+        {% else %}
+        <div class="day"><span style="grid-row-start: 1;">&nbsp;<span></div>
+        {% endif %}
     {% endfor %}
 </div>
 {% endfor %}