From 0fc2d05085b5d6b90306cef8f472308be91522d1 Mon Sep 17 00:00:00 2001
From: Kyle Pope <kyle.a.pope@outlook.com>
Date: Wed, 11 Mar 2026 02:14:35 +0800
Subject: [PATCH] Fix calendar view dropdown clipping and title overlap on
 mobile

Add pr-8 to mobile view Select to prevent text clipping under chevron.
Add min-w-0 flex-shrink to calendar title h2 to prevent nav arrow overlap.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 frontend/src/components/calendar/CalendarPage.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/calendar/CalendarPage.tsx b/frontend/src/components/calendar/CalendarPage.tsx
index e547f56..d94f514 100644
--- a/frontend/src/components/calendar/CalendarPage.tsx
+++ b/frontend/src/components/calendar/CalendarPage.tsx
@@ -513,7 +513,7 @@ export default function CalendarPage() {
           <Select
             value={currentView}
             onChange={(e) => changeView(e.target.value as CalendarView)}
-            className="h-8 text-sm w-auto md:hidden"
+            className="h-8 text-sm w-auto pr-8 md:hidden"
           >
             {(Object.entries(viewLabels) as [CalendarView, string][]).map(([view, label]) => (
               <option key={view} value={view}>{label}</option>
@@ -540,7 +540,7 @@ export default function CalendarPage() {
             ))}
           </div>
 
-          <h2 className="text-sm sm:text-lg font-semibold font-heading truncate">{calendarTitle}</h2>
+          <h2 className="text-sm sm:text-lg font-semibold font-heading truncate min-w-0 flex-shrink">{calendarTitle}</h2>
 
           <div className="flex-1" />