jackyzha0 / quartz

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

Search Popup isn't respecting width settings #1610

Closed blacklightpy closed 3 days ago

blacklightpy commented 4 days ago

Describe the bug The search popup has disproportionate widths when I change the breakpoint width of the desktop layout.

To Reproduce 1.Set desktop: max(1200px, calc(100vw - 1px)), in variables.scss and build.

  1. Search for something

Expected behavior Search page shows content with proper width.

Screenshots and Source Screenshot_20241121-191154_Chrome

Test site: https://jyo.mom/notes Repo: https://github.com/blacklightpy/notes

Desktop (please complete the following information):

blacklightpy commented 3 days ago

I found this in inspect element using Kiwi Browser.

.search>#search-container>#search-space>#search-layout>#preview-container .preview-inner {
    width: min(0px,100%);
    margin: 0 auto;
}

Changing it to this worked:

.search>#search-container>#search-space>#search-layout>#preview-container .preview-inner {
    width: max(0px,100%);
    margin: 0 auto;
}

I don't have PC so I don't know what variable to change yet.

blacklightpy commented 3 days ago

Found it. Setting mobile width to 0 breaks the search bar.