From 088b43bc52f4ae587ec8c2a29e40f111d2c0d8cc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=81ukasz=20Mierzwa?= <l.mierzwa@gmail.com>
Date: Sun, 17 May 2026 19:22:38 +0100
Subject: [PATCH] fix(ui): fix end tab start day

---
 CHANGELOG.md                                  |  8 ++-
 .../__snapshots__/index.test.tsx.snap         | 69 ++++++++++---------
 .../DateTimeSelect/index.test.tsx             |  6 +-
 .../SilenceModal/DateTimeSelect/index.tsx     |  2 +
 4 files changed, 49 insertions(+), 36 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 51ec79b10..476c4e069 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,10 +1,16 @@
 # Changelog
 
+## v0.131
+
+### Fixed
+
+- Calendar `Ends` tab now uses Monday as the first day of the week - #6715.
+
 ## v0.130
 
 ### Fixed
 
-- Calendar now uses Monday as the first day of the wek - #6715.
+- Calendar now uses Monday as the first day of the week - #6715.
 
 ## v0.129
 
diff --git a/ui/src/Components/SilenceModal/DateTimeSelect/__snapshots__/index.test.tsx.snap b/ui/src/Components/SilenceModal/DateTimeSelect/__snapshots__/index.test.tsx.snap
index 8068a7e93..88701a0de 100644
--- a/ui/src/Components/SilenceModal/DateTimeSelect/__snapshots__/index.test.tsx.snap
+++ b/ui/src/Components/SilenceModal/DateTimeSelect/__snapshots__/index.test.tsx.snap
@@ -379,6 +379,7 @@ exports[`<DateTimeSelect /> 'Ends' tab matches snapshot 1`] = `
             <nav
               aria-label="Navigation bar"
               class="rdp-nav"
+              data-animated-nav="true"
             >
               <button
                 aria-label="Go to the Previous Month"
@@ -415,9 +416,11 @@ exports[`<DateTimeSelect /> 'Ends' tab matches snapshot 1`] = `
             </nav>
             <div
               class="rdp-month"
+              data-animated-month="true"
             >
               <div
                 class="rdp-month_caption"
+                data-animated-caption="true"
               >
                 <span
                   aria-live="polite"
@@ -438,14 +441,8 @@ exports[`<DateTimeSelect /> 'Ends' tab matches snapshot 1`] = `
                 >
                   <tr
                     class="rdp-weekdays"
+                    data-animated-weekdays="true"
                   >
-                    <th
-                      aria-label="Sunday"
-                      class="rdp-weekday"
-                      scope="col"
-                    >
-                      Su
-                    </th>
                     <th
                       aria-label="Monday"
                       class="rdp-weekday"
@@ -488,24 +485,22 @@ exports[`<DateTimeSelect /> 'Ends' tab matches snapshot 1`] = `
                     >
                       Sa
                     </th>
+                    <th
+                      aria-label="Sunday"
+                      class="rdp-weekday"
+                      scope="col"
+                    >
+                      Su
+                    </th>
                   </tr>
                 </thead>
                 <tbody
                   class="rdp-weeks"
+                  data-animated-weeks="true"
                 >
                   <tr
                     class="rdp-week"
                   >
-                    <td
-                      aria-selected="true"
-                      class="rdp-day rdp-hidden rdp-outside rdp-selected rdp-range_middle"
-                      data-day="2061-01-30"
-                      data-hidden="true"
-                      data-month="2061-01"
-                      data-outside="true"
-                      data-selected="true"
-                      role="gridcell"
-                    />
                     <td
                       aria-selected="true"
                       class="rdp-day rdp-hidden rdp-outside rdp-selected rdp-range_middle"
@@ -588,10 +583,6 @@ exports[`<DateTimeSelect /> 'Ends' tab matches snapshot 1`] = `
                         5
                       </button>
                     </td>
-                  </tr>
-                  <tr
-                    class="rdp-week"
-                  >
                     <td
                       class="rdp-day"
                       data-day="2061-02-06"
@@ -606,6 +597,10 @@ exports[`<DateTimeSelect /> 'Ends' tab matches snapshot 1`] = `
                         6
                       </button>
                     </td>
+                  </tr>
+                  <tr
+                    class="rdp-week"
+                  >
                     <td
                       class="rdp-day"
                       data-day="2061-02-07"
