Fixing the Google Calendar item editor CSS so the title 40% of my window width
Posted by jpluimers on 2024/10/08
When working on larger screens, I am always amazed at how little window estate most web sites actually use.
For sites that just try to look nice that is not so much or a problem, but for productivity sites it is.
The go-to solution for this is to manually modify the CSS. This can often be a pain because the CSS is either deeply nested or – even worse – uses semi-random HTML class attribute values.
This post is a reminder to myself to check if the below CSS modification in my Stylus library still works (gist link is at the bottom of this post):
/* ==UserStyle== @name calendar.google.com event editor: item title wider and normal font size @namespace github.com/openstyles/stylus @version 1.0.0 @description calendar.google.com event editor: item title wider and normal font size; experimental: hopefully the class names won't change @author jpluimers ==/UserStyle== */ @-moz-document url-prefix("https://calendar.google.com/calendar/u/0/r/eventedit") { .TgcD5e.CCDcoc .zHQkBf { font-size: 14px; } .kVw1pb { width: calc(max(65%, 578px + 56px + (100% - 1049px)*0.16666667)) } }
Remarks:
- making it wider than
65%will cut of the dropdown despite there being enough Window estate for it - sometimes my calendar item titles are so large (they have lots of meta-data) that both the reduced font size and enlarged width are needed
Related blog post and tweets:
- Fixing the GitHub gist CSS so the editor uses more than 25% of my screen estate.
- [Wayback/Archive] Stylus CSS for calendar.google.com event editor: item title wider and normal font size; experimental: hopefully the class names won’t change
- [Wayback/Archive] Thread by @jpluimers on Thread Reader App ([Wayback/Archive] Jeroen Wiert Pluimers on Twitter: “Similar for editing individual
calendar.google.comentries. However, there element class names have semi-random names, in this case `.kVw1pb`. How rude is that @googlecalendar! I tested this to work on monitor widths from 1024 to 3840px: …” / Twitter):
Similar for editing individual
calendar.google.comentries.However, there element class names have semi-random names, in this case `.kVw1pb`.
How rude is that
@googlecalendar!I tested this to work on monitor widths from 1024 to 3840px:
Google calendar event details use half the Window width which makes the event title (with the large font) hard to edit.
Semi-random element class names
[Wayback/Archive] Is there a way to make the @github gist text editor wider and taller?
One can figure out the class name of the `
div` encompassing both the calendar item title and “Save” button, then setting `width` from `calc(578px + 56px + (100% - 1049px)*0.16666667)` to `calc(max(65%, 578px + 56px + (100% - 1049px)*0.16666667))`
When making the width too wide, other elements get truncated despite there being enough window estate.
Anything wider (even like `
calc(max(70%, 578px + 56px + (100% - 1049px)*0.16666667))`) makes the “More actions” dropdown going to be too narrow (despite there being enough screen estate). Probably fixable too, but too little energy for that right now.
Too wide? Bye bye drop down content.
Another alternative is figuring out the style of the edit, then making the `
font-size` smaller.Most elements have `
14px` there which doubles the visible content of the calendar item title.I think I will write a Stylus entry for this and see if that keeps working over time.
The edit font size could become a lot smaller tool.
More content visible when downsizing the font from `
28px` to `14px`.Gist with CSS modifications: [Wayback/Archive] Stylus CSS for calendar.google.com event editor: item title wider and normal font size; experimental: hopefully the class names won’t change
–jeroen
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* ==UserStyle== | |
| @name calendar.google.com event editor: item title wider and normal font size | |
| @namespace github.com/openstyles/stylus | |
| @version 1.0.0 | |
| @description calendar.google.com event editor: item title wider and normal font size; experimental: hopefully the class names won't change | |
| @author jpluimers | |
| ==/UserStyle== */ | |
| @-moz-document url-prefix("https://calendar.google.com/calendar/u/0/r/eventedit") { | |
| .TgcD5e.CCDcoc .zHQkBf { | |
| font-size: 14px; | |
| } | |
| .kVw1pb { | |
| width: calc(max(65%, 578px + 56px + (100% – 1049px)*0.16666667)) | |
| } | |
| } |
The Wiert Corner - irregular stream of stuff 
Leave a comment