feat: Hide calendar title in narrow containers for better responsive UI (#285)

Improve calendar header responsiveness by detecting actual container
width instead of window width:
- Hide title when calendar container width ≤ 600px
- Use getBoundingClientRect() to measure actual container dimensions
- Update header visibility on resize events for dynamic pane adjustments
- Provides better UX in Obsidian's flexible pane system (sidebars, split
views)
This commit is contained in:
Callum Alpass 2025-07-27 12:31:42 +10:00
parent 6b5d8105ae
commit 5972fb9c02

View file

@ -413,9 +413,14 @@ export class AdvancedCalendarView extends ItemView {
return false; // This hides the entire header toolbar
}
// Check if calendar container is narrow (less than 600px wide) to hide title
const calendarContainer = this.contentEl.querySelector('.advanced-calendar-view__calendar-container');
const containerWidth = calendarContainer ? calendarContainer.getBoundingClientRect().width : window.innerWidth;
const isNarrowView = containerWidth <= 600;
const toolbarConfig = {
left: 'prev,next today',
center: 'title',
center: isNarrowView ? '' : 'title', // Hide title in narrow views
right: 'refreshICS multiMonthYear,dayGridMonth,timeGridWeek,timeGridCustom,timeGridDay'
};
console.log('Header toolbar config:', toolbarConfig);
@ -656,6 +661,8 @@ export class AdvancedCalendarView extends ItemView {
this.resizeTimeout = win.setTimeout(() => {
if (this.calendar) {
this.calendar.updateSize();
// Update header toolbar to handle narrow view title visibility
this.updateHeaderVisibility();
}
}, 150);
};