Explorer view creates transparency bar on mobile

[pauladam316]

Describe the bug When adding in the explorer view to mobile, a transparent gradient bar appears on the page in the middle of the content. The bar appears to show up regardless of where in the page you insert the explorer view, I tried adding it to the "beforebody" and "right" sections

To Reproduce

• add explorer view to mobile site via layout.ts
• load the page on mobile
• bar appears

Expected behavior A clear and concise description of what you expected to happen.

Screenshots and Source

Desktop (please complete the following information):

• Quartz Version: v4.2.2
• node Version: v21.6.1
• npm version: 10.2.4
• OS: iOS
• Browser: Safari

[aarnphm]

What bar are you referring to here?

seems like you just need to adjust the margin?

[Ks4four]

Here as well.

[aarnphm]

Oh I think it is overflow in CSS afaik.

[Ks4four]

I use the original CSS. Is there anything I can fix?

[ZetaKebab]

Hello, I confirm this issue on a vanilla installation.

[Ks4four]

The problem may be that the ::after isn't placed after the explorer-end. The height is incorrect in the box model in Web Developer Tools. I tried fiddling with bass.scss:

ul.overflow,
ol.overflow {
...

 &:after {
   /* ... */
   position: absolute;
   /* ... */

but I couldn't get it to work.

[cbarkr]

I have also reproduced this behaviour using vanilla CSS. The only change I had made was adding Component.MobileOnly(Component.Explorer()), to :file_folder: quartz.layout.ts.

[cbarkr]

The issue appears to be that the ::after pseudo-element (a child of either ul.overflow or ol.overflow; the element that applies the linear gradient) uses position: absolute when its parent does not use position: relative. After adding the correct layout property to the parent, ::after was moved to the correct position.

Before

After

Shall I make a PR?