style: update calendar CSS for improved layout and visual consistency

- Adjusted the layout of the `.day-indicator` to use a fixed width for better alignment.
- Modified the `.day-indicator-dot` styles to enhance flexibility and visual appearance, including changes to height and border-radius for better presentation.
- Ensured that the first and last dots have distinct border-radius styles when not the only child, improving the overall aesthetics of the calendar display.
- No functional changes were made; the focus was on enhancing the visual presentation of the calendar component.

webapp/css/calendar.css

@@ -141,17 +141,29 @@
 
 .day-indicator {
   display: flex;
-  flex-wrap: wrap;
   justify-content: center;
-  gap: 2px;
+  width: 65%;
   margin-top: 6px;
 }
 
 .day-indicator-dot {
-  width: 6px;
+  flex: 1;
+  height: 5px;
+  border-radius: 0;
+}
+
+.day-indicator-dot:only-child {
+  flex: 0 0 6px;
   height: 6px;
   border-radius: 50%;
-  flex-shrink: 0;
+}
+
+.day-indicator-dot:first-child:not(:only-child) {
+  border-radius: 3px 0 0 3px;
+}
+
+.day-indicator-dot:last-child:not(:only-child) {
+  border-radius: 0 3px 3px 0;
 }
 
 .day-indicator-dot.duty {