The sidebars disappears too soon when zooming in.

archvalmiki commented 2 months ago

This is the best way I can describe the problem:

Open an Obsidian Publish site in the browser. Start at default zoom levels and start zooming in (CTRL +). Count the number of times zoom in before the layout adapts so the sidebars (Explorer and TOC) disappear.

Now do the same thing for a Quartz site in a window of the same size. The quartz site triggers mobile layout without sidebar way too soon.

An Obsidian Publish site's zoom behavior is much more preferable. On a quartz site, it switches media queries too soon ... on a standard M1 Macbook Pro, full screen, zooming from 100% to 125% triggers this.... and there is a LOT of wasted space to the left and right.

nirmitjoshi commented 2 months ago

+1, also the default screen size to view explorer menu is 1500px (1510px to be precise) so it can't even be seen in many laptops.

danhosanee commented 2 months ago

Lucky I saw this I was troubleshooting this for ages - 13inch macbook air

nirmitjoshi commented 2 months ago

Temporary Fix

Note

The screen size required for the explorer to show depends on your variable preferences below. The following solution just provides more control over the screen.

Steps

Set the sidebar width to fit-content and padding to 0. ( file - /quartz/quartz/styles/base.scss )
Find the absolute width of the sidebar and store it in a variable. (i found it by inspecting sidebar but if you prefer you can write a small function for it)
Define the maximum and minimum widths to apply between the sidebars and center-content.
Calculate the necessary gap according to the above variables.

Example Solution

$sidePanelWidth: 200px; /* Calculate based on your sidebar content */
$maxContentSidebarWidth: 80px; /* Personal preference */

/* ( file - `/quartz/quartz/styles/base.scss` ) */
.sidebar.left {
  left: calc((100vw - $fullPageWidth) / 4);

  @media (min-width: $fullPageWidth + $maxContentSidebarWidth * 4) {
    left: calc((100vw - $fullPageWidth - 2 * $maxContentSidebarWidth) / 2);
  }
}

.sidebar.right {
  right: calc((100vw - $fullPageWidth) / 4);

  @media (min-width: $fullPageWidth + $maxContentSidebarWidth * 4) {
    right: calc((100vw - $fullPageWidth - 2 * $maxContentSidebarWidth) / 2);
  }
}

Though I would also like the functionality to show only one sidebar depending on the screen size. Someone implement this :)

Mansour-J commented 1 month ago

+1

Aubermean commented 3 weeks ago

This should be closed as a duplicate of https://github.com/jackyzha0/quartz/issues/455

jackyzha0 / quartz