search

jackyzha0 / quartz

🌱 a fast, batteries-included static-site generator that transforms Markdown content into fully functional websites
https://quartz.jzhao.xyz
MIT License
6.82k stars 2.47k forks source link

Overflow of table of content #1388

Closed lynn2910 closed 1 week ago

lynn2910 commented 1 month ago

Describe the bug A big table of content will overflow on the screen when put to right side but no scroll bar will appear

To Reproduce

Simply go to to https://lynn.chamallow.xyz/cours/S3/D%C3%A9veloppement-Web/NodeJS/Basiques#boucles on a small screen (such as a laptop, especially if the screen have a zoom of 125%)

Expected behavior The table of content should be displayed in a way that we can actually see the full content

Screenshots and Source

What I see when on laptop (125% screen as it's 16") image

The same page but on a larger screen where the zoom of windows is 100%: image

Repositery: https://github.com/lynn2910/cours

Desktop (please complete the following information):

adityainduraj commented 1 week ago

Any progress on this? I am facing the same issue.

saberzero1 commented 1 week ago

Any progress on this? I am facing the same issue.

A fix is included in the grid layout rework. (https://github.com/jackyzha0/quartz/pull/1354)

adityainduraj commented 1 week ago

Looks great! Any idea on the timeline for it to be merged into main? Just saw that all checks have been approved...

saberzero1 commented 1 week ago

Looks great! Any idea on the timeline for it to be merged into main? Just saw that all checks have been approved...

It has been merged.

Please let me know if you run into any issues.

adityainduraj commented 1 week ago

Not sure if I have updated it correctly, I just ran npx quartz update but it doesn't seem like that issue is resolved for me. At 100 percent zoom, the last items in the table of contents is still cut-off and inaccessible until I zoom out.

Please let me know if you require any information from my side.

EDIT: I really think its an issue with how I've updated it, since I see on the documentation site the behavior is as intended. I would appreciate any help on where I've gone wrong.

saberzero1 commented 1 week ago

Not sure if I have updated it correctly, I just ran npx quartz update but it doesn't seem like that issue is resolved for me. At 100 percent zoom, the last items in the table of contents is still cut-off and inaccessible until I zoom out.

Please let me know if you require any information from my side.

Do you have an example where you encounter this problem?

This page seems to work fine: https://adityainduraj.github.io/secondbrain/01---Leetcode/Leetcode---Patterns-and-Other-Info

Screencast from 2024-09-23 23-08-57.webm

Perhaps a caching issue? Could you refresh your cache? (refresh your site with CTRL + F5 or SHIFT + F5)

adityainduraj commented 1 week ago

It's weird, it seems to be working fine when I build and run it locally (though my table of contents still doesn't look the same as yours) but the Github Pages site doesn't seem to implement it. I cleared the cache and even tried in a new browser altogether.

I would really appreciate any help in getting the Table of Contents to display more fields by default, like yours does, mine just shows 2 or 3 at my desired zoom level. Screencast From 2024-09-24 02-52-12.webm

saberzero1 commented 1 week ago

It's weird, it seems to be working fine when I build and run it locally (though my table of contents still doesn't look the same as yours) but the Github Pages site doesn't seem to implement it. I cleared the cache and even tried in a new browser altogether.

I would really appreciate any help in getting the Table of Contents to display more fields by default, like yours does, mine just shows 2 or 3 at my desired zoom level. Screencast From 2024-09-24 02-52-12.webm

The second page in your video seems off, it should change to the new tablet layout when you zoom in, leaving the left sidebar while hiding the right sidebar. In your video it seems to hide both, suggesting that the new layout has not been applied.

adityainduraj commented 1 week ago

Hi, I basically just reinitialized the entire repository and it. However, I've noticed that there is some sort of a double scrollbar in the table of contents. Is this by design? It seems a bit weird.

Screencast From 2024-09-24 09-33-04.webm

lynn2910 commented 1 week ago

That's weird. After updating my repo, it works perfectly: the navbar shows:

https://lynn.chamallow.xyz/cours/S3/D%C3%A9veloppement-Web/NodeJS/Basiques#2-fonctions-nomm%C3%A9es

I checked the page of @adityainduraj and after messing with the max-height of these two elements (image below), I was able to remove the scrollbar: image

Yet, now the "Table of contents" is moving alongside the rest of the explorer.

Edit: Also, as my computer opened the page for the first time, there is no problems with the local cache of my browser.

adityainduraj commented 1 week ago

Hi, I basically just reinitialized the entire repository and it. However, I've noticed that there is some sort of a double scrollbar in the table of contents. Is this by design? It seems a bit weird. Screencast.From.2024-09-24.09-33-04.webm

@saberzero1 , would you happen to know anything about the double scrollbar?

adityainduraj commented 1 week ago

@saberzero1 sorry for the ping, but I noticed another behavior. The zoom starts malfunctioning if it encounters any code block in the notes. So far I have only been able to replicate it on Firefox, it works fine on Chromium browsers. Attaching a video for your reference. Tried the usual, clearing cache, reloading the site etc. Works fine on pages that don't include a code block. Screencast From 2024-09-26 00-16-05.webm

saberzero1 commented 1 week ago

@saberzero1 sorry for the ping, but I noticed another behavior. The zoom starts malfunctioning if it encounters any code block in the notes. So far I have only been able to replicate it on Firefox, it works fine on Chromium browsers. Attaching a video for your reference. Tried the usual, clearing cache, reloading the site etc. Works fine on pages that don't include a code block. Screencast From 2024-09-26 00-16-05.webm

Perhaps I don't understand, but everything seems to work fine when I run in firefox. Can you check on your end with the proposed fixes from https://github.com/jackyzha0/quartz/pull/1440 ?