CSS/JS help needed for controlling position of Logseq UI Home buttons group in relation to right Sidebar width

Hello, I encountered this situation when, after making, with javascript, the right sidebar at 0.1% (I need not to Close it completely with T R because of some other artifices I am using to have the Contents Card available at a key shortcut distance anytime), i get some unwanted overlapping between the icons group starting wiht the Home, atop the UI and the minimize, Maximize and Close buttons for the app at the top-right corner.

While dragging the vertical demarcation between the Right Sidebar pane and the Working area, the RIght Sidebar Pane can’t be squeezed past a certain point, after which it closes completely and the icons group starting with Home align OK just before the app buttons. Not so when one forces a minimization of the right sidebar at 0.1%.
Here is the situation when the right sidebar is at maximum squeeze before Closing completely (as if T R was pressed):

Here is after it goes straight from the previous position to completely gone off screen (Closed):

And this is how it looks then the right sidebar is forced at 0.1%:

I do this with the following (@mentaloid;s code for cycling trough several widths of the right sidebar, adapted by be however I could manage without javascript knowledge):

logseq.api.set_right_sidebar_visible(false);rightbar.style.width = "0.1%";

I tracked, with Developer Tools Inspector, that the whole group of icons and the div they are in is the following:

I want to prevent this region to go to the ritghmost side and overlap with the Minimize|Maximize|Close buttons but keep it from overflowing past the start of the mentioned buttons.

Is there a way you can see how to do this with CSS?

  • Since you do:
    rightbar.style.width = "0.1%"
  • …should also do:
    document.querySelectorAll("div.flex.drag-region")[1].style.marginRight = "144px"
  • And when you restore the former width, should also restore the latter margin to 0.
1 Like

Works like a charm. Thanks @mentaloid!