Showcase of my css snippets for this plugin and question about spacing of nav element vs Timeline in sidebar

[matyasLevinsky]

Hi, First of all thank you for this plugin, it is very useful. I am mainly using it in my right sidebar, as a TimelineView. The real estate of the sidebar is limited so i grew really annoyed at wasted space, especially between the navigation and the actual timeline. I have some surface level knowledge of css so I tried to make some snippets to fix that issue.

I also have a question to someone who can use the developer tools of obsidian better than me: Why is there still a gap/padding/margin between the elements <div class="gcal-title-container"> and <div class="gcal-week-container svelte-m4uap8" style="grid-template-columns: auto repeat(1, minmax(0px, 1fr));"> even though the inspect tool shows there to be none? It is driving me crazy. To replicate just open obsidian developer tools, Ctrl+Shift+I and go down the rabbit hole, its not margins, padding or border. What is it? - It's driving me crazy.

I would like to add these examples to the User Examples page, after someone confirms they are not dangerous, or achievable in a more intuitive manner.

These are my modifications:

1. Remove padding for nav (set to 0) and add minimal margin on top to prevent stacking:

   .gcal-nav-container.svelte-oeb4qr {
   margin-bottom:0; /* was 1em */
   margin-top:3px, /* was 0 */
   }

2. Remove padding for date container: (set to 0)

   .gcal-date-container.svelte-oeb4qr {
   margin-bottom:0; /* was 10px */
   }

3. Set the current time line length to 100%:

   .gcal-time-display.svelte-1b16v0k {
   position: absolute;
   width: 100%; /* was 95% */
   height: 3px; 
   background: red;
   overflow: visible;
   z-index: 2;
   }

4. Goal for minimal buttons Goal: << < Today > >> This selects only buttons within .gcal-nav-container:

   .gcal-nav-container button {  
   padding: 1px 6px; /*there are other properties, not mentioned here*/  
   }

5. Adjust top padding, as lines are shifted:

   .gcal-timeline.svelte-1b16v0k {
   position: relative;
   display: flex;
   flex-direction: row;
   padding-top: 0px; /* Was 5px, Number adjustment, so they line up with the lines */
   flex-shrink: 1000;
   min-height: 0;
   margin: -199.2px 0px 0px 0px !important; /* was -208.167px 0px 0px 0px */
   }

6. Make internal padding thinner:

   .gcal-week-container.svelte-m4uap8.svelte-m4uap8 {
   position: relative;
   display: inline-grid;
   gap: 9px; /* was 16px */
   grid-auto-flow: row;
   overflow: hidden;
   }

   Change images: Before: After:

[YukiGasai]

Hi, thank you for your feedback examples and improvements. IMO the snippets look good, but you should remove the svelte classes because they are generated dynamically and could change if the plugin updates. The space between the title and the timeline is from the gap in .gcal-week-container. There are some hidden elements that are needed to allow the view to be reused in the week view.

[matyasLevinsky]

Ok, made it into a pull request.

gap is a big part of the space, but making it small squishes the lines to close to the numerals for hours. Looking in the inspect tool there seems to be something between gcal-title-container and gcal-week-container, im guessing about 10px high that the inspect tool is just not picking up (or I am searching in the wrong place). Doesn't matter, im quite happy with the current look I achieved.