rohskiddo/UMBRA
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

Fix calendar view dropdown clipping and title overlap on mobile

Browse Source 
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>
This commit is contained in:
Kyle 2026-03-11 02:14:35 +08:00
parent 56175aaf86
commit 0fc2d05085
1 changed files with 2 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/src/components/calendar/CalendarPage.tsx
View File

@ -513,7 +513,7 @@ export default function CalendarPage() {
<Select <Select
value={currentView} value={currentView}
onChange={(e) => changeView(e.target.value as CalendarView)} 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]) => ( {(Object.entries(viewLabels) as [CalendarView, string][]).map(([view, label]) => (
<option key={view} value={view}>{label}</option> <option key={view} value={view}>{label}</option>
@ -540,7 +540,7 @@ export default function CalendarPage() {
))} ))}
</div> </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" /> <div className="flex-1" />