The right title is overlapped by the header

Please see my purple rectangle:

The width of floating vertical header is defined here, as 100vh - tiddler-header-height - 2 * (tiddler-padding). The definition is correct, however, that krystal-header-height is 0px.

krystal/plugins/rmnvsl/krystal/title.css

Line 32 in 888bdfb

    
           width: calc(100vh - var(--krystal-header-height) - ( 2 * var(--tiddler-padding)));

This will cause the width of floating vertical header <a> element to have a width larger than expected. The left stacked vertical header will have no issues since they're left-aligned and then rotated -90deg. However, the right stacked vertical headers have an extra 180deg rotation, and the extra width, in this case, will then be covered by the top navbar.

The --krystal-header-height is defined in plugin.js.

krystal/plugins/rmnvsl/krystal/plugin.js

Lines 75 to 81 in 888bdfb

    
           function header() { 
        
             const height = document.querySelector(".krystal-header").offsetHeight; 
        
             document.documentElement.style.setProperty( 
        
               "--krystal-header-height", 
        
               `${height}px` 
        
             ); 
        
           }

the code sets the variable --krystal-header-height by querying the offsetHeight property from the element .krystal-header.

There are two .krystal-header elements. The first one is .krystal-header--small which is hidden when min-width: 960px is satisfied. The second one is .krystal-header--big, which is displayed when the min-width: 960px is satisfied. The query document.querySelector(".krystal-header") will return the first matched element, which is .krystal-header--small. Its offsetHeight will be 0px if it's hidden when the window width is larger than 960px.

This bug is introduced since commit 79388e2 .

A simple verifiable fix is to change the order of these two elements. Check this repo https://github.com/ericworks/krystal-header-bugfix and its demo at https://ericworks.github.io/krystal-header-bugfix/ . I change the order of two .krystal-header elements and the overlap issue is gone.

I create this repo to demonstrate the root cause. However, I suggest fixing it by changing .krystal-header into .krystal-header--big in plugin.js.

@crazko thanks for Krystal and @ericworks thanks for this bugfix. As reported in the Tweaks to horizontal Storyriver thread in the TW forum, we are using both to create our customized themes.

	function header() {
	const height = document.querySelector(".krystal-header").offsetHeight;
	document.documentElement.style.setProperty(
	"--krystal-header-height",
	`${height}px`
	);
	}