Enhancing Calendar UX in Breniapp

Introduction

This post details recent improvements to the calendar user experience in the Breniapp project. The focus was on refining text sizes, padding, modal presentation, and content titles for a more intuitive and visually appealing interface.

Height Calculation and Grid Adjustments

The calendar height calculation was adjusted to better fill the viewport, ensuring a more consistent display across different screen sizes. Specifically, the height offset was reduced to 124px. Additionally, the month grid was modified to utilize height: 100% and min-height: 0 to ensure that rows stretch properly, optimizing space utilization.

Text and Padding Refinements

Several adjustments were made to text sizes and padding to improve readability and visual balance:

• Day numbers: 13px/400
• Column headers: 11px/500/0.5px letter-spacing
• Month title (e.g., "Marzo 2026"): 14px/600
• Stats numbers: 22px/700
• Stats labels: 11px
• Sidebar section headers: letter-spacing 0.8px
• Cell padding: 4px 6px
• Sidebar cards: p-3
• Stat inner cards: p-2.5
• Unscheduled/upcoming item titles: 13px
• Subtexts: 11px

These changes ensure a more harmonious and easily digestible presentation of information within the calendar interface.

Dynamic Content Titles

To address the issue of repeated generic topic labels, the content display logic was enhanced. The system now uses the first eight words of the content copy as the title. If the copy is not available, it falls back to the topic. This improvement ensures that calendar entries are more descriptive and contextually relevant.

<?php

$title = $contentCopy ? implode(' ', array_slice(explode(' ', $contentCopy), 0, 8)) : $topic;

echo htmlspecialchars($title);

?>

This PHP snippet illustrates how the title is dynamically generated, prioritizing content copy and falling back to the topic when necessary.

Modal Presentation

The modal presentation was also refined with the following adjustments:

• max-width: 480px
• overlay: rgba(0,0,0,0.7)
• box-shadow: 0 8px 32px
• padding: 20px
• title: 15px
• labels: 12px

These changes enhance the modal's visual appeal and user-friendliness.

Conclusion

By focusing on visual consistency, readability, and dynamic content presentation, the calendar UX in Breniapp has been significantly improved. Take time to review your application's UI, focusing on small improvements to text and spacing - they can add up to a big impact on the user experience.