Redesign User Diary Page Grid Using Bootstrap Grid and Cards

[kcne]

Problem

The current user diary page could benefit from a more organized and user-friendly layout. Navigation through diary entries can be cumbersome, and readability might be improved with a different structure.

Description

Description: I propose redesigning the user diary page by using Bootstrap's grid and card components, which are already part of our existing CSS framework. The main idea is to:

• Organize diary entries using a grid layout, allowing users to view more entries at once.
• Display each entry within a Bootstrap card, providing a cleaner and more consistent look.
• Improve overall readability and navigation.

This idea could also work alongside PR #5121, which addresses text truncation for long diary entries. The redesign would focus on the overall user interface and user experience.

Would love to hear what others think about this approach.

Screenshots

Note: This is just initial idea, so I can get feedback what others think about this. If there be some interest i can do mobile view too and enchance this further. Thank you.