YukiGasai / obsidian-google-calendar

Add Google Calendar inside Obsidian
https://yukigasai.github.io/obsidian-google-calendar/
GNU General Public License v3.0
359 stars 25 forks source link

Text is cropped inside events if words are too long #180

Closed m-beau closed 1 year ago

m-beau commented 1 year ago

Self-explanatory:

Screenshot from 2023-08-31 16-47-56

YukiGasai commented 1 year ago

Hi, the text is cropped to the top of the box to increase the chance of being readable if other events overlap it. If you have a better idea, please give it a description.

m-beau commented 1 year ago

I agree that the portion which is currently visible should stay at the top, but the cropped-out letters are doomed to be invisible in any case.

I suggest 1) allowing to set font size as a setting 2) 'wrapping' the text, google sheet style (but with a dash where the text got cut instead of nothing at all, I find that a bit confusing as well): gif2

m-beau commented 1 year ago

Also, related suggestion: you should decrease the space between lines and the margins in general - ideally dynamically based on the size of the box, even smaller is the box is way too small - to increase the room for the text to fit in each box! Check out how google calendar does it (small margin in top box, large margins in bottom box):

Screenshot from 2023-09-01 11-11-38

YukiGasai commented 1 year ago

Hi, I updated the plugin, so the padding will be turned off if there is less space + I enabled text wrapping, so no words are cut off. I tried adding hyphens, but this doesn't seem to work and tbo would only take away space.

m-beau commented 1 year ago

text-wrapping without hyphens is better I agree

I would still suggest a smaller padding between rows of text (could be set as a parameter in the plugin preferences?)

YukiGasai commented 1 year ago

I try to avoid placing appearance options in the settings because, everyone has their own preferences and this would lead to more and more settings. You can change the line Height of the text to put the rows closer together using a custom CSS Snippet.

.googleCalendarName {
    line-height: 1;
}
m-beau commented 1 year ago

Fair enough - thanks for the snippet and the updates.