Refactor calendar rendering and duty list display

- Updated the calendar cell rendering to conditionally show duty and event markers based on the month view.
- Introduced a new HTML structure for day markers to improve layout and styling.
- Enhanced the duty list rendering to filter duties based on the current month, ensuring only relevant duties are displayed.
- Added CSS styles for day markers to improve visual presentation and alignment.

webapp/style.css

@@ -143,6 +143,17 @@ body {
   opacity: 0.9;
 }
 
+.day-markers {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 2px;
+  align-items: center;
+  margin-top: 2px;
+  min-width: 0;
+}
+
 .calendar-event-hint {
   position: fixed;
   z-index: 1000;
@@ -170,10 +181,9 @@ body {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: 16px;
-  height: 16px;
-  margin-top: 2px;
-  font-size: 0.65rem;
+  width: 14px;
+  height: 14px;
+  font-size: 0.6rem;
   font-weight: 700;
   border-radius: 50%;
   flex-shrink: 0;
@@ -205,6 +215,10 @@ body {
 }
 
 .duty-item {
+  display: grid;
+  grid-template-columns: 5.5em 1fr;
+  gap: 0 8px;
+  align-items: baseline;
   padding: 8px 10px;
   margin-bottom: 6px;
   border-radius: 8px;
@@ -221,16 +235,23 @@ body {
 }
 
 .duty-item .duty-item-type {
+  grid-column: 1;
+  grid-row: 1;
   font-size: 0.75rem;
   color: var(--muted);
-  margin-right: 4px;
 }
 
 .duty-item .name {
+  grid-column: 2;
+  grid-row: 1 / -1;
+  min-width: 0;
   font-weight: 600;
 }
 
 .duty-item .time {
+  grid-column: 1;
+  grid-row: 2;
+  align-self: start;
   font-size: 0.8rem;
   color: var(--muted);
 }