@@ -690,10 +685,6 @@ exports[`<DateTimeSelect /> 'Ends' tab matches snapshot 1`] = `
                         12
                       </button>
                     </td>
-                  </tr>
-                  <tr
-                    class="rdp-week"
-                  >
                     <td
                       class="rdp-day"
                       data-day="2061-02-13"
@@ -708,6 +699,10 @@ exports[`<DateTimeSelect /> 'Ends' tab matches snapshot 1`] = `
                         13
                       </button>
                     </td>
+                  </tr>
+                  <tr
+                    class="rdp-week"
+                  >
                     <td
                       class="rdp-day"
                       data-day="2061-02-14"
@@ -792,10 +787,6 @@ exports[`<DateTimeSelect /> 'Ends' tab matches snapshot 1`] = `
                         19
                       </button>
                     </td>
-                  </tr>
-                  <tr
-                    class="rdp-week"
-                  >
                     <td
                       class="rdp-day"
                       data-day="2061-02-20"
@@ -810,6 +801,10 @@ exports[`<DateTimeSelect /> 'Ends' tab matches snapshot 1`] = `
                         20
                       </button>
                     </td>
+                  </tr>
+                  <tr
+                    class="rdp-week"
+                  >
                     <td
                       class="rdp-day"
                       data-day="2061-02-21"
@@ -894,10 +889,6 @@ exports[`<DateTimeSelect /> 'Ends' tab matches snapshot 1`] = `
                         26
                       </button>
                     </td>
-                  </tr>
-                  <tr
-                    class="rdp-week"
-                  >
                     <td
                       class="rdp-day"
                       data-day="2061-02-27"
@@ -912,6 +903,10 @@ exports[`<DateTimeSelect /> 'Ends' tab matches snapshot 1`] = `
                         27
                       </button>
                     </td>
+                  </tr>
+                  <tr
+                    class="rdp-week"
+                  >
                     <td
                       class="rdp-day"
                       data-day="2061-02-28"
@@ -966,6 +961,14 @@ exports[`<DateTimeSelect /> 'Ends' tab matches snapshot 1`] = `
                       data-outside="true"
                       role="gridcell"
                     />
+                    <td
+                      class="rdp-day rdp-hidden rdp-outside"
+                      data-day="2061-03-06"
+                      data-hidden="true"
+                      data-month="2061-03"
+                      data-outside="true"
+                      role="gridcell"
+                    />
                   </tr>
                 </tbody>
               </table>
diff --git a/ui/src/Components/SilenceModal/DateTimeSelect/index.test.tsx b/ui/src/Components/SilenceModal/DateTimeSelect/index.test.tsx
index 554b9492d..d2b91f7d1 100644
--- a/ui/src/Components/SilenceModal/DateTimeSelect/index.test.tsx
+++ b/ui/src/Components/SilenceModal/DateTimeSelect/index.test.tsx
@@ -382,11 +382,13 @@ describe("<TabContentEnd />", () => {
       "February 2061",
     );
     fireEvent.click(container.querySelector("button.rdp-button_next")!);
-    expect(container.querySelector(".rdp-month_caption")?.textContent).toBe(
+    const captionsAfterNext = container.querySelectorAll(".rdp-month_caption");
+    expect(captionsAfterNext[captionsAfterNext.length - 1].textContent).toBe(
       "March 2061",
     );
     fireEvent.click(container.querySelector("button.btn.btn-light.btn-sm")!);
-    expect(container.querySelector(".rdp-month_caption")?.textContent).toBe(
+    const captionsAfterToday = container.querySelectorAll(".rdp-month_caption");
+    expect(captionsAfterToday[captionsAfterToday.length - 1].textContent).toBe(
       format(new Date(), "LLLL yyyy"),
     );
   });
diff --git a/ui/src/Components/SilenceModal/DateTimeSelect/index.tsx b/ui/src/Components/SilenceModal/DateTimeSelect/index.tsx
index 3e9273631..725baa06c 100644
--- a/ui/src/Components/SilenceModal/DateTimeSelect/index.tsx
+++ b/ui/src/Components/SilenceModal/DateTimeSelect/index.tsx
@@ -166,6 +166,8 @@ const TabContentEnd: FC<{ silenceFormStore: SilenceFormStore }> = observer(
               start: silenceFormStore.data.startsAt,
               end: silenceFormStore.data.endsAt,
             }}
+            weekStartsOn={1}
+            animate
           />
         </div>
         <HourMinute