feat: commit ai-produced frontend first

frontend/src/components/calendar/CalendarGrid.vue

@@ -26,10 +26,11 @@ const overflowText = (count: number): string => {
 <template>
   <div class="calendar-grid">
     <div class="calendar-grid-header">
-      <div v-for="(name, i) in weekNames" :key="i" :class="{ weekend: i >= 5 }"><b>{{ name }}</b></div>
+      <div class="calendar-grid-cell calendar-grid-header-cell" v-for="(name, i) in weekNames" :key="i"
+        :class="{ weekend: i >= 5 }"><b>{{ name }}</b></div>
     </div>
     <div v-for="(row, ri) in rows" :key="ri" class="calendar-grid-row">
-      <div v-for="(cell, ci) in row" :key="ci" class="calendar-grid-cell"
+      <div v-for="(cell, ci) in row" :key="ci" class="calendar-grid-cell calendar-grid-body-cell"
            :class="{ 'not-current-month': !cell.isCurrentMonth }">
         <p class="cell-title">
           <b>{{ cell.day }}</b>
@@ -60,6 +61,10 @@ const overflowText = (count: number): string => {
   flex-basis: 0;
   flex-shrink: 0;
 
+  overflow: hidden;
+}
+
+.calendar-grid-body-cell {
   border-top: 1px solid black;
   border-left: 1px solid black;
   border-right: 1px solid black;
@@ -74,7 +79,7 @@ const overflowText = (count: number): string => {
   overflow: hidden;
 }
 
-.calendar-grid-cell.not-current-month {
+.calendar-grid-body-cell.not-current-month {
   background: #d0d0d0;
 }
 
@@ -83,7 +88,7 @@ const overflowText = (count: number): string => {
   border-left: 0;
 }
 
-.calendar-grid-row:nth-child(n+2) .calendar-grid-cell {
+.calendar-grid-row:nth-child(n) .calendar-grid-body-cell {
   border-top: 0;
 }