Fix visual bug for day name indicator

src/lib/components/calendar.svelte

@@ -27,6 +27,7 @@
                 date: day.getDate(),
                 month: day.getMonth(),
                 year: day.getFullYear(),
+                dayName: headers[i],
                 isCurrentMonth: day.getMonth() === today.getMonth(),
                 isToday: day.toDateString() === today.toDateString()
             });
@@ -49,10 +50,12 @@
         // Previous month days
         const prevMonthLastDay = new Date(year, month, 0).getDate();
         for (let i = startDay - 1; i >= 0; i--) {
+            const dayIndex = days.length % 7;
             days.push({
                 date: prevMonthLastDay - i,
                 month: month - 1,
                 year: month === 0 ? year - 1 : year,
+                dayName: headers[dayIndex],
                 isCurrentMonth: false,
                 isToday: false
             });
@@ -64,10 +67,12 @@
             const isToday = today.getDate() === i && 
                            today.getMonth() === month && 
                            today.getFullYear() === year;
+            const dayIndex = days.length % 7;
             days.push({
                 date: i,
                 month: month,
                 year: year,
+                dayName: headers[dayIndex],
                 isCurrentMonth: true,
                 isToday
             });
@@ -76,10 +81,12 @@
         // Next month days to fill the grid
         const remaining = 42 - days.length; // 6 rows * 7 days
         for (let i = 1; i <= remaining; i++) {
+            const dayIndex = days.length % 7;
             days.push({
                 date: i,
                 month: month + 1,
                 year: month === 11 ? year + 1 : year,
+                dayName: headers[dayIndex],
                 isCurrentMonth: false,
                 isToday: false
             });
@@ -147,13 +154,15 @@
     </div>
     
     <div class="calendar">
-        {#each headers as header}
-            <span class="day-name">{header}</span>
-        {/each}
-        {#each days as day}
+        {#each days as day, index}
             <div class="day" class:other-month={!day.isCurrentMonth} class:today={day.isToday}>
+                <div class="day-header">
+                    {#if index < 7}
+                        <span class="day-name">{day.dayName}</span>
+                    {/if}
                     <span class="date">{day.date}</span>
                 </div>
+            </div>
         {/each}
     </div>
 </div>
@@ -225,7 +234,6 @@
   display: grid;
   width: 100%;
   grid-template-columns: repeat(7, minmax(120px, 1fr));
-  grid-template-rows: 50px;
   grid-auto-rows: 120px;
   overflow: auto;
 }
@@ -233,16 +241,33 @@
 .day {
   border-bottom: 1px solid rgba(166, 168, 179, 0.12);
   border-right: 1px solid rgba(166, 168, 179, 0.12);
-  text-align: right;
   padding: 14px 20px;
-  letter-spacing: 1px;
-  font-size: 14px;
   box-sizing: border-box;
   color: #98a0a6;
   position: relative;
   z-index: 1;
 }
 
+.day-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 8px;
+}
+
+.day-name {
+  font-size: 12px;
+  text-transform: uppercase;
+  color: #e9a1a7;
+  font-weight: 500;
+}
+
+.date {
+  font-size: 18px;
+  font-weight: 600;
+  letter-spacing: 1px;
+}
+
 .day.other-month {
   opacity: 0.3;
 }
@@ -298,13 +323,4 @@
 .day:nth-of-type(7n + 7) {
   grid-column: 7/7;
 }
-.day-name {
-  font-size: 12px;
-  text-transform: uppercase;
-  color: #e9a1a7;
-  text-align: center;
-  border-bottom: 1px solid rgba(166, 168, 179, 0.12);
-  line-height: 50px;
-  font-weight: 500;
-}
 </style>